Koga: Theme Documentation

Introduction

Thankyou for purchasing Koga.

This document will help you get your theme installed and setup with further guides to help you get the most out of your theme. If you do have questions please leave a comment or send me a message through my profile page.

If you like Koga, please take a moment to rate or leave a comment or review, it really helps. Thanks so much!

Installation - top

Download your theme

Download the zipped package from your ThemeForest Downloads to your computer. Extract the downloaded file and you will see Koga.zip, this is your theme archive.

Install theme

1. Login to your WordPress Admin and go to: Appearance → Themes.
2. At the top of the screen click Add New and then click Upload Theme.
3. Select Koga.zip archive file and click Install Now.
4. Once installation is complete click Activate.

Install Child Theme ^*Optional

If you wish to add your own custom modifications I recommend installing the Koga child theme and adding your modifications. This will ensure you will not lose your changes when you update Koga theme.

You will need to install the parent theme first (above)

1. Login to your WordPress Admin and go to: Appearance → Themes.
2. At the top of the screen click Add New and then click Upload Theme.
3. Select Koga-child.zip archive file and click Install Now.
4. Once installation is complete click Activate.

Plugins - top

To install plugins

1. Appearance → Plugins.
2. Check each plugin you want to install and select Install from the drop down menu.
3. Click Apply.
4. Once installed go to Plugins → Installed Plugins and activate each plugin.

Recommended plugins

Demo Import - top

Koga includes many pre-built demos and optional demo content to help get you started. To install a demo

1. Install & Activate One Click Demo Import
2. Go to Appearance → Import Demo Data.
3. Select a demo and click Import Demo
4. Confirm by clicking Continue & Import

Note* If you have existing content you should click Switch to Manual Import to import just the settings. The required Widgets ^WIE file and Customizer ^DAT file are included in your full theme download

Install different demos

If you want to try different demos, you will need to reset your Customizer settings before installing a new demo.

1. Install Customizer Reset
2. Go to Appearance → Customize → Reset.
3. You can now install a different demo *You may still need to manually remove some of the widgets

How to update your theme - top

Envato Market Plugin

You will need to download Envato Market Plugin to use this method

Install Envato Market Plugin

1. Appearance → Plugins → Add New
2. Click Upload
3. Locate and select the Envato Market plugin and click Install
4. Once installed click Activate Plugin

Configure your Envato API

1. Click the link in the Activate Envato API Connection
2. Sign in to your Envato Account if you are not already
3. Enter a Token Name
4. Check the following options:
   • View and search Envato sites
   • Download the user's purchased items
   • List purchases the user has made
   • Terms and Conditions agreement
5. Click Create Token button
6. Copy the token
7. Paste the token into into your Envato Market Dashboard token field and Click Save

Whenever a theme update is available you will see an Update Available notice.

Manual update

Manually update your theme

Menus - top

Koga has several menu locations. The method for creating each menu is the same, simply select a different display location for each menu.

To create a new menu

1. Go to Appearance → Menus.
2. Click Create a new menu.
3. Enter a name for your menu (E.g. Primary Menu) and click Create Menu.
4. In the Add Menu Items panel add categories, posts, pages & custom menu items. Click Add to Menu and arrange as required
5. Select a display location (E.g. Primary Menu)
6. Click Save Menu

Menu locations

Multi column & Mega Menu - top

When you create a parent → child menu item (or sub menu) you can set the sub menu to a display in columns or a full width megamenu style drop down

1. Go to Appearance → Menus.
2. Click Screen Options tab at the top of the page.
3. Check CSS Classes checkbox.

Create the parent menu item

1. Expand the parent menu item and add one of tfm-cols-2 or tfm-cols-3 or tfm-cols-4 or tfm-cols-5 or tfm-megamenu in the CSS Classes field
2. Additionally to add category color styling to sub-menu category items add tfm-categories to the parent menu item CSS Classes field
3. Click Save Menu

Social Menu - top

The social menu is a drop down menu that displays social media icons and text within menu items.

You can add the social menu to any multi-level menu (E.g. Primary Menu) or assign to a display location such as the Third Menu.

1. Go to Appearance → Menus.
2. Click Screen Options tab at the top of the page.
3. Check CSS Classes checkbox.

Create the parent menu item

If you are adding menu items to an existing parent menu (E.g. Primary Menu) you can skip this step. You will still need to add tfm-social-menu to the parent menu item.

1. Click Custom Links in the Add menu items panel
2. Add a Hashtag to the URL field and text to the Link Text field
3. Click Add to Menu
4. Expand the menu item and enter tfm-social-menu in the CSS Classes field
5. Remove the hashtag from the URL field

Add the sub menu items

1. Click Custom Links in the Add menu items panel
2. Add the full URL for your social media page in the URL field and text in the Link Text field
3. Click Add to Menu
4. Arrange this item as a sub-menu item
5. Expand the menu item and enter the relevant CSS class in the CSS Classes field. E.g. tfm-twitter to show the Twitter social icon
6. Repeat for every social media site you want to add (supported icon list below)

Set Location & Save the menu

1. Choose a display location in the Menu Settings panel
2. Click Save Menu

Supported icons & CSS classes

X	tfm-x	Facebook	tfm-facebook
Pinterest	tfm-pinterest	YouTube	tfm-youtube
Instagram	tfm-instagram	Flickr	tfm-flickr
Vimeo	tfm-vimeo	Vkontakte	tfm-vk
Tumblr	tfm-tumblr	Dribbble	tfm-dribbble
RSS	tfm-rss	Linked In	tfm-linkedin
500px	tfm-500px	Soundcloud	tfm-soundcloud
Spotify	tfm-spotify	Mixcloud	tfm-mixcloud
Medium	tfm-medium	Github	tfm-github
Behance	tfm-behance	Reddit	tfm-reddit
Gab	tfm-gab	Minds	tfm-minds
BitChute	tfm-bitchute	Steemit	tfm-steemit
TikTok	tfm-tiktok	Odnoklassniki	tfm-ok

Call to action/Subscribe Button - top

1. Go to Appearance → Menus.
2. Click Screen Options tab at the top of the page.
3. Check CSS Classes checkbox.
4. Create your call to action/subscribe menu item.
5. Expand the menu item and enter tfm-cta in the CSS Classes field
6. To add a subscribe icon add tfm-cta tfm-subscribe in the CSS Classes field
7. To add a patreon icon add tfm-cta tfm-patreon or tfm-patreon-alt in the CSS Classes field

A call to action button can be Koga to any item in any menu or a single menu item assigned to a separate display location (E.g. Header Secondary).

Add/Remove Menu Item Description - top

Menu Description adds additional text to menu items. If you have category descriptions the descriptions will appear in category menu items unless you remove them

1. Go to Appearance → Menus.
2. Click Screen Options tab at the top of the page.
3. Check Description checkbox.
4. Create/edit your menu item
5. Expand the menu item and add/remove your text in the Description field
6. Save your menu

Widgets - top

Koga supports classic widgets & block widgets. Since WordPress 5.8.0 there are three methods of adding widgets.

Add a widget

1. Go to Appearance → Widgets
2. Select a sidebar
3. Click the Plus button at the top of the page or inside the sidebar
4. Search or Browse and select a widget
5. Configure the widget and click Update

Add a widget with preview (customizer method)

1. Go to Appearance → Customize → Widgets
2. Select a sidebar (dependng on the page your are on not all sidebars will be visible)
3. Click the Plus button at the top or bottom of the customizer panel
4. Search or Browse and select a widget
5. Configure the widget and click Publish

Add a widget (classic method)

Since WordPress 5.8.0 you will need to install the Classic Widgets plugin to use this method

1. Go to Appearance → Widgets
2. Drag the widget to the appropriate sidebar
3. Configure the widget and click Save

Configure widget colours in Colour Settings.

Custom Widgets

You need to install Koga Theme Plugin to use these widgets.

Koga Posts Widget

1. Add Koga Posts Widget to your sidebar by your chosen method
2. Configure the widget and click Save/Publish

Koga Social Widget

1. Go to Appearance → Customize → Koga: Social Media Settings
2. Enter the full URL's of your social media channels
3. Click Publish
4. Add the Koga Social Media widget to your sidebar by your chosen method
5. Configure the widget and click Save/Publish

Add Widgets Between Posts - top

The category page and homepage have a sidebar between blog list posts. These work like any other sidebar and support all widgets.

Homepage Widgets

1. Add your widget to Home: Between Blog Posts sidebar by your chosen method
2. Go to Appearance → Customize → Koga: Theme Settings → Homepage Settings
3. Scroll down to Add widgets between posts
4. Enter the position you would like to display your sidebar (E.g. 3 to set your sidebar as the third item in the blog list)
5. Click Publish

Category Widgets

1. Add your widget to Category: Between Blog Posts sidebar by your chosen method
2. Go to Appearance → Customize → Koga: Theme Settings → Archive/Category Settings
3. Scroll down to Add widgets between posts in Category Pages
4. Enter the position you would like to display your sidebar (E.g. 3 to set your sidebar as the third item in the blog list)
5. Click Publish

Style blocks as widgets - top

WordPress has replaced most widgets with a blocks. In order to style block and headings as widgets we need to use the group block.

1. Go to Appearance → Widgets
2. Select a sidebar
3. Click the Plus button at the top of the page or inside the sidebar
4. Search or Browse and select the Group block
5. Select Group layout option (left icon)
6. Click Add block inside the group block and select the Heading block
7. Choose Heading 3
8. Add your widget title, select the text and add Bold styling
9. In the block settings panel click Advanced and add widget-title to the Additional CSS Field
10. Click Add block inside the group block and select the block you want
11. Configure the block and click Update

MailChimp Form Markup - top

You can add any form markup you need in the MailChimp form. This is the markup used in the demos. Copy and Paste to: MC4WP → Form

<div class="tfm-form-fields-wrap"> <input type="email" name="EMAIL" placeholder="Your email address" required=""> <button>subscribe</button> </div>

Theme Settings - top

All theme settings are managed with Live preview within the WordPress customizer separated into easy to manage sections and tabs.

Colour Settings - top

Card Colours

1. Go to Appearance → Customize → Koga: Color Settings → Category Tags
2. Set your category tag colours
3. Scroll to the bottom and check Apply slug color settings to card style posts
4. Click Publish

Category tag colours will be applied to all posts and you will have the option of applying them to Koga: Post Blocks & Koga: Related Posts

You can also set individual colours for each post in Koga Single Post Options which you will find in the post edit panel

Homepage Post Blocks - top

You will need to install Koga: Theme Plugin plugin to use this feature.

Using Post Blocks you can configure "blocks" of posts that are displayed on the homepage. Post blocks can replace the standard blog page or you can set a separate page for blog posts and use Post Blocks for the homepage (front page).

Appearance → Customize → Koga: Homepage Post Blocks

1. Go to Appearance → Customize → Koga: Homepage Post Blocks
2. Select a Block (E.g. Block 1)
3. Check: Enable Block
4. Configure the block settings & colours
5. To add a sidebar to your block, check: Display Sidebar and select a position.
6. Click Publish
7. Repeat for each block you want to add

Display Widgets in Post Blocks

1. Add your widgets to Koga: Hompage Post Block X sidebar by your chosen method
2. Click Publish
3. Repeat for each block/sidebar you want to add widgets

Create a separate blog list page

1. Go to Pages → Add New
2. Create a page for Post blocks (this will be your Homepage)
3. Create a page for Blog posts (this will be your Posts Page)
4. Go to Settings → Reading
5. Set Your homepage displays to A static page
6. Select the Post blocks page you created from the Homepage selection.
7. Select the Blog posts page you created from the Posts page selection.
8. Click Save Changes

You may want to add a link to your blog posts page in your menus

Related Posts - top

1. Go to Appearance → Customize → Koga: Related Posts
2. Check Display Related Posts
3. Configure related post settings & colours and click Publish

Social Media Settings - top

Display share icons in posts & pages

1. Go to Appearance → Customize → Koga Social Media Settings
2. Check each share icon you want to display in Post & Page Share Icons
3. Choose an Icon Style and Colour Scheme
4. Check: Share Posts/Pages
5. Choose a display location
6. Click Publish

Display author bio social icons

1. Go to Users → Profile
2. Enter the full URL's of your social media channels and click Save
3. Go to Appearance → Customize → Koga Social Media Settings
4. Scroll down to Author Bio Social Icons and check Show Icons in Single Author Bio
5. Choose an Icon Style and Colour Scheme
6. Click Publish

Display social icons in the header & footer

1. Go to Appearance → Customize → TFM Social Media Settings
2. Enter the full URL's of your social media channels
3. Choose an Icon Style and Colour Scheme
4. Check: Show Social Icons in Site Header/Footer
5. Click Publish

Social Media Widget

1. Go to Appearance → Customize → Koga: Social Media Settings
2. Enter the full URL's of your social media channels
3. Click Publish
4. Add the TFM Social Media widget to your sidebar by your chosen method
5. Configure the widget and click Save/Publish

Advertising Areas - top

You can add your own banners, Google AdSense code or any other banner code to any sidebar using the HTML widget or image widget.

Add Google AdSense (or any other banner code)

1. Add the HTML widget to your sidebar by your chosen method
2. Enter your Advert Code (for example Google AdSense)
3. Click Publish

Add a banner image and link

1. Add the Image widget to your sidebar by your chosen method
2. Enter your Advert Code (for example Google AdSense)
3. Click Publish

Koga: Dedicated Advertising Areas

Upload your own banner and link

1. Go to Appearance → Customize → Koga: Advertising
2. Select an Advertising Location
3. Add you advert code or Upload a standard resolution and/or high resolution banner
4. Enter the desination URL
5. Click Publish

Theme Translation - top

Install Loco Translate Plugin

1. Go To Plugins → Add New. and search for Loco Translate
2. Download & Activate the plugin
3. Loco Translate is now added to the admin panel

Create a New Theme Translation

1. Go to Loco Translate → Themes.
2. Click Koga.
3. Click New Language.
4. Choose a language from the drop down menu and click Start Translating.
5. In the source text field select the text you want to translate.
6. In the translation field type your translation for the selected text.
7. Click Save.

Change your site language to see the new translation

Create a New Plugin Translation

1. Go to Loco Translate → Plugins.
2. Click the plugin you want to translate.
3. Continue from step 3 above.

Optimization (Page Speed/SEO) - top

The best thing you can do for your website speed is to host your website on a good VPS/Dedicated server or a good hosting package. You can also improve your site speed with one of the many cache or optimization plugins.

Recommended plugins

Install Autoptimize Plugin

1. Go To Plugins → Add New. and search for Autoptimize
2. Download & Activate the plugin
3. Autoptimize is now added to the settings panel

Configure Autoptimize settings

Settings → Autoptimize Or click the Autoptimize icon at the top of the page

JS, CSS & HTML

1. Check Optimize JavaScript Code
2. Check Aggregate JS-files
3. Check Optimize CSS Code
4. Check Aggregate CSS-files
5. Check Also Aggregate inline CSS
6. Check Inline all CSS
7. Check Optimize HTML Code
8. Check Save aggregated script/css as static files
9. Check Minify excluded CSS and JS files
10. Check Also optimize for logged in users

Check/Remove any other settings as required.

Extra

Google Fonts

1. Check Leave as is

Check/Remove any other settings as required and click Save

Install OMGF Plugin

1. Go To Plugins → Add New. and search for OMGF
2. Download & Activate the plugin
3. Optimize Google Fonts is now added to the settings panel

Configure OMGF

Settings → Optimize Google Fonts

1. Check Auto-Configure Subsets
2. Click Save & Optimize

Install WP Super Cache

1. Go To Plugins → Add New. and search for WP Super Cache
2. Download & Activate the plugin
3. WP Super Cache is now added to the settings panel

Configure WP Super Cache

Settings → WP Super Cache

1. Check Caching On
2. Click Update Status

The Advanced tab allows you to configure cache timeout and other settings as required.

Optimize Images

I recommend using next gen image formats such as WebP. You can also reduce the quality of stored images to reduce file size and improve page speed. Koga uses native WordPress image sizes for all displays with optional custom sizes when available.

Install Regenerate Thumbnails Plugin

1. Go To Plugins → Add New and search for Regenerate Thumbnails
2. Download & Activate the plugin
3. Regenerate Thumbnails is now added to the Tools menu

Regenerate images

1. Go To Appearance → Customize → TFM Theme Boost.
2. Change Image Quality to 65* and click Publish
3. Go to Tools → Regenerate Thumbnails
4. Un-check Skip regenerating existing correctly sized thumbnails (faster).
5. Click Regenerate Thumbnails for All x Attachments

* You can try different image quality settings until you are happy with the result.

Post Formats - top

You can set post formats in the New/Edit Post settings panel → Post Format

Theme Hooks - top

Hooks allow you to further extend theme functionality by adding your own functions, sidebars, banners or plugin output. This is advanced functionality for theme developers.

Example use of a Hook

This function will output "lorem ipsum dior" after the theme header.

function my_custom_function( ) {
  echo '<h2>' . esc_html__( 'lorem ipsum dior', 'Koga' ) . '</h2>';
}
add_action('tfm_after_header', 'my_custom_function', 10 );

Available hooks

How to change fonts - top

I recommend Fonts Plugin or Easy Google Fonts

Sources and Credits - top

I've used the following images, icons or other files as listed.

• PHP, HTML and CSS code by 3FortyMedia
• Fontello Icon Fonts
• Images Freepik & Unsplash & WallpaperAccess

Changelog - top

Back to top ^