Zosia: Theme Documentation

Introduction

Thankyou for purchasing Zosia.

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 Zosia, 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 Zosia.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 Zosia.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 Zosia child theme and adding your modifications. This will ensure you will not lose your changes when you update Zosia 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 Zosia-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

Upgrade TFM: Theme Boost: v1.x → v2.x

Only upgrade TFM Theme Boost plugin if you have Zosia theme version 1.2 or greater

1. Install Zosia them version 1.2x or greater
2. Click Plugins. in the main menu
3. Look for TFM Theme Boost plugin and click the link that says Update Required
4. Follow the onscreen instructions to upgrade the plugin and activate
5. De-activate and uninstall the following plugins: TFM: Posts Widget, TFM: Related Posts, TFM: Hero, TFM: Social plugin
   These plugins are now included in the TFM: Theme Boost plugin

Supported plugins

Demo Import - top

Zosia 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

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

Zosia has seven 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

Menu Item Description - top

Menu Description adds additional text to menu items

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 your text in the Description field
6. Save your menu

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-pill-menu in the CSS Classes field
6. If you want a subscribe icon add tfm-pill-menu tfm-subscribe in the CSS Classes field

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

Menu item sash - top

1. Go to Appearance → Menus.
2. Click Screen Options tab at the top of the page.
3. Check CSS Classes checkbox.
4. Create/edit your menu item
5. Expand the menu item and enter tfm-menu-sash in the CSS Classes field
6. In the navigation label add <span> <span/> wrapper around the sash text (E.g. Menu Text<span>wow sash<span/>)
7. Save your menu

Widgets - top

Zosia 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 TFM Posts Widget & TFM Social Plugin to use these widgets.

TFM Posts Widget

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

TFM Social Widget

1. Go to Appearance → Customize → TFM: 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

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 → Zosia: 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 → Zosia: 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

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

Change theme colour scheme

Appearance → Customize → Zosia: Color Settings → Theme Color Scheme

Set widget highlight background color

You can set a separate background (highlight) colour for selected widgets. Highlight widgets inherit all other colour settings configured for each sidebar.

Appearance → Customize → Zosia: Color Settings → Misc. Colors → Highlight Widget Background

Select the widgets you want to highlight

1. Add your widget to your sidebar using your chosen method
2. Click Options icon (three dots) → Show More Settings → Advanced
3. Add tfm-highlight-widget to Additional CSS Class
4. Configure the widget and click Update/Publish

Select the widgets you want to highlight (legacy widgets)

This method is for legacy widgets in WordPress 5.8.x only.

If you have installed the Classic Widgets plugin use the classic method below.

1. Add your widget to your sidebar using your chosen method
2. View your website and locate the widget you want to highlight on the page
3. Right Click on the widget → Inspect
4. This will bring up the Inspector
5. Locate the ID of the widget which will be something like section id="block-53" or section id="xxx_xxx_xxx"
6. Select and copy the ID E.g. block-53
7. Go to Appearance → Customize → Zosia: Color Settings → Misc. Colors
8. Paste/enter the ID of the widget in Highlight Widget IDs (comma separate multiple widget ID's)
9. Click Publish

Select the widgets you want to highlight (classic method)

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

1. Install and activate Widget CSS Classes
2. Add your widget to your sidebar using the classic method
3. Add tfm-highlight-widget to the CSS Class field for your widget
4. Configure the widget and click Save

Category Featured Posts - top

Set featured post

1. Go to New/Edit Post page
2. In the Settings panel scroll down to Zosia: Post Options
3. Check Featured Post
4. Click Publish

Display Featured Posts

1. Go to Appearance → Customize → TFM: Theme Boost → Featured Posts
2. Check Display Featured Posts
3. Configure display settings & colours and click Publish

Related Posts - top

1. Go to Appearance → Customize → TFM: 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 → TFM 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 → TFM 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 → TFM: 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 the URL
3. Click Publish

TFM: Dedicated Advertising Areas

Upload your own banner and link

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

Add Google AdSense (or any other code) or external banner source

1. Go to Appearance → Customize → TFM: Advertising Spots
2. Select an Advertising Location
3. Add your banner code (E.g. Google Adsense) to the code field
4. 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 Zosia.
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 Optimize HTML Code
7. Check Save aggregated script/css as static files
8. Check Minify excluded CSS and JS files
9. Check Also optimize for logged in users

Check/Remove any other settings as required.

Images

1. Check Lazy-load images

Check/Remove any other settings a required.

Extra

1. Check Combine and load fonts asynchronously with webfont.js
2. Check Remove emojis
3. Check Remove query strings from static resources

Check/Remove any other settings a required and click Save

Optimize Images

You can reduce the quality of stored images to reduce file size and improve page speed. Zosia uses native WordPress image sizes for all displays. Using this feature will not generate additional images but will replace existing generated images with lower quality versions.

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', 'Zosia' ) . '</h2>';
}
add_action('tfm_after_header', 'my_custom_function', 10 );

Available hooks

How to change fonts - top

This guide uses the Easy Google Fonts plugin

1. Go to Plugins → Add New and search for Easy Google Fonts
2. Click Install Now and then click Activate

Change fonts for entire theme

We will be changing the body fonts and title fonts globally. To do that we need to create font controls.

1. Go to Settings → Easy Google Fonts

Create Body Font Control

1. Click Create new font control
2. Give it a name (E.g. Body Font)
3. Click Save Font Control

We now need to add the CSS selectors that we want to control. In this case thats the main body font.

Copy/paste these selectors into Font Control CSS Selectors and press the Enter Key

body,input,textarea,.tfm-menu-sash span

Click Save Font Control

Create Title Font Control

1. Click Create new font control
2. Give it a name (E.g. Title Font Elements)
3. Click Save Font Control

The title font is used in various theme elements not just titles so we need to enter the CSS selectors of every element that uses the title font

Copy/paste these selectors into Font Control CSS Selectors and press the Enter Key

.entry-meta a[class*="cat-link"],.tfm-link-more a,label,button,.button,input[type="button"],input[type="reset"],input[type="submit"],ul.primary-menu,.primary-nav-sidebar,ul.header-secondary,.wp-block-quote.is-large p,.wp-block-quote.is-style-large p,.widget_tag_cloud a,.single-post-tags a,.child-categories a,a.tag-cloud-link,.wp-block-latest-posts__list li a,.tfm_posts_widget .entry-title-link,.tfm-social-icons .tfm-social-icon,.entry-read-more .read-more

Click Save Font Control

Now lets apply our font choice to these controls

1. Click Appearance → Customize → Typography → Theme Typography
2. Select Body Font
3. Choose a font from the Font Family selection list
4. Click Publish

The new Body Font is applied throughout the theme. Now do the same for Title Font Elements. The new title font is applied throught the theme.

Create Selective Font Control

You can also create a selective font control to change the font for specific elements. Let's change the font for buttons.

1. Go to Settings → Easy Google Fonts
2. Click Create new font control
3. Give it a name (E.g. Buttons)
4. Click Save Font Control

We just need the button CSS selectors. Copy/paste these selectors into Font Control CSS Selectors and press the Enter Key

button,.button,input[type="button"],input[type="reset"],input[type="submit"]

1. Click Appearance → Customize → Typography → Theme Typography
2. Select Buttons
3. Choose a font from the Font Family selection list
4. Click Publish

Add Rating to Posts - top

You will need to install TFM: Theme Boost plugin to use this feature

Add & display ratings to single posts

1. Go to New/Edit Post page
2. In the Settings panel scroll down to Zosia: Ratings
3. Select a range
4. Enter a total score
5. Select a ratings type (you can display as many rating types as you want)
6. Click Publish

Display ratings in blog list/archive pages

1. Go to Appearance → Customize → Zosia: Theme Settings → Archive/Category Settings
2. Scroll down to Ratings and check each rating type you want to display
3. Click Publish

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 ^