# Sikika: full documentation

> A simple and clean WordPress theme built to work with the Kemoku Reviews plugin, or standalone.

============================================================
Sikika
============================================================

---

URL: https://docs.affkraft.com/sikika
Markdown: https://docs.affkraft.com/sikika.md

# Sikika Theme

Sikika is a simple and clean WordPress theme that's been developed to be used
with Kemoku Reviews plugin, however it can be used a standalone theme as well.

***

## Getting Started

It's easy to get started with Sikika. Follow the documentations to install the
theme and create compelling websites.

### Requirements

Before getting started make sure you have all the requirements met.

To use the theme, you must be running `WordPress 6.0` or higher and `PHP 8.4` or
higher. Recommended `WordPress 7.1`.

Also make sure your host has the minimum requirements to run WordPress and PHP
`max_upload_size` is more than 2MB.

### Changelog

Find the full changelog [here](https://affkraft.com/changelog?product=sikika).

---

URL: https://docs.affkraft.com/sikika/installation
Markdown: https://docs.affkraft.com/sikika/installation.md

# Theme Installation

You can install the theme either through WordPress dashboard (recommended) or via FTP.

***

## Before Installation

Please make sure your server meets the minimum system requirements and download the theme file from your [AffKraft account](https://affkraft.com/login).

### Install through WordPress Dashboard

1. Visit WordPress dashboard → Themes and click `Add New` and `Upload Theme` after that
2. Click `Choose File`, select the theme file `sikika.zip` and click `Install Now`
3. Activate the theme

### Install via FTP

1. Log in to your server with your FTP credentials, using an FTP client, cPanel or similar
2. Navigate to `themes` directory from your WordPress website root
3. Upload the theme file `sikika.zip` and unzip the archive
4. Visit WordPress dashboard → Themes and activate the theme

---

URL: https://docs.affkraft.com/sikika/page-templates
Markdown: https://docs.affkraft.com/sikika/page-templates.md

# Page Templates

Sikika comes with several page templates to help you create different types of pages.

***

### Available Templates

Sikika includes the following page templates:

1. **Default Template**: Standard page layout with content and sidebar
2. **Page Sidebar**: Alternative layout with sidebar on the left side
3. **Sportsbook Sidebar**: Special template for sportsbook review pages with dedicated sidebar (requires Kemoku plugin)

### How to Use Templates

1. Create a new page or edit an existing one
2. In the page editor, look for the "Page Attributes" section in the sidebar
3. Under "Template", select your desired template from the dropdown
4. Update or publish the page

### Sportsbook Template

The Sportsbook template is specifically designed for sportsbook review pages. It includes:

* A dedicated sidebar for sportsbook-specific widgets
* Optimized layout for review content
* Special styling for sportsbook information

> **Note:** The Sportsbook template is only available when the Kemoku Sportsbook Reviews plugin is installed and activated.

---

URL: https://docs.affkraft.com/sikika/hero-section
Markdown: https://docs.affkraft.com/sikika/hero-section.md

# Hero Section

Sikika includes a customizable hero section for your pages. The hero section appears at the top of your pages and can be configured with various elements.

***

### Hero Section Options

When editing a page, you'll find a "Hero Section" meta box with the following options:

#### Text Elements

* **Hero Pre Text**: Small text that appears above the main title
* **Hero Highlight Text**: Parts of the title to highlight in a different color
* **Hero Text**: Main description text that appears below the title
* **Display Meta**: Toggle to show/hide author and date below the heading

#### Visual Elements

* **Hero Image**: Background image for the hero section
* **Hero SVG**: Alternative to hero image, allows custom SVG graphics
  > **Note:** The Hero Image and Hero SVG fields are mutually exclusive. If you use an SVG, the image field should be empty.

#### Call to Action

* **Button URL**: Link for the call-to-action button
* **Button Label**: Text for the call-to-action button

### How to Use

1. Edit any page
2. Scroll down to find the "Hero Section" meta box
3. Configure the desired elements:
   * Add pre-text and highlight text for emphasis
   * Write a compelling hero text
   * Choose between a background image or custom SVG
   * Add a call-to-action button if needed
4. Update or publish the page

---

URL: https://docs.affkraft.com/sikika/widget-areas
Markdown: https://docs.affkraft.com/sikika/widget-areas.md

# Widget Areas

There are multiple widget areas built-in into Sikika theme.

***

### Default Widget Areas

There are 2 widget areas available for you in Sikika by default:

* **Main Sidebar**: The primary sidebar that appears on the right side of your content
* **Footer Widgets**: Widget area in the footer section of your website

### Review Page Sidebar

If you're using [Kemoku Sportsbook Reviews Plugin](https://affkraft.com/kemoku), you'll get another sidebar for Kemoku review pages where you can define general widgets as well as use Kemoku review shortcodes.

### How to Use Widget Areas

1. Go to **Appearance** → **Widgets**
2. Drag and drop widgets into the desired widget area
3. Configure the widget settings
4. Save your changes

---

URL: https://docs.affkraft.com/sikika/customizations
Markdown: https://docs.affkraft.com/sikika/customizations.md

# Theme Customizations

Sikika theme can be customized in two ways: through configuration file and CSS custom properties.

***

### Configuration File

You can customize various theme settings by copying and modifying the `config/sikika.php` file. Simply copy the config fie into your child theme's root directory and modify any value you want. Below are the available options:

#### Font Settings

```php
<?php

'font' => [
    'family' => 'Instrument Sans', // Change the default font family
],

// you need to update it in CSS as well, see below.
```

#### Header Settings

```php
<?php

'header' => [
    'button_1' => [
        'url'   => '#', // Change the first header button URL
        'label' => 'Get in Touch', // Change the first header button text
    ],
    'button_2' => [
        'url'   => '#', // Change the second header button URL
        'label' => 'Get Started', // Change the second header button text
    ],
],
```

#### Footer Settings

```php
<?php

'footer' => [
    'copyright' => [
        'text' => '&copy; %d Your Custom Copyright Text', // Change the copyright text
    ],
    'back_to_top' => [
        'label' => 'Back to top', // Change the back to top button text
    ],
],
```

#### Post Settings

```php
<?php

'post' => [
    'navigation' => [
        'prev_text' => 'Older Posts', // Change the previous posts link text
        'next_text' => 'Newer Posts', // Change the next posts link text
    ],
    'excerpt' => [
        'length' => 120, // Change the excerpt length
        'more'   => '...', // Change the excerpt more text
    ],
],
```

### CSS Custom Properties

You can customize the theme's appearance by overriding CSS custom properties in your child theme's stylesheet. Here are the available properties:

#### Site Colors

```css
--site-bg-color: var(--color-white);
--site-text-color: var(--color-gray-700);
```

#### Header Colors

```css
--header-bg-color: var(--color-sky-50);
--header-text-color: var(--color-gray-700);
```

#### Menu Colors

```css
--menu-item-color: var(--color-gray-600);
--menu-item-hover-color: var(--color-gray-900);
--menu-item-font-size: 15px;
--menu-item-font-weight: 400;
--submenu-bg-color: var(--color-white);
```

#### Hero Section Colors

```css
--hero-gradient-start-color: var(--color-sky-50);
--hero-gradient-end-color: var(--color-sky-100);
--hero-highlight-color: var(--color-blue-500);
--hero-text-color: var(--color-gray-700);
--hero-dim-color: var(--color-gray-500);
```

#### Footer Colors

```css
--footer-bg-color: inherit;
--footer-text-color: inherit;
```

#### Link Colors

```css
--link-color: var(--color-rose-500);
--link-hover-color: var(--color-rose-600);
```

#### Button Colors

```css
--button-bg-color: var(--color-blue-500);
--button-text-color: var(--color-white);
--button-hover-bg-color: var(--color-blue-600);
--button-hover-text-color: var(--color-white);
--button-border-color: #0c66ee;
--button-shadow: 0 4px 6px -1px rgb(12, 102, 238, 0.5), 0 2px 4px -2px rgb(12, 102, 238, 0.5);
```

To override these properties, create a child theme and add your custom CSS with the desired values.

---

URL: https://docs.affkraft.com/sikika/child-theme
Markdown: https://docs.affkraft.com/sikika/child-theme.md

# Sikika Child Theme

If you need for any reason to do any modifications to the theme files, the recommended approach would be using child themes. Learn how to [create WordPress child themes](https://affkraft.com/blog/how-to-create-wordpress-child-themes) and download the child theme for Sikika.