TinySalt WordPress Theme Documentation v3.0

1. WordPress Basics

To install TinySalt theme, first you need a self-hosted WordPress site. Click the link below to go to WordPress download page, there you will find useful information about installing WordPress.

WordPress Download Page

If you are new to WordPress, we recommend reading some articles about basic knowledge of WordPress before you get started. WordPress is a powerful system with a lot of features, knowing some basics about it will help you to manage your site easily.

2. TinySalt Installation

2.1 Theme Requirements

Theme Requirements

To use TinySalt theme, please make sure your server meets the following requirements:

  • WordPress 5.0 or higher
  • PHP 5.6 or higher
  • mysql 5.2 or higher

Minimum PHP requirements

If you encounter any issue listed below, it is related to low PHP configuration limits:

  • Can't upload the theme to your site
  • Can't import a demo
  • "Are You Sure You Want to Do This" Error
  • White screen
  • Can't install plugins on the dashboard
  • Internal Server Error
  • Connection Timed Out
  • Maximum execution time exceeded
  • Allowed Memory Size Exhausted error
  • and other similar issues

The solution is to increase those PHP configuration limits. Please log into your hosting cPanel and change them. Or you can try to contact your hosting provider and ask them to increase those limits to a minimum as follows:

max_execution_time 30
max_input_time 60
memory_limit 256M
post_max_size 64M
upload_max_filesize 64M

Your Website Configuration

About PHP:

  • PHP Version - The minimum PHP version required for TinySalt is 5.6, but we recommend always using the latest stable version of PHP whenever possible. And WordPress recommends using PHP 7+ (please refer to this article: https://wordpress.org/about/requirements/ ).
  • For your security - PHP versions lower than 7.0 have reached the official end of their life cycle and may expose your site to security vulnerabilities. We strongly recommend that you no longer use the old PHP version, please always update to the latest version (Supported Versions of PHP).

In most cases you cannot update the PHP version yourself and need to contact your host about this. The upgrade process is an easy process and should be something your host can do for you without impacting your website or charging you a fee.

How to update your PHP version – by WooCommerce

About WordPress:

  • WordPress Version - Although the minimum WordPress version requirement for running TinySalt theme is 5.0, we recommend always using the latest version of WordPress. There are many reasons why you should keep your WordPress updated (security, new features, bug fixes, speed, compatibility). You may like to read this article.

2.2 Theme Installation

We assume that you already have a running WordPress site. Now let's install TinySalt theme.

You need to download the theme zip file from ThemeForest first. Go to Downloads on ThemeForest, and find TinySalt. Download the files and find tinysalt.zip - that's what you need for installation.

  • If you download the whole package, please unzip it, in the "WordPress Theme" folder, find tinysalt.zip.
  • Or, you can download the Installable WordPress File Only - which is tinysalt.zip.

Please do not upload the zip file of the entire package (which contains "All files and documentation") for installation. Or you will see "The package could not be installed. The theme is missing the style.css stylesheet" error message. If you see this error message, please unzip the file you tried to upload and then find "tinysalt.zip" file in it.

Here is an article you may like to read: Theme is missing the style.css stylesheet error.

Installing the theme via WordPress admin panel

  1. On your website admin panel, go to Appearance > Themes > Add New > Upload Theme.
  2. Choose tinysalt.zip you just downloaded.
  3. Install and activate it.
  4. You will see the notice “This theme requires/recommends the following plugins…”, please click on those links and follow instructions to install those plugins.
  5. Done.

Installing the theme via FTP

If you can't install the theme via WordPress admin panel, you can try to install it via FTP.

  1. Find the file - tinysalt.zip, unzip it.
  2. Upload the unzipped folder to your FTP > WordPress site root > wp-content > themes.
  3. Go back to your site admin panel > Appearance > Themes, activate TinySalt theme.
  4. You will see the notice “This theme requires/recommends the following plugins…”, please click on those links and follow instructions to install those plugins.
  5. Done.

Please note: If you are going to write custom code for the theme, then please check this section.


2.3 Install Required Plugin

As mentioned above, when installing & activating TinySalt theme, you will see the notice "This theme requires the following plugin: TinySalt Extension". It is the TinySalt Theme function extensions - including these features: post like, post sharing, gallery slider, Instagram feed and more.

Why do you need to install the required plugin?

Because of WordPress code standards and ThemeForest requirements: "Themes execute the presentation and styling of content, while plugins handle content creation and functionality." Therefore, some features must be included in the required plugin but not included in the theme itself.

Please follow the steps below:

  1. After Installing TinySalt theme, activate it, then you will see a note box, it says: "This theme requires the following plugin: TinySalt Extension." Click on Begin installing plugin link.
    Install the required plugin
    Install the required plugin.
  2. After clicking on "Begin installing plugin" link, it will go to "Install Required Plugins" page (or you can get to that page via Appreance > Install Plugins), then click on Install link below "TinySalt Extension".
    Install the required plugin
    Install the required plugin.
  3. Then activate "TinySalt Extension".
    Return to Required Plugins Installer
    Return to Required Plugins Installer.
    Activate the required plugin
    Activate the required plugin.

If you need to find "TinySalt Extension" zip file, please:

  • You can download the whole package, unzip it to get a folder and open it, then go to "Plugin" to find "tinysalt-extension.zip".

As mentioned above, when installing & activating TinySalt theme, you will see the notice "This theme recommends the following plugins…". Those plugins are not required to use the theme, but will extend the theme basic functionality. All those plugins are hosted on the official WordPress repository and are made by other authors. You don't need to install and activate all of them, just choose those you will use on your site.

  1. After Installing TinySalt theme, activate it, then you will see a note box, it says: "This theme recommends the following plugin: …" Click on "Begin installing plugin" to install it.
  2. After clicking on "Begin installing plugin" link, it will go to "Install Required Plugins" page, tick the boxes of the plugins you will need on your site, then choose "Install" from "Bulk Actions" drop down list and click on "Apply" button. (You can install the required plugin and recommended plugins at one time.)
  3. Then don't forget to activate those plugins.

The recommended plugins are:


2.5 Image Size

To make sure images on your site always look sharp and clear on all devices, the recommended width of images is at least 1920 px when it is supposed to be a full-width image.

Images will be scaled and saved into different sizes after you upload them. If your website already has some images before switching to TinySalt theme, you will need to regenerate these images into the new sizes. Please use this plugin: Regenerate Thumbnails. Otherwise, the theme will use the original images when the proper image sizes cannot be found, which may slow down your website performance.

You can set image sizes via dashboard > Settings > Media.

Recommended media sizes for TinySalt theme:

  • Thumbnail size - Max Width: 150, Max Height: 150
  • Medium size - Max Width: 300, Max Height: 300
  • Large size - Max Width: 1024, Max Height: 1024
  • Full size - 1920 x 1280 (3:2)

After you change the media size settings, when you upload new images they will be scaled and saved into the new sizes. But for the existing images, you can use this plugin to regenerate the new sizes: Regenerate Thumbnails.

Optimizing Images

Image quality and quantity are important for a website speed & performance, and also important for user experience. You need to find a balance between them.

Before uploading your images to your website, please optimize your images first (using Photoshop or other image editing tools). Please check this article: How to Optimize Images for Better Web Design & SEO.

  • Optimal file size: The number of bytes the file takes up on your computer. This is the factor that can slow your website way down. A 15MB (megabyte) image is huge. Large images or full-screen background images should be no more than 1 MB. Most other small web graphics can be 300 KB or less.
  • Image size: The actual dimensions of your image, in pixels. As we mentioned in the Image Size subchapter, the recommended width of images is at least 1920 px when it is supposed to be a full-width image (for example, a fullwidth post slider on the homepage). If the image is not used as a full-width image, you can resize your image to a smaller size.

After uploading your images to your website, you can install this plugin to further optimize them: Smush.


2.6 Theme Basic Settings

After installing and activating the theme, please go to Appearance > TinySalt Theme Basic Settings, there you will find some basic settings for the theme.

The Required Plugin

In this panel, you will find some basic information about the required plugin "TinySalt Extension". And there are 2 options:

  • Auto update the plugin when updating the theme
  • Auto activate the plugin when activating the theme

When there is a newer version of the theme, after updating the theme itself, you usually need to update the required plugins to ensure maximum compatibility with the theme. However, in rare cases, some users may forget to update the plugin after updating the theme, and then some problems will occur.

In addition, some users may switch themes, they may forget to activate the required plugin after switching back to TinySalt theme, and then they will find that some features no longer work.

In order to avoid the above situations, we recommend checking both options.

Docs & Support

Doc links.
Doc links & Support Guide.

In this panel, we provide the link to the online documentation so that users can easily access the documentation, without having to save the URL to the browser.

3. Updating

When updating the theme, please follow the following 2 steps:

  • Step 1 - Update the theme first;
  • Step 2 - Then, please also update the Required Plugin: "TinySalt Extension". (See details here)

3.1 Update Theme

Auto Update with Envato Market Plugin

We recommend Envato Market plugin. It can install WordPress themes and plugins purchased from ThemeForest & CodeCanyon by connecting with the Envato Market API using a secure OAuth personal token. Once your themes & plugins are installed WordPress will periodically check for updates, so keeping your items up to date is as simple as a few clicks.

You can download the plugin from its official download page: https://envato.com/market-plugin/. And then upload it to your site and install it.

Then go to Envato Market > Settings, click on the link to generate a personal token, and then insert it below, then save changes.

Click on the link to generate a personal token
Click on the link to generate an Envato API Personal Token

When generating your personal token, please use the same Envato account you used when purchased the theme, and make sure you have checked the following 3 permission options:

  1. View and search Envato sites
  2. Download your purchased items
  3. List purchases you've made
Generating Envato API Personal Token.
Generating Envato API Personal Token.

Once the Envato API connection is made from the Settings page, a list of available Themes will be shown. This will list all WordPress Themes that have been purchased through the Envato Market / ThemeForest. The page may look like this:

Items purchased from Envato will display on the page.
Items purchased from Envato will display on the page.

If there is a newer version for a theme or a plugin, it will show a notice, and you can update the item by clicking on the link Update Available.

Since the plugin checks for updates periodically, if you don't see the update notification, please wait for a while.

You can find more instructions about this plugin on this page: https://envato.com/market-plugin/


3.2 Update Required Plugin

When updating TinySalt theme, if you also see this note:

"The following plugin needs to be updated to its latest version to ensure maximum compatibility with this theme: TinySalt Extension."

Note: TinySalt Extension needs to be updated.
Note: TinySalt Extension needs to be updated.
  1. Please click on Begin updating plugin link to update the TinySalt Extension plugin. Alternatively, you can go to Appearance > Install Plugins.
  2. You can see the status of "TinySalt Extension" is "Active, Requires Update". And it also shows the Installed Version of "TinySalt Extension" on your site, and you can find there are messages about Minimum required version and Available version. Please click on the Update link below "TinySalt Extension".
    Click to update the requried plugin
    Click to update the requried plugin.
  3. After the plugin updated, please click on the "Return to Required Plugins Installer" link.
  4. You may see the plugin's status "Installed But Not Activated". If so, please click on the Activate link to reactivate the required plugin.
    Please make sure it is reactivated
    Please make sure it is reactivated.

You can choose to enable auto-update and auto-activation of the required plugin. Please go to "Appearance" > "TinySalt Theme Basic Settings", and there are 2 options:

  • Auto update the plugin when updating the theme
  • Auto activate the plugin when activating the theme

Please check Theme Basic Settings for more details.


3.3 After Updating theme or any plugins

If you have installed any cache plugin to optimize performance, such as the "W3 Total Cache" plugin, then, after updating the theme and the required plugin (or any other third-party plugins), you need to minify CSS again, and then clear the website cache. If you are using "W3 Total Cache", please follow these steps:

  1. On your website dashboard, please navigate to the top admin bar > "Performance" > "Purge Modules" > click "Minify".
  2. Then please click "Purge All Caches".

  3. Click "Purge Modules > Page Cache: All".
  4. Click "Purge Modules > Opcode Cache".
  5. Then, please also clear the browser cache.
Minify CSS again, and then clear the website cache
Minify CSS again, and then clear the website cache

If you are using another cache plugin, you can also find similar features in the cache plugin.

If you do not perform these operations after the update, your site will still use the old minified JavaScript code and the previous cache files, resulting in a mismatch between the old code and the new code, resulting in errors and causing the site to not work properly.

4. Demo Importing

Importing a demo to your site is optional for using TinySalt theme. It is for easy start - when you have a fresh WordPress installation, you can import some dummy content and predesigned layouts & styles to your site, then you can replace with your own content, and tweak some layouts and colors.

To import the demo content, please make sure you have installed the recommended plugin One Click Demo Import, and please also install and activate all other recommended plugins (you can deactivate the unnecessary plugins later).

After installing TinySalt theme and required/recommended plugins, refresh the page, you will see Import Demo Data under Appearance in the left sidebar. Click it, then you will see the available demos. Choose one demo, click on the Import button.

TinySalt theme now provides 12 different demos, each demo with two versions: Elementor version and non-Elementor version (Home Widgets).

  • When importing the Elementor version of a demo, you will use Elementor to edit your homepage, site header, site footer, etc.
  • When importing the non-Elementor version of a demo, you will use the WordPress Customizer to edit your homepage, site header, site footer, etc.
  • However, when editing the Recipe Index Page and other archive pages (Category Archive, Tag Archive, Blog, etc.), you will need to use the WordPress Customizer, no matter which version of demo you choose to import.
  • When using Elementor Pro, you can edit the following default WordPress Archive page with Elementor Pro: Category/Tag/Blog Archive, Search Results, Products Archive (WooCommerce Shop Page). However, the Recipe Index page is a special archive page that cannot be edited with Elementor, neither Elementor Free nor Pro.
Choose a demo to import.
Choose a demo to import.

It can take a couple of minutes, please wait.

About the images used on the demo sites:

  • The images used on our demo site are for demonstration purposes only and are NOT included in the demo data.
  • Because there are a lot of high-quality images on the demo site and the file size is quite large, on some sites with lower configuration, it may cause the import demo to fail.
  • To ensure that demo data can be imported quickly and successfully, we use image placeholders with small file sizes in the demo data. After importing the demo, you can upload your own images.
  • If you need some images used on our demo site, please contact us and provide us with relevant screenshots, we can provide download links for those images.

Please note: Don't import multiple demos to the same site, it will create duplicate data.

When importing finished, please follow the steps below:

  1. Setup WP Recipe Maker.
  2. Setup MailChimp for WP plugin if you need a newsletter subscribe form
  3. Please install the Yoast SEO plugin to optimize your website SEO.
  4. Setup WooCommerce if you need an online shop
  1. On the demo import page, you will see there is a note:
    Demo Import - Setup MailChimp for WordPress
    Demo Import - Setup MailChimp for WordPress
    If you want to build the subscription form with the plugin MailChimp for WordPress, click on the link to get to the settings page of the plugin, then enter your MailChimp API key, and create a form. Please read more in this section.
  2. If you also need an online shop on your site, please install and activate WooCommerce plugin. You can add your products from scratch or import some dummy data. Please find more information in this section.

If you encounter issues while importing a demo

It happens rarely, but if you have issues while importing a demo, please check the documentation Import Issues written by the author of the plugin One Click Demo Import (which we are using for demo importing feature in the theme).

Error: Internal Server Error (500)

If you see this error message after clicking on import button, this usually indicates a poor server configuration, usually on a cheap shared hosting (low values for PHP settings, missing PHP modules, and so on). Please see this article to know how to fix it.

Alternatively, you can provide us with the following information so that our developer can check that for you:

  1. Your website URL.
  2. Your website login information. You can use this plugin to create a Temporary Login Without Password.
  3. Which demo you'd like to import, so that we can help you import the demo.
  4. Your (or a temporary) FTP account, so that we can check the error log on your website.
  5. Please submit a support ticket at Loft.Ocean Help Center and send these information to our support team.
  6. Please note that you need your purchase code when creating an account at our Help Center (Where to find your purchase code).

5. Edit Homepage (Non-Elementor Version)

If you'd like to use the classic way to edit your homepage (non-Elementor), please see the following content in this chapter.

If you'd like to use Elementor to edit your homepage, please see the content in the next chapter: Elementor Related.


5.1 Four Types of Homepage

By default, WordPress shows your most recent posts in reverse chronological order on the front page of your site.

When working with TinySalt theme, your site homepage can be set up as a page with more than one type of content: not just the most recent posts, but also posts slider, posts from selected categories, call to action, newsletter signup form, and more. We call it "Multi-content Homepage".

So when using TinySalt theme, your site structure can be any one of the following 4 types:

Please follow the steps below to set up your homepage.


Simple Blog

On your site admin panel, go to Settings > Reading panel, find the option Front page displays, choose Your latest posts.

Front page - displays latest posts
Front page - displays latest posts

Then go to Appearance > Customize > Home Page panel. There are 2 content blocks added by default:

  • Fullwidth Featured Area
    • You can display a slider of selected posts here, or 3 selected posts in block layout. Or you can add some custom content here.
  • Latest Posts List
    • You can change layout of your latest posts archive.

By the way, you can also add more content blocks to your homepage to make it more than a simple blog page. You might like to check Home Widgets to know more details.


Multi-content Homepage + Blog

Your site will have a multi-content front page, plus a blog to manage posts.

  1. On your site admin panel, go to Pages > Add New. Create 2 pages, for example, "Front Page" & "Blog". You don't need to add any content to those pages.
  2. Then go to Settings > Reading panel, find the option Front page displays, choose A static page. In the drop down menu for Front Page select "Front Page". In the drop down menu for Posts page select "Blog".
    Static Front page
    Front page - Static Front Page
  3. IMPORTANT! Also in the Settings > Reading panel, scroll down to find the option "Static Homepage Content", choose "From Customizer > Homepage Section" in the drop down list.
    Static Front page content - from customizer
    Static Front page content - from customizer
  4. Then go to Appearance > Customize > Home Page panel to customize your homepage. You might like to check Home Widgets to know more details.
  5. Also in theme customizer, go to Archive Pages > Blog Page to customize your blog page. Please note: a static blog page can only display the latest posts.
    Customize the static blog page
    Customize the static blog page

Multi-content Homepage Only (without Blog)

  1. On your site admin panel, go to Pages > Add New. Create a new page, for example, "Front Page". You don't need to add any content to this pages.
  2. Then go to Settings > Reading panel, find the option Front page displays, choose A static page. In the drop down menu for Front Page select "Front Page". In the drop down menu for Posts page, leave it blank.
    Static Front page - on blog
    Front page - Static Front Page - No Blog
  3. IMPORTANT! Also in the Settings > Reading panel, scroll down to find the option "Static Homepage Content", choose "From Customizer > Homepage Section" in the drop down list.
    Static Front page content - from customizer
    Static Front page content - from customizer
  4. Then go to Appearance > Customize > Home Page panel to customize your homepage. You might like to check Home Widgets to know more details.

Static Homepage + Blog

Your site will display a static front page as an introduction or welcome, plus a blog to manage posts.

  1. On your site admin panel, go to Pages > Add New. Create 2 pages, for example, "Front Page" & "Blog".
  2. Then go to Settings > Reading panel, find the option Front page displays, choose A static page. In the drop down menu for Front Page select "Front Page". In the drop down menu for Posts page select "Blog".
    Static Front page
    Front page - Static Front Page
  3. Also in the Settings > Reading panel, scroll down to find the option "Static Homepage Content", choose "From page content" in the drop down list.
    Static Front page content - from page content
    Static Front page content - from page content
  4. On your site admin panel, go to Pages > All pages, find "Front Page" and edit it. Content you entered for this page will show on your site homepage.
  5. To manage the blog page, please go to Appearance > Customize > Archive Pages > Blog Page to customize your blog page. Please note: a static blog page can only display the latest posts.

5.2 Customize Homepage

Please go to Appearance > Customize > Home Page panel, you will find 4 sub sections.

Customizer - Homepage
Customizer - Homepage

When your site homepage is not a static homepage, you can use the theme built-in feature to display a Fullwidth Featured Area on your homepage. The Fullwidth Featured Area will be placed below the site header, and above the latest posts list (and other Home Widgets).

Please go to Appearance > Customize > Home Page panel, you will find the Fullwidth Featured Area section. You can choose to:

  • Display a slider of selected posts;
  • Or, you can add some custom content here.
Customizer - Homepage - Fullwidth Featured Area
Customizer - Homepage - Fullwidth Featured Area

Featured Posts Slider

If you choose to display a slider, you can pick some posts from one group ("Posts" only, "Pages" or any other custom content is not supported):

  • By Categories
  • Featured Posts (How to mark a post as "Featured")
  • Most Liked
  • Most Viewed
  • Most Commented
  • By Tags New feature added in v1.4
  • Latest Posts New feature added in v1.13

Featured Custom Content

If you choose Custom Content, then you will be able to add your custom text and media in the content editor, including inserting shortcodes for your custom slider created by a third-party slider plugin (such as Revolution Slider, or Smart Slider, and etc).

Autoplay Background Video

When choosing Custom Content, you can upload a background image, and you can also set a autoplay video as the background of this featured area. You can upload your video in .mp4 format and minimize its file size for best results, and select it from the media library. Or, you can enter a YouTube video URL.

By default, the autoplay video will not work on mobile devices. Because not all mobile browsers support autoplay video. Since v1.4, we added a new option so that users can choose to enable autoplay video on mobile devices. But this feature will not work if the mobile browser doesn't support this feature.


5.4 Latest Posts Area

Your latest posts will be displayed in this area. And you can change the following settings:

  • Sidebar Layout - If you choose "Left/Right Sidebar", then a sidebar will show in the "Latest Posts Area".
  • Section Title
  • Show Posts From - Select "All" to display all posts. You can select some categories, and only posts from the selected categories will be displayed (New feature added in TinySalt v1.9.0). To select multiple items in this box:
    • If you are using Mac, please press and hold the "Command" key on your keyboard and click the categories.
    • If you are using Windows, please press and hold the "Ctrl" key on your keyboard and click the categories.
  • Posts Layout - There are 8 layouts:
    • Large
    • Masonry 2 Columns
    • Masonry 3 Columns
    • Masonry Adaptive Columns
    • List
    • Grid 2 Columns
    • Grid 3 Columns
    • Grid 2+3 Column Mix
  • Post Style - There are 4 styles:
    • Normal
    • Overlay - When choosing "Overlay", you can select from "Normal Overlay" / "Slide Overlay" / "Colorful Overlay".
      When "Slide Overlay" is selected, the text (post title and other meta) will not be displayed by default, and they will be displayed when you hover the cursor over the post. Because there is no cursor hovering on the mobile device, the text will not appear. If you want to display text on mobile devices, please tick the box of this option: "Show the Overlay Text on Mobile Devices".
  • Post Excerpt – Show or hide excerpt.
  • Choose to show or hide "Read More" button
  • Post Meta – You can choose which post meta to show in posts archive.
  • Hide pagination (load more button, next/prev links) for latest posts area. New feature added in v1.14.
  • Number of Posts displayed Per Page
  • New feature added in v1.6 - Hide the Latest Posts Area. Check the box of this option, the Latest Posts Area will be removed from your homepage. Since this section is disabled, all the above options will no longer work.
Latest Posts Area
Homepage - Latest Posts Area

5.5 Home Widgets

There are two additional sections before and after "Latest Posts Area" on the homepage:

  • Home Widgets Area 1
  • Home Widgets Area 2

In these two areas, you can add different types of content (only for Multi-content Homepage" - find out more) by adding Home Widgets.

Please go to Customizer > Home Page > Home Widgets Area 1 / 2, click on the button Add a Widget, then click on a home widget to add it to your homepage. And you can drag and drop to reorder them, click on each widget to expand its settings panel to tweak content and style.

Manage Home Widgets
Manage Home Widgets

Currently there are 8 different home widgets, each home widget contain many options for content, layout and appearance:

  • Posts
  • Featured Category
  • Ad Banner
  • Call to Action
  • Custom Content
  • Featured Boxes
  • MailChimp Signup Form - need to install & activate the plugin "MailChimp for WP"
  • Products - Newly added in v1.9.0. Need to install & activate the plugin "WooCommerce".

Home Widget - Ad Banner

If you want to display an ad on your homepage, you can add this widget to Home Widgets Area 1 or Home Widgets Area 2. It supports adding a custom ad banner, and ad code (such as Google AdSense).

Home Widget - Ad Banner
Home Widget - Ad Banner

The settings for this home widget:

  • Section Title - Enter a title for this widget/section.
  • Color - Select "Custom", then you can change:
    • Color Scheme - switch between "Light" and "Dark".
    • Custom Background Color - choose another background color.
  • Paddings - Select "Custom", then you can change the padding top & padding bottom.
  • Ad Source - There are 2 options: Custom Banner / Embed Code
    • When selecting "Custom Banner": You can upload a custom ad banner image and add a link to the promoted page:
      • URL - This is optional. You can enter URL of the page you are promoting.
      • Ad Image - Upload a custom banner image.
      • Image Max Width
      • Open link in a new tab
      • Make the container to be fullwidth when homepage has no sidebar
        • If enabled, a new option will show: "Enable large banner special effect" - When enabling this option, a parallax effect will be applied to this ad banner (Only works when screen width is larger than 1024px).
    • When selecting "Embed Code": You can add ad code, such as Google AdSense.

Home Widget - Call To Action

You can add a Call To Action section, which contains: an image, promotional text, and a call to action button.

Home Widget - Call To Action
Home Widget - Call To Action
Home Widget - Call To Action 2
Home Widget - Call To Action - Another Layout
  • Section Title - Enter a title for this widget/section.
  • Color - Select "Custom", then you can change:
    • Color Scheme - switch between "Light" and "Dark".
    • Custom Background Color - choose another background color.
  • Padding Top
  • Padding Bottom
  • Layout Option - There are 5 layouts to choose from.
    Call To Action Layout Options
    Call To Action Layout Options
  • Heading - Enter the heading of the promotional text
  • Text - Enter the promotional content
  • Button Options
    • Enter button text
    • Add button link
    • Enable "Open link in a new tab" or not
  • Text Alignment

Home Widget - Custom Content

With Custom Content home widget, you will be able to add your custom content via the TinyMCE editor (the classic editor of WordPress). Therefore, you can add many different elements in this section, such as text paragraphs, HTML code, embedded maps, embedded videos, etc.

Home Widget - Custom Content
Home Widget - Custom Content - Popup Video Button (Theme Built-in Shortcode)
  • Section Title - Enter a title for this widget/section.
  • Color - Select "Custom", then you can change:
    • Color Scheme - switch between "Light" and "Dark".
    • Custom Background Color - choose another background color.
  • Paddings - Select "Custom", then you can change the padding top & padding bottom.
  • Add Content with a TinyMCE editor

Home Widget - Featured Boxes

With this home widget, you can add 3 featured boxes to promote some content.

Home Widget - Featured Boxes
Home Widget - Featured Boxes
  • Section Title - Enter a title for this widget/section.
  • Color - Select "Custom", then you can change:
    • Color Scheme - switch between "Light" and "Dark".
    • Custom Background Color - choose another background color.
  • Paddings - Select "Custom", then you can change the padding top & padding bottom.
  • Block #1 - Add the image, heading and link for the first box.
  • Block #2 - Add the image, heading and link for the second box.
  • Block #3 - Add the image, heading and link for the third box.

If you want to add more than 3 boxes, then please add another "Featured Boxes" home widget to the homepage.


Home Widget - Featured Category

With this home widget, you can select some categories and display on the homepage. (You can select as many categories as you like.)

Home Widget - Featured Categories
Home Widget - Featured Categories
  • Section Title - Enter a title for this widget/section.
  • Color - Select "Custom", then you can change:
    • Color Scheme - switch between "Light" and "Dark".
    • Custom Background Color - choose another background color.
  • Paddings - Select "Custom", then you can change the padding top & padding bottom.
  • Choose Categories - All post categories will be listed in the box. Please click to select, and then you can drag and drop to reorder, or delete some.
    • Please note: WordPress will not display empty categories by default.
    • Therefore, please make sure the selected category contains at least one post.
    • How to show the empty categories: Please uncheck the "Hide Empty Categories" option.
  • Category Layout - Choose the column layout (6/7/8/9/10 columns) for the categories.

To add the Category Image to each category, please read this chapter: Edit a Category.


Home Widget - MailChimp Signup Form

With this home widget, you can display your MailChimp Newsletter Signup Form on the homepage. Please note: this home widget is available after installing and activating the recommended plugin: MailChimp for WordPress.

Home Widget - Signup Form
Home Widget - Signup Form

Please check this chapter and setup your Newsletter Signup Form. After the form is created, please add this home widget to your homepage.

Settings of this home widget:

  • Color - Select "Custom", then you can change:
    • Color Scheme - switch between "Light" and "Dark".
    • Custom Background Color - choose another background color.
    • Then you can choose to add a Background Image
  • Paddings - Select "Custom", then you can change the padding top & padding bottom.
  • Choose a Form
  • Layout - Left Column / Center Column / Right Column.

Home Widget - Posts

With this home widget, you can add multiple sections with posts on the homepage.

Home Widget - Multiple sections with posts
Home Widget - Multiple sections with posts

Settings of this home widget:

  • Section Title - Enter a title for this widget/section.
  • Color - Select "Custom", then you can change:
    • Color Scheme - switch between "Light" and "Dark".
    • Custom Background Color - choose another background color.
  • Paddings - Select "Custom", then you can change the padding top & padding bottom.
  • Choose Posts - You can choose to display posts from different sources:
    • Latest Posts
    • Posts from a selected category
    • Featured Posts - How to mark a post as a featured post.
    • Most Viewd Posts
    • Most Liked Posts
    • Most Commented Posts
    • Posts from a selected format
    • Posts from a selected tag New feature added in v1.4
    • Posts from a selected WPRM (WP Recipe Maker) Taxonomy New feature added in v2.0
  • Posts Layout - There are 8 layouts:
    • Large
    • Masonry 2 Columns
    • Masonry 3 Columns
    • Masonry Adaptive Columns
    • List
    • Grid 2 Columns
    • Grid 3 Columns
    • Grid 2+3 Column Mix
  • Post Style - There are 4 styles:
    • Normal
    • Overlay - When choosing "Overlay", you can select from "Normal Overlay" / "Slide Overlay" / "Colorful Overlay".
      When "Slide Overlay" is selected, the text (post title and other meta) will not be displayed by default, and they will be displayed when you hover the cursor over the post. Because there is no cursor hovering on the mobile device, the text will not appear. If you want to display text on mobile devices, please tick the box of this option: "Show the Overlay Text on Mobile Devices".
  • Post Excerpt – Show or hide excerpt.
  • Choose to show or hide "Read More" button
  • Post Meta – You can choose which post meta to show in posts archive.
  • Number of Posts displayed Per Page

Home Widget - Products

This is a new home widget added in TinySalt version 1.9.0.

With this home widget, you can add multiple sections with selected products on the homepage. Please note: this home widget is available after installing and activating the recommended plugin: WooCommerce, and please make sure you have created some products.

Settings of this home widget:

  • Section Title - Enter a title for this widget/section.
  • Color - Select "Custom", then you can change:
    • Color Scheme - switch between "Light" and "Dark".
    • Custom Background Color - choose another background color.
  • Paddings - Select "Custom", then you can change the padding top & padding bottom.
  • Show - You can choose to display products from different sources:
    • All products
    • Featured products
    • On-sale products
  • Columns - 2/3/4/5/6 columns.
  • Rows - 1/2/3/4 rows.
  • Product Sorting

7. Theme Options

On your site admin panel, please go to Appearance > Customize, there you can customise and personalise your theme layout and styles.

Open Customizer
Open Customizer

7.1 Site Identity

You will find the following options in this section:

  • Logo – Upload your custom brand image then display it as site logo in the site header.
  • Logo Width – To keep your custom brand image look sharp on retina devices, we recommend upload an image with 2x size and give 1x size. For example, upload an image which is 200 x 200 px, and enter 100 px as the image width value.
  • Site Title – Enter your site title and it will show in the site header below the logo image.
  • Tagline – Input the brief description of your site.
  • Display Site Title and Tagline – Uncheck it to hide site title and tagline so only show the logo image.
  • Site Icon – Upload a square image to use it as a browser and app icon (the favicon) for your site.

Upload a SVG Logo

If you need to upload a SVG logo, please use this plugin: Safe SVG or SVG Support.


7.2 Site Layout & Site Width

To customize your site layout, please go to WordPress Customizer > General > General Layouts.

You can change the following settings:

  • Choose custom background color for the entire site.
  • Upload a site background image.
  • Content Max Width - New feature added in v1.12.0. Select "Custom" and then you can enter a custom maximum width.

7.3 Colors

You can change general color settings, and also can override color settings for specific elements, like site header, mobile menu, site footer, etc.

General Color Settings

Please go to WordPress Customizer > General > General Colors, there you can:

  • Choose a basic color scheme for your site: Light or Dark.
  • You can choose an accent color. The accent color will be applied to links (hover state), buttons, and other highlighted elements.
  • You can set Gradient Overlay Colors
  • You can also modify text/background colors for the 2 color schemes.

More Color Settings

New feature added in v1.12.0. Please go to WordPress Customizer > General > More Color Settings. Based on user feedback, we provide options for the following elements that frequently receive user requests to change colors:

  • Intro Label
  • Recipe Snippet Button - WP Recipe Maker snippet buttons: "Jump to recipe" , "Print recipe", etc, but do not include the buttons in the recipe template/card.
  • Sticky Like Button
  • Back to Top

Site Header/Footer Colors & more

  • Site Header Colors: Please go to WordPress Customizer > Site Header > Design Options.
  • Site Footer Colors: Please go to WordPress Customizer > Site Footer > Site Footer Bottom.
  • Mobile Menu Colors:: Please go to WordPress Customizer > Mobile Menu.
  • Home Widget Colors:: When editing a home widget, find "Colors" > select "Custom" > more color options will show. (How to edit a home widget?)

Site Header Layout

Please go to WordPress Customizer > Site Header > Header Layouts, there you can:

  • Choose a site header layout from 3 layouts.
  • When choosing "Site Header Layout 2", choose to "Force center the main menu" or not.
  • Enable Sticky Header effect or not.
  • Show or hide WooCommerce Mini Shopping Cart in site header - Only works when WooCommerce is installed and activated New featured added in v1.4
  • Show or hide Social Menu in site header.
  • Show or hide search Form in site header. Search form will be hidden on mobile devices. You can choose to show a Search Icon in the site header on mobile devices. When clicking on the search icon, a search screen will display.
  • Misc on Mobile Devices - New featured added in v1.5
    • Show or hide Social Menu on mobile devices.
    • Show or hide Cart Icon on mobile devices - Only works when WooCommerce is installed and activated.
    • Show or hide Search Icon in the site header on mobile devices.

Please Note:

If you choose "Site Header Layout 3", you need to create 2 new menus and choose menu locations for them. More information please read this chapter: Menus for Site Header Layout 3.

Site Header Colors & BG

Please go to WordPress Customizer > Site Header > Design Options, there you can:

  • Set up site header image.
  • Change site header background color and Text Color.
  • Change site header top bar background color and Text Color.
  • Change color scheme for the mini shopping cart dropdown panel New featured added in v1.4

Manage Site Header with Elementor Header Builder

You can use Elementor to create a custom site header, and then set it as the site header of your website.

  1. Please navigate to Dashboard > Header Builder. Please create a new site header, and edit it with Elementor.
  2. Then please go to Customizer > Site Header > Custom Site Header, and then select the site header you just created from the dropdown list.
  3. Please note: when you enable the Custom Header feature, the settings in Customizer > Site Header > Header Layouts and Customizer > Site Header > Design Options will not be applied to the custom site header.

More details about Header Builder can be found in this chapter.


7.5 Mobile Menu

Go to Appearance > Customizer > Mobile Menu.

Your site's Primary Menu and Secondary Menu will be displayed automatically in the mobile menu screen (How to manage menus). In addition, you can choose to show the following elements:

  1. Logo Image
  2. Social Menu
  3. Copyright Text (or any custom text)
Elements in the mobile menu
Elements in the mobile menu

To know more details about how to set up menus, please read Menu section in this documentation.

You can also change the mobile menu background color, background image and text color there.


  • If you would like to use Elementor to create your custom site footer, please check this chapter of the documentation for the instructions.
  • If "Custom Site Footer" is enabled, the options in section "Footer Top Logo", "Newsletter Signup Form", "Instagram" and "Site Footer Bottom" will be overridden.

Please go to Appearance > Customizer > Site Footer, there are 5 sub sections:

  • Footer Top Logo – Select footer top logo and logo width, also the style of footer top logo.
  • Footer Signup Form – Display your Email Signup Form in site footer, and set a background image. Please note: You need to install & activate the plugin “MailChimp for WP” first.
  • Instagram – Display a Fullwidth Instagram Feed in site footer. Please set up your Instagram first.
  • Site Footer Bottom – Add your copyright text to the bottom bar of the site footer. And you can change the colors of this area.
  • Custom Site Footer – You can choose a Custom Block to be the custom site footer of your website. More details can be found here.

7.7 Typography

Please go to Appearance > Customizer > Typography to customize font options for text.

Font Family

Options in this sub section will work for the whole site. You can choose 2 different fonts for different types of text. All 900+ Google Fonts are included in the drop down lists.

  • Text Font Family – It’s the font family for the main text content.
  • Heading Font Family – This font will be used for all titles (post title, page title, widget title…) and headings (< h1 > to < h6 >).

Font Options for Each Type of Text

There are more options (font weight, font style, text transform…) for you to customize each type of text:

  • Heading Text
  • Content Text
  • Post/Page Title
  • Post Excerpt
  • Widget Title
  • Home Widget Title
  • Menus - including Primary Menu, Secondary Menu, and Footer Bottom Menu

How to upload and use custom fonts?

If you don't want to use Google Fonts, you can use a third-party plugin to upload font files for custom fonts, and then add simple CSS code to use these custom fonts. Please follow the steps below.

  1. Upload the font files to your website (you can use this plugin). For example, we have uploaded the font files of two custom fonts to our site. When adding a new font, please enter a name for the font. For example, the names of the custom font files we added to our site are "Chilanka" and "MajorMono". You can name the font whatever you want without using the same font name as ours.
    Upload custom font files to your website
    Upload custom font files to your website.
  2. Add code to use these 2 fonts. Please add the following code to your customizer > "Additional CSS" section:
    :root {
    --heading-font: custom-font-name;
    --body-font: another-custom-font-name;
    }
    
  3. Then please change the values to the names of your custom fonts. Please refer to the screenshot below. You can see that we changed the value of "--heading-font" to Chilanka and changed the value of "--body-font" to MajorMono.
    Use custom fonts
    Use custom fonts
  4. Save the changes. Done. If you don't see the changes, please try to clear the website cache and the browser cache, and then refresh the page to check again.

After adding the code, the website will use the font added for "--heading-font" as the font for all headings, and the font added for "--body-font" will be used as the font for the content text.

How to use Adobe fonts?

If you don't want to use Google Fonts, you can use a third-party plugin to add selected Adobe fonts to your website, and then add simple CSS code to use these fonts. Please follow the steps below.

  1. Please install and activate this plugin: Custom Adobe Fonts (Typekit).
  2. To use Adobe fonts, you need to have a valid Adobe subscription first. And then you need to create a web project on the Adobe Fonts website, add some fonts to it, and get the Project ID. If you need a more detailed instructions on how to get the Adobe Fonts Project ID, please read How to get my Adobe Fonts Project ID?
  3. On your website dashboard, please navigate to Appearance > Adobe Fonts. Enter the Project ID that you create in adobe fonts. Click "Save".
    Enter the Project ID
    Enter the Project ID
  4. Then you will see the fonts in this Adobe Fonts web project.
    Adobe Fonts added to your website
    Adobe Fonts added to your website
  5. Add code to use these 2 fonts. Please add the following code to your customizer > "Additional CSS" section:
    :root {
    --heading-font: custom-font-name;
    --body-font: another-custom-font-name;
    }
    
  6. Then please change the values to the names of your Adobe fonts. Please refer to the screenshot below. You can copy the font name in the Adobe Fonts list and paste it to the code. Please refer to the screenshot below. We changed the value of "--heading-font" to century-gothic,sans-serif and changed the value of "--body-font" to bounce-script,sans-serif.
    Use Adobe fonts
    Use Adobe fonts
  7. Save the changes. Done. If you don't see the changes, please try to clear the website cache and the browser cache, and then refresh the page to check again.

After adding the code, the website will use the font added for "--heading-font" as the font for all headings, and the font added for "--body-font" will be used as the font for the content text.

How to get my Adobe Fonts Project ID?

  1. Assuming you already have a valid Adobe subscription, now you can start by browsing the library of Adobe Fonts. When you find a font you like, click the </> button to add the family to a web project.
    Add the font family to a web project
    Add the font family to a web project
    You can also click on the font name to open the family page and see all of the font weights and styles that are available to use. Then click "</> Add to Web Project" at the top of the page to add the family to a web project.
    Add the font family to a web project
    Add the font family to a web project
  2. In the Add fonts to a Web Project window, you’ll name your web project and decide which fonts should be included.
    Name your web project
    Name your web project
    You’ll be able to make changes to the project settings from the My Adobe Fonts page later, too.
  3. Then please click the Edit Project button.
    Edit Project
    Edit Project
    Find the Project ID:
    Find the project ID
    Find the project ID

7.8 Instagram

Instagram General Settings

You can add your Instagram feed on your website. Please note: your Instagram account needs to be public to show feed on your site.

Set up your Instagram

It is required to connect your website with your Instagram account before you can display the Instagram feed on your website. Please follow the guide below to connect your website with your Instagram account:

  1. Install a third party plugin: "Smash Balloon Social Photo Feed". Please install and activate this plugin Smash Balloon Social Photo Feed (Formerly "Smash Balloon Instagram Feed").
  2. Connect your website with your Instagram account. Please go to your WordPress dashboard, find "Instagram Feed" in the sidebar. Then please click on the Add New button (as shown in the screenshot below) to connect your website with your Instagram account. After clicking the button, please follow the instructions displayed to operate. It will guide you connect your Instagram account and create a new feed.
    Connect your website with your Instagram account
    Connect your website with your Instagram account, and create new feeds (Smash Balloon v6.x updated interface).
  3. Select the default Instagram feed to display. Please open your WordPress customizer, then go to General > Instagram > find "Select a feed" option, choose one of the feeds you created.
    Set the default Instagram feed
    Set the default Instagram feed
  4. Done.

Now you can display your Instagram feed on your website.

  • Footer Fullwidth Instagram Feed – Please go to Appearance > Customizer > Site Footer > Instagram, enable the feature and then the default Instagram feed you set will be displayed.
  • Instagram Feed in the sidebar – Please go to Dashboard > Appearance > Widgets, find TinySalt Instagram widget and add it to the sidebar, then the default Instagram feed you set will be displayed.
  • Adding Instagram Feed with Elementor – When you edit a page/post/custom block by using Elementor, please find TinySalt Elements > Instagram widget, add it to the content. Then in the left panel of Elementor > "Content" Tab > "General" > Find the "Image Source" option and select "Instagram API", then you can select a feed you have created.

Please note: After connecting your website to your Instagram account, you can only display the Instagram feed from the linked Instagram account

"Why do I need to install this third-party plugin?"

In order to resolve this Instagram connection issue, you need to add your Instagram Token to your website. Since Instagram API made changes frequently, we use this third party plugin "Smash Balloon Social Photo Feed" to manage Instagram Token. This is a plugin specifically made for Instagram feed, which is stable and frequently updated. Please keep it activated so that it can connect your website with your Instagram account.

Instagram Cache

By default, the Instagram cache will exist for up to 2 hours, which means that if your Instagram has just added some new photos, those photos will not be shown on your website until the cache expires. In some cases, you may like to manually clear the cache. Please open your WordPress Customizer, go to General > Instagram, find the “Clear Instagram Cache” option, and click the “Clear Cache” button.

Download images from Instagram to my website server

New feature added in v1.6. Click to manually download the latest images from your connected Instagram account to your website. This way the images can be stored on your website and can be optimized by the image optimization plugin to reduce the total page size and load time.

Please note: because downloading pictures requires connecting to Instagram and downloading takes a certain amount of time, this feature requires manual operation by the webmaster. When you upload new pictures on Instagram, if the Instagram Cache expires, the latest pictures of Instagram will be displayed on the website, but these pictures do not exist on your website, their source is still the Instagram website. Only when you log in to your website and manually operate, these new pictures will be downloaded to your website.

Enable AJAX

If you use any caching plugin on your site, you may find that sometimes your Instagram photos stop updating, especially if you haven’t updated your site content for a while, such as posting a new article. This is because the Instagram feature uses PHP code to render content by default. When the cache plugin works, the code of the Instagram feature may not run.

To avoid this problem, please open your WordPress Customizer, go to General > Instagram, find the “Load Instagram pictures dynamically with AJAX” option, tick the box to enable this option.

Common Problem with Instagram

Instagram feed cannot be displayed on your website?

Please check by following the steps below:

  1. Please check whether the required plugin "TinySalt Extension" is installed and activated.
  2. If you update the theme, please make sure you also update the required plugin "TinySalt Extension".
  3. IMPORTANT! Please connect your website with your Instagram account. Click here for the detailed instructions.
  4. Please check if you have enabled the "Instagram" feed in your site footer.
  5. Please make sure your Instagram account is public.

Issue: Action Required Within 7 Days

If you receive an email about "Action Required Within 7 Days", or suddenly you find that your Instagram feed does not show on your website, and then find this warning message on your website dashboard > Instagram Feed > Settings page:

Action Required Within 7 Days
An Instagram feed on your website has been not viewed in the last 14 days. Due to Instagram data privacy rules, all data for this feed will be deleted in 7 days time.
To avoid automated data deletion, simply view the Instagram feed on your website within the next 7 days.”
Clear all caches
Instagram Feed Issue - Action Required Within 7 Days
Why is this happening?
  • The plugin's author (Smash Balloon) has a document here with more information about this issue: How to fix the error “Action Required Within 7 Days”.
  • And they also explained: "Other than the page with the feed not being visited, this warning can appear if our app is deauthorized on the Instagram account or Instagram invalidates the access token for some other reason." (More details can be found here.)
  • Due to Instagram’s data privacy policies, if this is not resolved within the 7-day period, this plugin (Smash Balloon Social Photo Feed) must delete all the Instagram platform data it saved on your website, such as cached posts and account connections. It will not affect your actual account on Instagram though.
How to fix this issue?
  1. Go to WordPress Dashboard > Instagram Feed > Settings. In the warning message box, if you see the "Fix Usage" button, try clicking on it and clearing your website cache and browser cache to check again.
  2. If it does not work, then go to WordPress Dashboard > Instagram Feed > Settings again, remove the connected account(s) by clicking the red trash icon.
  3. Click the Save Settings button.
  4. Click the Add Source button, then click the blue Connect button and go through the connection process again. If connecting a Business Profile, when sent to Facebook, you may need to click the Edit Settings (reference) button to review your connection settings and make sure the correct account and related pages you manage are selected, and all permissions.
  5. For any existing feed or legacy feed, go to the specific feed options > Settings > Sources and select the newly connected source. Once your account has been readded, click the Save Changes button.

More details can be found in the following articles:

Issue: Instagram's cache expiration time

Recently, Instagram's cache expiration time is unstable and may expire within a short period of time, causing the Instagram feed images on the website to not be displayed. To fix this problem, please follow the steps below.

  1. On your site dashboard, please navigate to Instagram Feed > Settings > Click the "Feed" tab, and then click the Clear All Caches button.
    Clear all caches
    Instagram Feed Settings - Clear all caches
  2. Then, please open the Customizer and navigate to General > Instagram > Click the "Clear Cache" button.
    Customizer - Instagram Settings - Clear Cache
    Customizer - Instagram Settings - Clear Cache
  3. To avoid frequent manual clearing of the cache in the future, please click the Manually Download Images button, and then also check the "Enable automatic download of Instagram images" option. And then please save the changes.
    Customizer - Download Instagram Images
    Customizer - Download Instagram Images
  4. Now you can clear your website cache (if you are using any performance optimization / cache plugins), and clear the browser's cache, refresh the pages to check again.

If the problem persists, please contact our support team at Loft.Ocean Help Center and our support specialists will further assist you in investigating the issue to find out the specific cause.


7.9 Image Loading

These features were added in TinySalt v1.6. Optimizing the image loading method can also optimize website performance.

In the customizer, please navigate to General > Image Loading, then you will find these 3 options.

  • Progressive Image Loading
  • Lazy Loading
  • Use original size images throughout the site
Image Loading Options
Image Loading Options

1. Progressive Image Loading

What is "Progressive Image Loading": This is a modern web technique that is being used on many popular websites. When the page loads, before the large image is successfully loaded, a small blurred image is displayed first. After the large image is successfully loaded, then fade in to the large images. This is for better performance and user experience.

However, using this technique will also increase the total page size: because additional small thumbnails will be loaded.

We added an option to enable or disable the Progressive Image Loading feature in v1.6. And this feature is enabled by default. You can choose to disable this feature if you don't want to load these additional small thumbnails.

2. Lazy Loading

Please note: This option only appears when the "Progressive Image Loading" feature is activated. Updated in v1.12.0: This feature is independent now.

Many website optimization plugins provide the "lazy loading" feature. TinySalt theme also provides this feature. This feature makes the page load faster.

As mentioned above, when "progressive image loading" is enabled, your total page size will increase. However, you can also enable the "Lazy Loading" feature, and then use a page speed test tool to test the website, you will find that the total page size will be reduced.

This is because when the "progressive image loading" and "Lazy Loading" features are enabled, only small thumbnails are loaded on the page at the beginning, and the large images are loaded only when the screen scrolls to the image. When you use the page speed test tool to test the website, only the large images of the first screen will be loaded, and the large images of the rest of the page are not loaded, so in the page speed test results, the total size of the page will be less than the actual total size of the page.

Please do not use the theme built-in image loading optimization features and third-party plugins' image loading optimization features (such as "lazy loading") at the same time. For more details, please refer to Speed & Performance - Optimize image loading.

3. Use original size images throughout the site

Please do NOT enable this feature unless it is necessary.

When using TinySalt, like many other premium WordPress themes with optimized features, the images you uploaded to your WordPress site will be saved into different sizes and will be used for different places. However, if you think some images on your page are not clear enough, you can enable this feature, so that the original images will be used.

Please use this feature with caution. Activating this function can ensure that the picture is clearer but at the same time will increase the page file size and loading time. Please optimize all images before uploading them to avoid uploading images that are too large (please refer to Optimizing images).


7.10 Post Like Button

In TinySalt v1.8.0, we added some new options for the post like button. To change these settings, please open the Customizer and navigate to General > Post Like. There are 2 options:

Post Like Button Options
Post Like Button Options
  1. For posts list, show post like button on mobile.
    • By default, for posts list, the post like button only appears when hovering on the featured image.
    • However, there is no "hover" on touch screens (mobile phones and tablets), so the post like button will never show on touch screens. Therefore, users can enable this option, then the post like button will always appear on the featured image on touch screens.
      Post Like Button always appears on touch screens
      Post Like Button always appears on touch screens
  2. For single post, display a sticky like button
    • When this option is enabled, in the lower right corner of the page on a single post, a sticky "Post Like" button will be displayed above the "Back to Top" button.
      Sticky like button
      Sticky like button

7.11 Yoast SEO Breadcrumbs

Since v1.9.0, we provide a feature to display the Yoast SEO breadcrumbs on the single posts and single pages. Breadcrumbs are a way to help your users better navigate your site and its structure. Additionally, they can appear on Google and provide a better user experience.

Please note: this feature is provided by the third party plugin Yoast SEO. If you have any questions or problems while using this feature, please contact Yoast SEO Support for further help.

  1. Please install and activate the third party plugin Yoast SEO.
  2. On your website dashboard, please navigate to SEO > Search Appearance > Breadcrumbs, enable the feature.
    Enable Yoast SEO Breadcrumbs.
    Enable Yoast SEO Breadcrumbs.
  3. After enabling this feature, Yoast SEO will show the Breadcrumbs as JSON-LD in the source code of each page/post. It will display in Google search results for better SEO. However, when visitors browse your website, they won’t see the breadcrumbs (but this will not affect your website SEO).
  4. This step is actually optional, and this is the feature provided by our theme. After you enable the Breadcrumbs in Yoast SEO settings, if you also want to display the breadcrumbs on the single posts and single pages, please open the WordPress customizer and navigate to General > Breadcrumbs > Check the option "Show Yoast SEO breadcrumbs on Single Posts & Pages".
    Show Yoast SEO breadcrumbs on Single Posts & Pages
    Show Yoast SEO breadcrumbs on Single Posts & Pages
    Then the breadcrumbs will show on the single posts and single pages:
    Yoast SEO breadcrumbs display on the page.
    Yoast SEO breadcrumbs display on the page.

7.12 Ads

Manual Ads

TinySalt provides several places for maually inserting ads.

  • Sidebar
    • To add an ad banner (image with link) into the sidebar, please edit the "Widgets", add TinySalt Ad widget.
    • To add ad code (e.g. Google AdSense), please edit the "Widgets", add Custom HTML widget and insert code in this widget.
  • Homepage - Please use "Home Widget - Ad Banner". Please refer to instructions in this sub chapter.
  • Site Top - The ad you add for "Site Top" will be displayed at the top of every page of the website.
    • Please open the WordPress Customizer and navigate to "Advertisement" > "Site Top". There you can upload an ad banner image, or embed ad code (e.g. Google AdSense).
  • Before Single Post Content - The ad you add here will be displayed before the content of every single post.
    • Please open the WordPress Customizer and navigate to "Advertisement" > "Before Single Post Content". There you can upload an ad banner image, or embed ad code (e.g. Google AdSense).
  • After Single Post Content - The ad you add here will be displayed after the content of every single post.
    • Please open the WordPress Customizer and navigate to "Advertisement" > "After Single Post Content". There you can upload an ad banner image, or embed ad code (e.g. Google AdSense).
  • Before Single Page Content - The ad you add here will be displayed before the content of every single page.
    • Please open the WordPress Customizer and navigate to "Advertisement" > "Before Single Page Content". There you can upload an ad banner image, or embed ad code (e.g. Google AdSense).
  • After Single Page Content - The ad you add here will be displayed after the content of every single page.
    • Please open the WordPress Customizer and navigate to "Advertisement" > "After Single Page Content". There you can upload an ad banner image, or embed ad code (e.g. Google AdSense).

Google AdSense Auto Ads

If you are using Google AdSense Auto Ads, Google will automatically place ads where they’re likely to perform well. More information about this feature can be found here: About Auto ads

The Possible Issue:
Therefore, we cannot control where the ad is inserted on your website. Sometimes, you may find that the sticky sidebar is incorrectly positioned and may overlap other content. This is due to the fact that when Google AdSense Auto Ads inserts ads to the sidebar, it is not added in the correct position, causing the position of the sticky sidebar to be calculated incorrectly.

The Solution:
Because we cannot control where the ad is inserted on your website, to resolve this issue, the possible solutions are as follows:

  • Option #1 - Please turn off "Google Auto ads". And then, you can manually add the AdSense code to your website. Please refer to the previous sub chapter: Manual Ads.
  • Option #2 - If you want to use "Google Auto ads", you can disable the "Sticky Sidebar" feature (in the WordPress Customizer > "Sidebar" section).

Important! After making changes, please clear your website cache and browser cache, and reload the page to check again.


7.13 Comments & Form Order

In version 1.14, we added a new option to reverse the order of the comments list and the comment form.

This new option can be found in the Customizer > General > Comments.

Reverse the position of comments list and comment form
Reverse the position of comments list and comment form

7.14 Disable the new Widget Block Editor In WordPress 5.8+

WordPress 5.8 was released on July 20th, 2021 and it introduced the new WordPress Widget Block Editor, which is very different from the previous widget editor in UI, and may cause bugs on some sites. Therefore, if you would like to disable the Widget Block Editor In WordPress 5.8+, please follow the steps below:

  1. This is a new feature added in TinySalt v2.0. Please make sure that you have updated TinySalt and the required plugin "TinySalt Extension" to the latest version.
  2. Please open the WordPress Customizer.
  3. Then navigate to General > Widgets Editor, tick the checkbox, save, close the Customizer.
  4. Refresh the widgets editor page and you will find that the classic widget editor is back.

9. Archive Pages

9.1 Posts General Options

Please go to Customizer > General > Posts General Options. There you can:

  • Change the text showing on the "read more" buttons.
  • Choose a Pagination Style for posts archive - there are 4 options:
    • Next/Prev Links
    • With Page Numbers
    • Load More Button
    • Infinite Scroll
  • Change the Post Thumbnail Shape for each posts layout.
  • Change the Post Excerpt Length for each posts layout.

9.2 Static Blog Page

In your site admin panel, go to Settings > Reading panel, find the option Front page displays, choose A static page. In the drop down menu for Posts page select a page, for example, "Blog".

The page assigned as the blog page (posts page) is the Static Blog Page.

Static Front page
Front page - Static Front Page
You might like to check Homepage / Front Page for more information.

To customize the layout of the static blog page, please go to Customizer > Archive Pages > Blog Page. There you can:

  • Choose the sidebar layout
  • Show Posts From - You can choose to display all posts on the blog page, or, you can select some categories to display the posts of these categories. So that you can only display non-recipe posts (regular blog posts) on this page. (New feature added in v1.11.)
  • Select a Posts Layout
  • Choose to show or hide post excerpt
  • Choose to show or hide "Read More" button.
  • Display selected post meta
  • Decide the number of Posts displayed Per Page.
  • Enable Search & Filters - New feature added in v1.12. More details can be found in: Extending Search & Filters.
Customize the static blog page
Customize the static blog page

9.3 Category Archive

Edit a category

Go to Posts > Categories, when adding a new category or edit an existing one, you can add a Category Image for this category, then on the category archive page, this image will be used as the page header background image.

And this image will also be used for the custom widget: TinySalt Category widget.

Category Image
Category Image

General Category Page Layout

To change the page layout and archive styles for all category achieve pages, please go to Customizer > Archive Pages > Category. There you can change the following settings:

  • Sidebar Layout
  • Posts Layout
  • Post Excerpt - Show or hide excerpt.
  • Choose to show or hide "Read More" button.
  • Post Meta – You can choose which post meta to show in posts archive.
  • Number of Posts displayed Per Page
  • Enable Search & Filters - New feature added in v1.12. More details can be found in: Extending Search & Filters.
Customize the category archive page
Customize the category archive page

Please note: a category archive only displays the list of posts, so users cannot add a slider or other home widgets to an archive page.

Individual Category Page Layout

Go to Posts > Categories, when adding a new category or edit an existing one, you will find this option: Category Layout Customization.

Tick this option, more settings will show. Then you can change the layout of this category archive page.

Individual Category Page Layout
Customize Individual Category Page Layout

9.4 Author Archive & Author Info

The author information will show:

  • At the top of Author Archive page
  • After single post content (the author's biographical info need to have some content)

Author information includes the author profile picture, biographical info and Social Media Icons.

Where to find the Author Page?

Author pages are Archive pages. They are not static pages that can be found in the "All Pages" list on your website. When you add a new user to the website, WordPress will automatically generate the page for this user (author). It's the same as the "category" or "tag" archive page.

To find an archive page of an author on your website, please go to your WordPress dashboard > "Users" > "All Users", you will find all users on this website. Hover your cursor over the row and then click on "View" link, then the archive page of this author will display.

Find Author Archive
Find Author Archive

To add the author archive page to your menu, please copy the page URL in the browser address bar, then add it as a "Custom Link" to your menu.

Add author archive page to menu
Add author archive page to menu.

Edit Author Bio & Social Icons

To edit author biographical info and Social Media Icons, go to your site dashboard > Users > All Users, find the user you are going to edit, click to open the Edit User page, there you can edit the biographical info.

Author Info
Author Biographical Info & Social Media Icons

Edit Author Profile Picture

To add or edit the author profile picture, please visit https://en.gravatar.com/ for more information.

Author Page Layout

To change the page layout and archive styles, please go to Customizer > Archive Pages > Author. There you can customize:

  • Sidebar Layout
  • Posts Layout
  • Post Excerpt - Show or hide excerpt.
  • Choose to show or hide "Read More" button.
  • Post Meta – You can choose which post meta to show in posts archive.
  • Number of Posts displayed Per Page

Hide Author Info Box on Single Post

To hide the author info box after single post content, please go to Customizer > Single Post > After the Post > Display Author Info Box, then uncheck the box.


9.5 Tag Archive

Go to Posts > Tags, when adding a new tag or edit an existing one, you can upload an image for this tag, then on the tag archive page, this image will be used as the page header background image.

To change the page layout and archive styles, please go to Customizer > Archive Pages > Tag. There you can change the following settings:

  • Sidebar Layout
  • Posts Layout
  • Post Excerpt - Show or hide excerpt.
  • Choose to show or hide "Read More" button.
  • Post Meta – You can choose which post meta to show in posts archive.
  • Number of Posts displayed Per Page
  • Enable Search & Filters - New feature added in v1.12. More details can be found in: Extending Search & Filters.

9.6 Date-based Archive

You can also customize the layout of date-based archive pages. Please go to Customizer > Archive Pages, then go to Date based panel. There you can change the following settings:

  • Sidebar Layout
  • Posts Layout
  • Post Excerpt - Show or hide excerpt.
  • Choose to show or hide "Read More" button.
  • Post Meta – You can choose which post meta to show in posts archive.
  • Number of Posts displayed Per Page

9.7 WPRM Recipe Archive

New featured added in v1.14. The recipe plugin WP Recipe Maker (WPRM) provides taxonomies for recipes, such as Course, Diet, Ingredient, and more. If you have enabled them, you can display corresponding recipes on the recipe archive pages.

Please note: WP Recipe Maker Taxonomies are disabled by default, so you need to enable them first. Please follow the steps below:

  1. Please navigate to the WP Recipe Maker > Manage > Your Custom Fields > Recipe Taxonomies page > Edit selected taxonomy.
    WP Recipe Maker Tools
    Edit Recipe Taxonomies
  2. And then enable its "Has Archive Pages" option. Save the change.
    WP Recipe Maker Tools
    Edit Recipe Taxonomies

And then, you can customize the layout of WPRM recipe archive pages. Please go to Customizer > Archive Pages, then go to WPRM Recipe Archive panel. There you can change the following settings:

  • Sidebar Layout
  • Posts Layout
  • Post Excerpt - Show or hide excerpt.
  • Choose to show or hide "Read More" button.
  • Post Meta – You can choose which post meta to show in posts archive.
  • Number of Posts displayed Per Page

10. Posts

10.1 Featured Post

You can choose some posts and set them as "Featured Post" manually. Then you can add these posts into many different places: Homepage Featured Area, Home Widgets and TinySalt Posts widget.

On your dashboard, go to Posts > All Posts, then you will see the column Featured, tick the box of some posts to mark them as the featured posts.

Featured Posts
Featured Posts

Alternatively, you can also change the "Featured" status of a post in the Gutenberg editor:

Change the Featured status of a post in the Gutenberg editor
Change the "Featured" status of a post in the Gutenberg editor

10.2 General Single Post Options

Please go to Customizer > Single Post > Post, there you can set the default post template and sidebar layout for all single posts, and you can control more general settings for single posts.

Options:

  • Default Post Template - You can change the post template for each post while editing that post. Please see the next sub-chapter Specific Single Post Options.
  • Default Sidebar Layout - You can change the sidebar layout for each post while editing that post. Please see the next sub-chapter Specific Single Post Options.
  • Header Meta - Display the selected post meta in the header of the post, including: Categories/Author Photo/Author Name/Publish Date/View Counts.
  • Footer Meta - Display the selected post meta in the footer of the post, including: Tags/Comment Counts/Like Counts/Social Sharing Icons.
  • Social Media Sharing Buttons - Display or hide the Social Media Sharing Button after post content.

10.3 Specific Single Post Options

In Gutenberg Editor

Change Post Template: In the Settings sidebar, find "Template":

Change a Single Post Template
Change a Single Post Template
  • TinySalt theme provides 10 post templates.
  • You can choose a default template for posts, and you are also able to choose different templates for different posts.
  • If you choose "Default", then this post will use the default template you have selected via Customizer > Single Post > Default Post Template.
  • If you choose any other template, then it will ignore the default post template setting. And if you change the default post template in Customizer, the change will not affect this post.

The other options for a single post: in the Gutenberg editor, click on the "Theme Settings" toggle button. Then click on each setting title to expand the sub panel.

Single Post Options
Other Single Post Options
  • Featured Post Settings - Mark this post as a featured post.
  • Like/View Settings
    • Like Counts - Edit the like counts value.
    • View Counts - Edit the view counts value.
  • Intro Settings
    • Intro Label - Add the lable of the intro, like "Sponsored" or "What's Special".
    • Intro Description - Add a summary for some important information of the post.
  • Hide Featured Image - Hide the featured image on the single post page (the featured image will still be displayed on archive pages, such as home page, category archive page, etc.).

In Classic Editor

When editing a post, scroll down the page and you can find the "TinySalt Single Post Options" panel & "Post Attributes" panel. There you can:

Single Post Options
Specific Single Post Options
  • Choose Post Template (in the "Post Attibutes" panel) -
    • TinySalt theme provides 10 post templates.
    • You can choose a default template for posts, and you are also able to choose different templates for different posts.
    • If you choose "Default", then this post will use the default template you have selected via Customizer > Single Post > Default Post Template.
    • If you choose any other template, then it will ignore the default post template setting. And if you change the default post template in Customizer, the change will not affect this post.
  • Featured Post - Check the box to mark this post as a featured post.
  • Like Counts - Click the "Edit" link first, then you can edit the like counts value.
  • View Counts - Click the "Edit" link first, then you can edit the view counts value.
  • Intro Label - Add the lable of the intro, like "Sponsored" or "What's Special".
  • Intro Description - Add a summary for some important information of the post.

10.4 Manage Recipe-posts & Regular Blog Posts separately

We recommend using categories to manage recipe-related posts and regular blog posts. For example, you can create 2 parent categories: "Blog" and "Recipes", and then add sub-categories for each parent category.

manage-categories-separately
Manage categories separately

And you can set up the "Recipe Index" page to display all recipe-related posts (please refer to the documentation: Setup the Recipe Index page). Only the selected (recipe-related) categories will be displayed on this page.

Then there are 2 methods to display all blog-related posts on a "Blog" page:

  • Option #1 - You can add the parent category "Blog" to the menu and display all blog-related posts on this category archive page. With the TinySalt theme, each category archive page can have a different layout. So if you have different parent categories, such as "Blog", "Travel", "Guide and Tips", you can have different post layouts on these archive pages. More details please refer to Individual Category Page Layout.
  • Option #2 - You can create a new page and name it "Blog" (or any other name you like), and set it as the "Static Blog Page". And then, you can customize this page via the Customizer > Archive Pages > Blog, select the parent category "Blog" to display all blog-related posts on the "Blog" page. More details can be found in this sub chapter: Static Blog Page.

10.5 Post Like & Social Sharing

On each single post, you will find the Post Like button and some Social Sharing buttons displayed after the post content.

Visitors can click these buttons to interact with the post: like it, or share it via social media platforms.

You can choose to show or hide these buttons. Please open your WordPress customizer, then go to General > Social Share Buttons > then find the Social Icons option. Tick the checkbox to show a button.

Post Like & Social Sharing Buttons
Post Like & Social Sharing Buttons

10.6 Primary Category

Since v3.5, users can select a Primary Category when you are editing a post. This feature is to more precisely display "Related Posts" below the content of a single post.

When a post is assigned to multiple categories, such as Category A, Category B, and Category C, the "Related Posts" below the content of this post will display all posts with the same category as this post, that is, if a post's categories includes any of the three categories A/B/C, and it will be displayed in the "Related Posts".

After you select the Primary Category for this post, for example, select category B as the Primary Category of this post, then only all posts containing category B will be displayed in the "Related Posts" below the content of this post.

How to select a Primary Category:

  1. When editing a post, please go to the Categories setting in the sidebar of the post editing screen.
  2. Click on the dropdown list under "Primary Category (TinySalt)". The menu expands.
  3. Select the primary category from the dropdown list.
Select a Primary Category for a single post
Select a Primary Category for a single post

11. Pages Settings

TinySalt provides some features specifically for Pages.

11.1 Choose Page Template

In Gutenberg Editor

For WordPress version 5.8: When editing a page, in the Settings sidebar, please find the "Template" panel. There you can change the page template.

Change a Single Page Template
Change a Single Page Template - WordPress v5.8 and above

Before WordPress version 5.8: When editing a page, in the Settings sidebar, please find the "Page Attributes" panel. There you can change the page template.

Change a Single Page Template
Change a Single Page Template

In Classic Editor

When editing a page, please find the "Page Attributes" panel. There you can change the page template.

Change a Single Page Template in Classic Editor
Change a Single Page Template - in Classic Editor

11.2 Hide Page Header

You can hide the default page header for a page.

In Gutenberg Editor

In the Gutenberg editor, click on the "Theme Settings" toggle button. Then click on "Hide Page Header" to expand the sub panel, and then enable this option.

Hide Page Header
Hide Page Header

In Classic Editor

When editing a page, scroll down the page and you can find the "TinySalt Single Page Options" panel. Then please tick the box of "Hide Page Header" option.

Hide Page Header in Classic Editor
Hide Page Header - in Classic Editor

11.3 Advanced Options

You can add custom CSS class(es) to a specific page.

What is this for?

This is an advanced function and is usually used by users with knowledge of writing code. You can add specific CSS classes to the "body" tag of a specific page, and then add corresponding CSS code or JavaScript code for these classes to achieve specific results.

In the TinySalt theme, we have provided some preset styles for the following 5 special CSS classes. You can choose to add some of these CSS classes to a page according to your needs. When entering multiple classes, please separate the classes with spaces.

  • hide-site-header - After adding this class, the entire site header (including the logo, site title, tagline, menu, top bar) will be hidden for this page. This is a new class added in TinySalt v1.9.0.
  • hide-footer - After adding this class, the entire site footer will be hidden for this page.
  • hide-footer-logo - If you just want to hide the footer logo for a page, you can add this class to the page.
  • hide-footer-signup - If you just want to hide the signup form in the site footer for a page, you can add this class to the page.
  • hide-footer-ins - If you just want to hide the Fullwidth Instagram Feed in the site footer for a page, you can add this class to the page.
  • no-padding-bottom - If you want to remove the padding bottom after page content on a page, you can add this class to the page.

Please read the following instructions to learn how to add custom CSS classes to the page.


In Gutenberg Editor

In the Gutenberg editor, click on the "Theme Settings" toggle button. Then click on "Advanced" to expand the sub panel, and then you can add custom classes. The class(es) entered here will be added to the <body> tag of this page.

Advanced Feature - Add custom classes to a page
Advanced Feature - Add custom classes to a page.

In Classic Editor

When editing a page, scroll down the page and you can find the "TinySalt Single Page Options" panel. Then enter custom CSS classes into the "Additional CSS Class(es)" input box.

Add custom classes in Classic Editor
Add custom classes to a page in Classic Editor

12. Manage Recipes

12.1 Install WP Recipe Maker

Please install and activate the free plugin: WP Recipe Maker.


12.2 Select Default Templates

Please navigate to WP Recipe Maker > Settings, then change the following 3 settings:

  1. Recipe Template > Default Recipe Template > Food Recipe Template, select TinySalt Recipe.
    Default Recipe Template
    Select Default Recipe Template
  2. Print Version > Default Print Template > Food Recipe Print Template, select TinySalt Recipe Print.
    Default Print Recipe Template
    Select Default Print Recipe Template
  3. Recipe Roundup > Food Recipe Roundup Template, select TinySalt Roundup Summary.
    Default Recipe Roundup Template
    Select Default Recipe Roundup Template

12.3 Write a Recipe

Please read this documentation for more details on Creating a recipe.

Please note: WP Recipe Maker works like this: the recipes created are stored under "WP Recipe Maker" section in sidebar of your WordPress dashboard. These recipes will not display on your website frontend directly. You need to insert a recipe to a post, then this recipe will display on the page of this single post.

12.4 Recipe Index

Before creating and setting up your Recipe Index page, you may like to know something basic about it.

1. What is the "Recipe Index" page?

The "Recipe Index" page is a special archive/index page. It works similar to the static blog page as any WordPress site: We need to create a real page for it (the "Recipe Index" page in the "All Pages" list on the dashboard), but the contents on the page do not come from the page editor.

2. Why and when this page is needed?

  • If your homepage has many different sections to display different contents, then you may want to have a separate "Recipe Index" page so that your visitors can easily find some specific recipes.
  • This page will display all recipe posts (based on your settings) and display filters in the sidebar position.
  • When the visitor changes anything in the filters, for example, select "French" in "Cuisine" and "Breakfast" in "Course", the posts on the page will be filtered instantly with AJAX (without refreshing the page), other posts are hidden, leaving only "French Breakfast" posts, so visitors can easily find the posts they are interested.

3. How to setup the Recipe Index page?

Please follow the stpes below to setup your Recipe Index page.

  1. Create a new page, add the page title, such as "Recipe Index", or "All Recipes".
  2. Please navigate to Settings > Reading, find "Recipe Index Page" option, select the page you just created.
    Setup Recipe Index Page
    Setup Recipe Index Page
  3. Open WordPress customizer, go to Recipe Index section.
    Customize Recipe Index Page
    Customize Recipe Index Page
  4. Please select some categories. Posts from the selected categories will be displayed on the Recipe Index page. So you can only show recipe-related posts here. This is to ensure that only certain posts are displayed on this page. For example, your website may not only have recipes, but also have regular blog posts (such as travel, lifestyle, gardening, etc.). In this case, you can display only recipes on this index page by selecting categories related to recipes.
    Recipe Index Page
    Recipe Index Page
  5. Then you can select posts layout, and change other appearance settings.
  6. Since v2.1, we added a new option: Exclude Taxonomy Items not Included in Selected Posts. By default, all non-empty tags and WPRM taxonomies will be listed in the filter. When this feature is enabled, only tags and WPRM taxonomies associated with posts displayed on the current page will appear in the filter.

4. How to customize the page layout?

Open WordPress customizer, go to Recipe Index section. Then you can customize the Posts Layout, Posts Style, etc. And you can also choose to show or hide some items in the filters.

5. Search & Filters vs Sidebar

Some options of this feature have been changed and optimized in v1.12.0. Please don't forget to update your TinySalt theme and the required plugin "TinySalt Extension".

Change the position of Search & Filters

  • Search & Filters can be placed:
    • Above the main content
    • On the Left side of the page
    • On the Right side of the page
  • To change it, please find Search & Filter Options.
  • To place it on the left/right side, please select "Replace main sidebar". And then, please find Sidebar Layout and select "Left Sidebar" or "Right Sidebar".

Can I add other widgets into this sidebar?

  • When you enable the "Search & Filters" feature, this page is a special index page, and it only focuses on making it easy for visitors to find posts.
  • If you want to display the "Search & Filters" on the left/right side, then it will replace the main sidebar. So only the filters are displayed in the sidebar position. You cannot add widgets to the sidebar of this page. (And the filter is not a widget.)
  • However, you can place the "Search & Filters" above the main content, and then enable the sidebar. The main sidebar (with widgets inside) will display on the page.

6. Sorting Recipes

In v1.8.0, we added options so that users can choose how to sort recipes. Please open the customizer and navigate to Recipe Index > scroll down and find the following 2 options:

  • Default Recipe Sorting - The website administrator can set the default sorting method.
    • Sort by date (new to old)
    • Sort by date (old to new)
    • Sort by post title (a to z)
    • Sort by post title (z to a)
  • Show sorting filter on front - When enabling this option, the sorting filter will be displayed on the Recipe Index page so that visitors can change the sorting method.
Sort recipes
Sort recipes

7. Extending Search & Filters

After releasing TinySalt, we received some feature requests about extending the Recipe Index feature and/or the Search & Filters feature.

  • Some users want to also display the Search & Filters on archive pages, such as category archive pages, the Blog page (Posts page), tag archive pages.
  • Some users want to create another index page, for example, "Wine Index" page, which displays all Wine posts, and the Search & Filters.

Therefore, we extended the Search & Filters feature in v1.12.0.

How to display Search & Filters on the (Category / Tag / Blog) archive pages?

  1. Please make sure you are using the latest version of TinySalt and the required plugin "TinySalt Extension". If not, please update them first.
  2. Please open the WordPress Customizer and navigate to Archive Pages > select a type of archive (for example, "Category").
  3. You will find the option: Search & Filter Options. It is disabled by default.
  4. To enable it, please select "Above main content" or "Replace main sidebar", and more options will display.
  5. If you select "Replace main sidebar", please also make sure you have enabled the sidebar: find the Sidebar Layout option > select "Left Sidebar" or "Right Sidebar".

Please note: Search & Filters can only be enabled for the following 3 archives: Category / Tag / Blog.

You may also like to check Search & Filters vs Sidebar".

How to create another index page, for example, "Wine Index Page"?

Since TinySalt is a personal food blog theme, we still focus on Food Recipes, so you cannot actually create another index page on the same site. However, you can use the category archive feature to create a page very similar to the Recipe Index page:

  1. Please make sure you are using the latest version of TinySalt and the required plugin "TinySalt Extension". If not, please update them first.
  2. You can use "Category" to organize all "Wine" posts. Please create a category "Wine" and assign all wine posts to this category.
  3. You can add the category "Wine" to the menu and display all wine-related posts on this category archive page.
  4. With the TinySalt theme, each category archive page can have a different layout. So you can customize the page layout and posts styles for this category archive separately. More details please refer to Individual Category Page Layout.
  5. When customizing the archive page, please find the option: Search & Filter Options. It is disabled by default.
  6. To enable it, please select "Above main content" or "Replace main sidebar", and more options will display.
  7. If you select "Replace main sidebar", please also make sure you have enabled the sidebar: find the Sidebar Layout option > select "Left Sidebar" or "Right Sidebar".

You may also like to check Search & Filters vs Sidebar".


12.5 Recipe Taxonomies

In the free version of WPRM plugin, there are 6 recipe taxonomies:

  • Ingredients
  • Equipment
  • Courses
  • Cuisines
  • Diets
  • Keywords

You can find and manage these recipe taxonomies via your WordPress dashboard > WP Recipe Maker > Manage > Recipe Fields.

Recipe Taxonomies
Recipe Taxonomies in WPRM Free version

These recipe taxonomies will be displayed in your recipe card. And you can select some of them to display in the Recipe Index Filters.

When you set up your Recipe Index Page, you can customize the filters: Customizer > Recipe Index > find the "Display Selected Filters" options. The selected items will show in the filter sidebar.

Recipe Index Filters
Recipe Index Filters

12.6 Recipe Taxonomies as URL Parameter

We added this feature since v1.5. You can add the recipe taxonomies as URL parameter, and then add the links as the menu items.

1. What is it?

When visiting the Recipe Index page, you can add something such as "?tag_course=dessert" to the end of the page's URL so that the page only displays the "Dessert" recipes (other posts will be hidden). And then you can add this URL into your menu as a "Custom Link" and enter a label "Dessert Recipes" for it.

2. How to get the correct parameter?

  1. You need to set up your Recipe Index page.
  2. On your website dashboard, please go to WP Recipe Maker > Manage > Recipe Fields.
    Recipe Taxonomies
    Recipe Taxonomies in WPRM Free version
  3. For example, we can click on the "Courses" tab. In the browser address bar, please find the taxonomy at the end of the link: tag_course. Then find the value of the course name in the list below, for example, "Dessert".
    Get the Recipe Taxonomies name and value
    Get the Recipe Taxonomies name and value
  4. On your Recipe Index page, add ? + taxonomy + value to the end of the page's URL. For example, if your Recipe Index page URL is "https://www.yoursitedomain.com/recipes/", after adding the URL parameter, the URL will be "https://www.yoursitedomain.com/recipes/?tag_course=dessert".

12.7 Recipe Rating Issue

Visitors can vote on your recipes while leaving a comment:

Visitors vote on the recipes while leaving a comment
Visitors vote on the recipes while leaving a comment

After the comment is approved and published, the rating will be displayed in the Recipe Card:

Rating will be displayed in the recipe card
Rating will be displayed in the recipe card

However, in rare cases, the rating may not be displayed in the Recipe Card. If this issue occurs on your website, please follow the steps below to check:

  1. Make sure that each recipe card is added to only one post. (Please do not add the same recipe card to multiple posts.)
  2. Navigate to the WP Recipe Maker > Manage page, check if the recipe has the correct parent post.
    Recipe and its parent post
    Recipe and its parent post
  3. When you check the WP Recipe Maker > Manage page, does it show the correct rating there?
    Does it show the correct rating?
    Does it show the correct rating?
  4. Make sure that the comment containing the recipe rating has been approved and published.
  5. Navigate to the WP Recipe Maker > Tools page. Click the "Find Parent Posts" button and the "Find Recipe Ratings" button.
    WP Recipe Maker Tools
    WP Recipe Maker Tools
  6. Clear your website cache.
  7. And then, clear your browser cache (or, please try to access the website with another browser that has not cached the website), and then refresh the pages to check again.

12.8 Recipe Metadata for SEO

The "WP Recipe Maker" plugin uses JSON-LD metadata, which is the format that Google recommends. This allows you to show up as rich snippets & rich cards in Google’s search results. For more details about this feature, please read the following documentation of the plugin:


12.9 Recipe Template Editor

If you want to edit the recipe template, for example, changing the background color of the recipe card, please use the Template Editor tool provided by WP Recipe Maker.

The operation steps are as follows (abbreviated version):

  1. You can access the Template Editor from the WP Recipe Maker > Settings > Template Editor page by clicking on the "Open the Template Editor" button.
  2. Select the template you like best and then click on the blue "Clone Template" button. Enter a name for your own template.
  3. After cloning, click on your own template to see more actions available. You can change colors, edit/add/remove blocks that are in the template.
  4. After creating your own template, don't forget to change the Default Recipe Template setting if you want that template to be the new default for your recipes.

Please read the official tutorial to learn more details on how to use this tool: Template Editor.


Change the bullets color of TinySalt Recipe Template

When using the TinySalt Recipe Template, the bullet color is the Accent Color of the website (the accent color setting is located in the WordPress Customizer > General > General Colors).

The bullet specifically refers to:

  • The check mark symbols of "Equipment" and "Ingredients".
  • Step numbers of "Instructions".
Bullets in the recipe card
Bullets in the recipe card

Because the accent color uses advanced CSS code, it cannot be changed through the WP Recipe Maker Template Editor. If you want to change the bullet color in the recipe card to a color other than the accent color, please add the following simple CSS code:

.wprm-recipe {
	--primary-color: #4fd675;
}

You can change the value of "--primary-color" to any other color code you like.

Please check this chapter to know how to add custom CSS to your website: Add Additional CSS.

13. Newsletter Signup Form

13.1 Setup Newsletter Signup Form

TinySalt theme supports creating subscribe form with the plugin MailChimp for WordPress. It is one of our recommended plugins when installing the theme.

After installing and activating the plugin, please follow the steps below to setup the plugin:

Step 1 - Enter MailChimp API

Please make sure you have installed and activated the plugin. Then get to the settings page of the plugin, and enter your MailChimp API key.

Enter MailChimp API
Enter MailChimp API

To get your MailChimp API key, you can click on the link "Get your API key here" to get to MailChimp site, log into your MailChimp account, and create a key.

Get MailChimp API Key
Get MailChimp API Key

After entering your MailChimp API key, you will find the "Your Mailchimp Account" option, and your Mailchimp lists will be displayed.

Connect to your MailChimp account and get your MailChimp lists
Connect to your MailChimp account and get your MailChimp lists

Step 2 - Create the Newsletter Signup Form

Please go to MC4WP (MailChimp for WP) > Form to create and edit your Newsletter Signup Form. If you have imported a demo of the theme, then you have imported this form, and you can edit the form title and content.

Create the subscribe form
Create or modify the Newsletter Signup Form

You can also choose to copy the code below and paste into the form field, and then change some text to suit your website:

<p>
  Join thousands of TinySalt subscribers and get our best recipes delivered each week!
</p>

<div class="fields-container">
  <input type="email" name="EMAIL" placeholder="Your Email Address" required="">
  <input type="submit" value="Subscribe">
</div>

<p>
  <label>
    <input name="AGREE_TO_TERMS" type="checkbox" value="1" required=""> I have read and agree to the <a href="#" target="_blank">terms & conditions</a>.
  </label>
</p>

 

If you want to add more fields to the form, for example, "First Name", please wrap the newly added form field by using <div class="fields-container">. Then the form code will look like this (you can copy the following code and paste into the form field and then adjust the content):

<p>
  Join thousands of TinySalt subscribers and get our best recipes delivered each week!
</p>

<div class="fields-container">
  <input type="text" name="FNAME" placeholder="First Name" required="">
</div>

<div class="fields-container">
  <input type="email" name="EMAIL" placeholder="Your Email Address" required="">
  <input type="submit" value="Subscribe">
</div>

<p>
  <label>
    <input name="AGREE_TO_TERMS" type="checkbox" value="1" required=""> I have read and agree to the <a href="#" target="_blank">terms & conditions</a>.
  </label>
</p>

Step 3 - Select a list for the subscribers

When editing a form, please click on the "Settings" tab and find the "Lists this form subscribes to" option, make sure you have selected at least one list.

Select at least one list
Select at least one list

13.2 Add Newsletter Signup Form in sidebar (widget area)

On your site admin panel, please go to Appearance > Widgets. On the page you can see all of the available widgets are listed at the left side of the page. Find the widget "MailChimp Sign-Up Form", drag and drop it into a widget area, or click on the widget and choose a widget area to put it in.

MailChimp Sign-Up Form Widget
MailChimp Sign-Up Form Widget

13.3 Add Newsletter Signup Form to homepage

You can add the newsletter signup form to your homepage (only for Multi-content Homepage" - find out more).

Please go to Customizer > Home Page > Home Widgets Area 1(2) > Home Widgets, click on the button "Add a Widget", then click on "MailChimp Signup Form". And you can tweak the home widget's colors, background, and more styles.

The detailed instructions can be found in this sub chapter: Home Widget - MailChimp Signup Form.


Please open the customizer and navigate Popup Signup Form. There you can enable the popup signup form, and then customize the style.

Please note: the "Show Popup Signup Form Once Per Session" feature is a new feature added in TinySalt v1.9.0.

Popup Newsletter Signup Form
Popup Newsletter Signup Form

Please open the customizer and navigate Site Footer > Newsletter Signup Form and then check "Display Signup Form" and select a form. The newsletter signup form will be displayed in the site footer on all pages.


13.6 Add Newsletter Signup Form after the content of each single post

Please open the customizer and navigate Single Post > After the Post > find Display Newsletter Signup Form, check the option and more options for the form style will be displayed.

Signup Form after the content of each single post
Signup Form after the content of each single post

13.7 Mailchimp for WordPress Documentation

When you encounter problems when setting up or using this plugin, you may like to check Mailchimp for WordPress Knowledge Base.

14. WooCommerce

14.1 Installation & Setup

Install WooCommerce

First of all, you need to install and activate the free plugin WooCommerce. Please read WooCommerce official documentation to know how to install and use this plugin.

Set up the Shop page

Upon activating the plugin, you are prompted with a Setup Wizard. We strongly advise following these steps, as it takes you through initial setup.

When finishing setup, WooCommerce creates the following 4 new pages:

  1. Shop – No content required.
  2. Cart – Contains [woocommerce_cart] shortcode and shows the cart contents
  3. Checkout – Contains [woocommerce_checkout] shortcode and shows information such as shipping and payment options
  4. My Account – Contains [woocommerce_my_account] shortcode and shows each customer information related to their account, orders, etc.

If you want to set the Shop page to another page:
To change the setting of the Shop page (the products index page), on your site dashboard, please go to WooCommerce > Settings > Products tab > Display tab, there you can find the option Shop Page, select what page you want to be the default shop page (you can choose the shop page created by WooCommerce, or create a new page and choose it). Please check WooCommerce official documentation Configuring WooCommerce Settings about this part.

Import WooCommerce Dummy Content

Right after installing WooCommerce you may find you have an empty store. There are no products, orders, reviews, and more by default. You can start to create your own products, or perhaps you’d like to see what sample orders and products look like, then you can choose to import some dummy content. Please check this article Importing WooCommerce Dummy Data to know details.

Setup your product image size

Product Images settings can be found under the Customizer, in WooCommerce > Product Images:

Product Image Size
Product Image Size

And after changing image sizes, please don't forget to regenerate your thumbnails.

Blurry Product Images?
Please read this article to know how to Fixing Blurry Product Images.

14.2 Shop Customization

After you have set up your online store and created some products, you can tweak the layout of the shop index page and single product page via WordPress customizer. Please go to Customizer > WooCommerce to customize your shop pages.

15. Item Customization

15.1 Not included in item support

Please note: according to ThemeForest Support Policy, Item Customization is not included in item support:

Item support does not include services to modify or extend the item beyond the original features, style and functionality described on the item page. For customization services that will help you tailor the item to your specific requirements, we recommend contacting the author to see if they privately offer paid customisation services or checking out the great service providers on Envato Studio.

And as we don't provide any customization service, when you need help with item customization, we recommend hire a developer to do the customization work for you. And you can check Envato Studio – there are many developers providing theme customization service. You can search with keywords “Theme Customization” to find the suitable developers for your project.


15.2 Additional CSS

Sometimes you might like to add some custom CSS to your site to personalize some elements' styles. In the customizer, please locate to Additional CSS sub section and add your custom CSS code. Like the example showing in the screenshot below:

Add custom CSS to your site
Add custom CSS to your site

This is a default feature of WordPress since WordPress v4.7. If you can’t find Additional CSS sub section in your customizer, then it means your WordPress version is lower than 4.7, please update your WordPress to the latest version.

And after adding custom CSS code, if you don't see any changes, please clear your site cache and your browser cache, then refresh the pages and check again.


15.3 Child Theme

If you are going to write custom code for the theme, please use Child Theme.

A child theme is a theme that inherits the functionality and styling of the parent theme. Child themes are the recommended way of modifying an existing theme.

Please download the whole package of TinySalt theme (not just the installable WordPress theme zip file), unzip it and you will find WordPress Child Theme > tinysalt-child.zip. Install the parent theme first, then install the child theme, and activate the child theme.

Then you can change code or write your own custom styles for the theme in the child theme files. Later when you need to update the theme, just update tinysalt.zip (the parent theme), so your custom code changes will not be overwritten (because they are all in the child theme).

You may like to read more regarding the child themes on official WordPress codex page: https://codex.wordpress.org/Child_Themes.

Please note: Writing custom code for your child theme is related to Item Customization which is not included in the support we could provide. More details can be found here.

15.4 Copy the customization made in the parent theme to the child theme

Since WordPress treats the parent theme and the child theme as 2 different themes, based on WordPress logic, it cannot automatically inherit customizer settings.

Therefore, if you need to switch to the child theme after using the parent theme for a while and keep all the customizations made in the parent theme, please follow the steps below.

You can use this plugin Customizer Export/Import to export the customizer settings of the parent theme, and then import the data to the child theme (or vice versa).

Here is an example of exporting the parent theme customizer settings and importing them to the child theme customizer:

  1. Please make sure you are currently using the TinySalt parent theme. Then install and activate the plugin Customizer Export/Import.
  2. Open the customizer, you will find a new section "Export/Import" in the customizer. Click the "Export" button to export the customizer settings of the TinySalt parent theme. You will get a file called "tinysalt-export.dat".
    Export the customizer settings of the TinySalt parent theme
    Export the customizer settings of the TinySalt parent theme
  3. Please close the customizer, and go back to your website dashboard.
  4. Now, please switch to (activate) the child theme, then open the customizer, go to "Export/Import" section, and then import the "tinysalt-export.dat" file. Done.
    Import the customizer settings
    Import the customizer settings

After switching to the child theme, if you find that menus have disappeared, please reassign the menus to the menu locations.

16. Shortcodes

Currently we have provided 13 shortcodes for content:

  • Author List - Display authors of your site. 5 layouts to choose from. And can show all authors or choose by name/role.
  • Drop Caps - Style the first letter of a selected paragraph. 5 styles to choose from.
  • Highlights - Select some words to add marker pen highlight effect. 2 styles to choose from.
  • Tweet It - Select content and allow readers to tweet the sentence by one click. Selected content can be inline or a whole paragraph. But please keep it short because Twitter only allows 140 charcaters.
  • Row - Create column layouts on your pages/posts. You need to wrap the column shortcodes within row shortcodes.
  • Column - Create column layouts on your pages/posts. This shortcode allows to add a column into an existing row easily.
  • Button - Add buttons. 4 different sizes. Unlimted colors.
  • Divider Line - Add divider lines. You can choose line's style, size and color.
  • Tabs - Create a single content area with multiple panels, each associated with a header in a list.
  • Tab - Add a single tab into an existing tabs block. You need to wrap the tab shortcodes within tabs shortcodes.
  • Accordions - Displays collapsible content panels for presenting information in a limited amount of space.
  • Accordion - Add a single accordion into an existing group of accordions. You need to wrap the accordion shortcodes within accordions shortcodes.
  • Video Block - Display an image with a video play button on it. Click the play button to pop up the video.

To add shortcodes into content, when edit a post or a page, click on the Add Shortcode button above the editor.

Add Shortcode Button
Add Shortcode Button

Then choose which shortcode you'd like to add in the popup panel, then choose which style of this shortcode you want to use.

Shortcode Panel
Shortcode Panel

For example, if you'd like to insert a shortcode of drop cap, you can select a paragraph, and then click on the "Add Shortcode" button to open the shortcodes panel, then click on "Drop Caps", there you will see the options you can choose for a drop cap. Click on "Insert Shortcode" button to wrap the selected content with this shortcode.

Shortcode Settings for Drop Caps
Shortcode settings - Drop Caps

The shortcode for drop caps will look similar to this:

Shortcode for Drop Caps
An example of the shortcode of drop cap.

Please note: most of the shortcodes have an opening tag and a close tag and text content needs to be put between them. Please see below:

[lo_drop_caps] Content goes here. [/lo_drop_caps]

Or,

[lo_button size="large" url="#"] Contact Us [/lo_button]

The shortcodes for Author List and Divider Line don't have a close tag because you don't need to add any text content for these 2 shortcodes.

17. Gutenberg Ready

17.1 About Gutenberg

Gutenberg is the new editor of WordPress core.

If you are new to Gutenberg, you may like to read this doc first.

How to get Gutenberg?

  • Gutenberg is added into WordPress core since WordPress 5.0. You can update your WordPress to the latest version.
  • If you are not going to update your WordPress, you can download and install Gutenberg Plugin version.
  • If you also want to keep the Classic Editor, you can download its plugin version.

Theme built-in features + Gutenberg

Because there are many differences from the Classic Editor, some theme built-in operations also change in the new editor. Please continue reading for more details.

Please note: Gutenberg is still improving (fast and frequently), its code/logic may change in a newer version. Therefore, sometimes new issues may arise after updates. We will pay close attention to it and we will be grateful for any problem report.


17.2 Theme Built-in Galleries: Slider & Justified Gallery

TinySalt theme built-in image galleries - Slider Gallery & Justified Gallery have been converted into Gutenberg Blocks.

Let's take the Justified Gallery Block for example:

Step 1 - When adding a block, find Theme Blocks, click the Justified Grid Gallery to add it to the content area.

Theme built-in Justified Gallery Block in Gutenberg Editor
Theme built-in Justified Gallery Block in Gutenberg Editor

Step 2 - Then you will see the block has been added. When selecting this block, the settings for this gallery will show in the right sidebar. Click on the "Media Library" button to open the Media Library where you can create a new gallery.

Justified Gallery Block Settings
Justified Gallery Block Settings

Step 3 - In the Media Library panel, you can upload new images, or select some existing images, and then click "Create a new gallery" button.

Select some images to create a gallery
Select some images to create a gallery

Step 4 - Then you can edit this gallery: reorder images, remove images, add captions, add new images into this gallery. Then click "Insert gallery" button.

Edit a gallery
Edit a gallery

Step 5 - Now the gallery can be previewed in Gutenberg.

Justified Gallery Block preview in Gutenberg Editor
Justified Gallery Block preivew in Gutenberg Editor

It is similar when adding a Slider Gallery:

Slider Gallery Block is added in Gutenberg Editor
Slider Gallery Block is added in Gutenberg Editor
Slider Gallery Block preivew in Gutenberg Editor
Slider Gallery Block preivew in Gutenberg Editor

17.3 TinySalt Single Post/Page Options

In the Classic Editor, TinySalt Single Post/Page Options are meta boxes which were displayed below the post editor. We have also redesigned these settings to fit in the Gutenberg UI - Sidebar. So, if you edit a post/page in Gutenberg, you can find the Single Post/Page Options in the editor sidebar.

For example, when editing a post in Gutenberg editor, please click on the "Theme Settings" toggle button to display the Single Post Options. (When editing a Page, the "Theme Settings" will show Single Page Options.)

Single Post Options
TinySalt theme Single Post/Page Options integrated to Gutenberg Sidebar

The options are organized into groups, click on each group heading to expand the group and show its settings.

Please make sure the "star" icon is enabled to pin Theme Settings toggle button to Gutenberg Toolbar:

Theme Settings toggle button - Pin to Toolbar
Theme Settings toggle button - Pin to Toolbar

If the "Theme Settings" is unpinned from the toolbar and you cannot find it, please click the "Show more tools and options" icon, then you can find "Theme Settings" in "Plugins".

Theme Settings toggle button - Pin to Toolbar
Theme Settings toggle button - Pin to Toolbar

17.4 Post Format Media

Video in Post Header

When you are editing a post, you can insert video anywhere in the content of the post. But if you want the video to be displayed at the top of the post, such as the two examples (video post 1 / video post 2) shown on our demo site, please follow the steps below to set it up:

  1. When editing a single post, please find the "Format" option and select Video.
  2. Click the hamburger button in the upper right corner, and find "Format Settings".
  3. You can then select the video in the media library or paste the video embed code from YouTube or Vimeo.
Set video for Video Post Format
Set video for "Video" Post Format

The specific location where the video appears is related to the Post Template of the post. For example, video post 1 selects "Template 1", while video post 2 selects "Template 2". To change the Post Template of a post: In the Settings sidebar, find "Template":

Change a Single Post Template
Change a Single Post Template

Gallery in Post Header

When you are editing a post, you can insert a photo gallery anywhere in the content of the post. But if you want the gallery to be displayed at the top of the post, such as the two examples (gallery post 1 / gallery post 2) shown on our demo site, please follow the steps below to set it up:

  1. When editing a single post, please find the "Format" option and select Gallery.
  2. Click the hamburger button in the upper right corner, and find "Format Settings".
  3. Then you can select multiple images from the media library and add them to the gallery.
Set gallery for Gallery Post Format
Set gallery for "Gallery" Post Format

The specific location where the gallery appears is related to the Post Template of the post. For example, gallery post 1 selects "Template 3 + Right Sidebar", while gallery post 2 selects "Template 2 + No Sidebar". To change the Post Template of a post: In the Settings sidebar, find "Template":

Change a Single Post Template
Change a Single Post Template

17.5 Theme Shortcodes are converted to Blocks

The theme built-in shortcodes have been converted into Gutenberg Blocks.

The following 8 shortcodes can be founded in "Add Block" > "Theme Blocks".

  • Author List
  • Divider Line
  • Theme Button
  • Tweet It (paragraph)
  • Tabs
  • Accordions
  • Video
Theme Shortcodes are converted to Gutenberg Blocks
Theme Shortcodes are converted to Gutenberg Blocks

The following 3 shortcodes are integrated with Gutenberg built-in block: "Paragraph".

  • Drop Caps
  • Highlight
  • Tweet It (inline)

Drop Caps - when editing a paragraph, enable the "Drop Cap" option, then select a style from "Drop Caps Settings" drop down list.

Drop Caps shortcode in Gutenberg editor
Drop Caps shortcode in Gutenberg editor
Drop Caps Settings
Drop Caps Settings

Highlight & Tweet It (inline):

Highlight & Tweet It (inline) shortcode in Gutenberg editor
Highlight & Tweet It (inline) shortcode in Gutenberg editor

17.6 Home Widgets to Theme Blocks

In version 2.0, we added 3 new blocks to Gutenberg. These blocks are converted from the 3 most popular home widgets. Now you can add these stunning elements to any page/post on your website!

  • Featured Posts Slider - Users can use this block to add a beautiful slider of selected posts on any page/post.
  • Posts - Users can use this block to add selected posts to the content of any post or page.
  • Featured Category - Users can display the featured categories on any page/post.
The 3 most popular Home Widgets converted to Theme Blocks
The 3 most popular Home Widgets converted to Theme Blocks

The options of each block are very intuitive and basically consistent with the home widgets.

18. Translation

When working with TinySalt theme, you can translate everything to any language, and you can also make a bilingual/multilingual site.

  • If you need to translate your site, and your site only needs to use one language, please continue reading this chapter.
  • If you are going to make a bilingual/multilingual site, please check the next chapter.

You can use Poedit or Loco Translate to translate the theme text. When translating the recipe card, please check this sub-chapter.

Table of Contents:


18.1 Translating Theme with Poedit

TinySalt theme is translation ready. We have included .pot file which can be used for translating the theme into any language.

Please use this free tool to translate: poedit. You can download the tool to your computer, and read poedit documentation to know the details about how to translate your site with the tool.

Let’s translate the text "Join the Conversation" into German as a simple example:

Step 1 – Find the .pot file

In the tinysalt theme folder, please go to languages, there you can find the "tinysalt.pot" file.

pot file location
pot file location

Step 2 – Translate text in "tinysalt.pot" file

Please download and install poedit on your computer first. Then right click the "tinysalt.pot" file and choose to open it with Poedit.app.

Or open Poedit.app first, then choose “Create New Translation” and choose "tinysalt.pot" file.

choose-pot-to-translate

Select the target language in the list, for example, "German":

Select the target language
Select the target language.

Find the text you'd like to translate, then enter the translated text into "Translation" box.

Translate text
Translate text.

When complete the translation, click “File” > “Save as”, then add "tinysalt-" as the prefix to the file name. So if the default file name is “de_DE.po”, change it to “tinysalt-de_DE.po”.

save as
Save the translation.
add-tinysalt-prefix
Add "tinysalt-" prefix to the file name.

Then you will get 2 files: “tinysalt-de_DE.po” and “tinysalt-de_DE.mo”.

Step 3 – Upload translated files to your WordPress site

Please upload the 2 files to your WordPress site via FTP. Please put the 2 files to the path “wp-content/languages/themes”, like shown in the screenshot below. You may need to create a new folder and name it “themes” if the folder doesn’t exist.

Please note: Don’t upload to wp-content > themes, the correct path is wp-content > languages > themes.

Step 4 – Switch your site language

In your WordPress dashboard, go to Settings > General > Site Language, choose the target language in the list, then save changes to let your site use the translated file.

As you can see in the screenshot below, the text "Join the conversation" of the comment section has been translated into "Tritt dem Gespräch bei":

translated text
Text has been translated.

And please note: when switch your site language, be careful with the language options. For example, if you choose “Deutsch (Schweiz)” instead of “Deutsch”, then the translated files should be named as “tinysalt-de_CH.po” and “tinysalt-de_CH.mo”. WordPress will not load “tinysalt-de_DE.po” and “tinysalt-de_DE.mo” for “Deutsch (Schweiz)” language option.

choose-site-language


18.2 Translating Theme with Loco Translate

Alternatively, you can install this third-party plugin on your website and translate the theme text directly from your website dashboard: Loco Translate.

Please read the plugin's documentation for the detailed user guide:

Get started

When using Loco Tranlate, on your website dashboard, please go to "Loco Translate" > "Themes" > find "TinySalt" (or "TinySalt Child", depending on which theme is activated). Click on "TinySalt" then you will be able to add a new language, or edit the translation of an exisiting language.

translated text
Text has been translated.

Choose a location for translations

When "Initializing new translations", please find "Choose a location": you will choose where to save your translation file. (More details can be find here.)

  • Custom - Recommended. This is Loco's protected folder under "wp-content/languages/loco/" which is safe from automatic updates. If this folder doesn't exist you may need to create it and ensure it has the correct permissions.
  • System - Files saved here can be overwritten by WordPress's own language installer. If you have disabled WordPress automatic translation updates, you can select this option.
  • Author - Please do not select this option. If you select this option, your translation file will be saved in the theme folder. Every time you update the theme, all the files in the theme folder will be overwritten, which will cause your translation to be lost.
Loco translated files: Choose a location
Choose a location for Loco translated files.

"What if I choose the incorrect save location for the translations?"

You can change the location for translations. On the editor screen of a language, please click the "Relocate" tab, there you can change the location, and then click "Move Files".

Relocate your translated files.
Relocate your translated files.

Translate the strings of the theme

Once on the editor screen you'll see all the strings included in the .pot file of the theme. The basics of the editor should be fairly intuitive. Select the English string at the top and enter your translation in the pane at the bottom. You just need to enter a translation and save it.

translated text
Text has been translated.

Have questions or problems with Loco Translate?

Please kindly note: Loco Translate is a third-party plugin created and maintained by other authors (not us), when you need help with this plugin, please contact the author of the plugin. This is the support forum for "Loco Translate".


18.3 Translating Recipe Card

To translate text in the recipe card, please find the "wp-recipe-maker.pot" file included in the WP Recipe Maker plugin's folder. Please read this tutorial for more details: Translating text in the WP Recipe Maker plugin.

Please note the following:

Sync to the latest version of the "wp-recipe-maker.pot" file:

The "WP Recipe Maker" plugin already contains translation files files for some languages. Therefore, when you switch the site language from English to your language, you may find that most of the text in the recipe template/card will be translated automatically.

However, there might be some new text added in updates of the plugin, and these new text haven't been translated and included in the plugin, so you need to translate these text manually. You can use the "Loco Translate" plugin to merge your translations into the translation files provided by the plugin.

When using Loco Tranlate, on your website dashboard, please go to "Loco Translate" > "Plugins" > find "WP Recipe Maker". Click on "WP Recipe Maker", then you will see the translation files provided by the plugin. And you can add a new language, or edit the translation of an exisiting language.

The translated files included in WP Recipe Maker
The translated files included in WP Recipe Maker

In the screenshot above, you can see that the "Translation Progress" of some languages is "100%", but there may still be some new texts that have not yet been translated and require you to translate them manually.

For example, click "German". Then you will see this notification: "Debug: Translations don't match template. Run sync to update from wp-recipe-maker.pot". Please click on the "Sync" button.

Run sync to update from wp-recipe-maker.pot
Run sync to update from wp-recipe-maker.pot

Then you can add new translations to the translation file.

"Diets" cannot be "translated" with the free version of WP Recipe Maker

There are some recipe meta created with the "WP Recipe Maker" plugin, such as "Courses", "Cuisines", "Keywords", etc. When translating the recipe cards, you can add new items for a meta in your language. For example, you can add Französisch ("French" in German") for the "Cuisines".

However, when using the free version of "WP Recipe Maker", it is not possible to add new items to "Diet". So the items in "Diet" will always be in English. To know the version of the plugin required to add new items to "Diet", please contact the author of "WP Recipe Maker".


18.4 Use Loco Translate to change some text (instead of translating)

You can use Loco Translate to change some text instead of translating it.

For example, if you'd like to change the text of the load more button from "Load More Posts" to "Load More Recipes" (from one English word to another English word), please follow the steps below:

  1. Install and activated the third-party plugin: "Loco Translate". You can read this subchapter of the documentation for the basics about this plugin.
  2. You can check and confirm the language used on your website by navigating to "Settings" > "General" > "Site Language". For example, our website is not a multilingual website and the main language is "English (United States)".
    Check and confirm the site language
    Check and confirm the site language.
  3. On your website dashboard, please go to "Loco Translate" > "Themes" > find "TinySalt". Click on "TinySalt" then you will be able to add a new language. So we add "English (United States)", and then start translating.
    Create a new language
    Create a new language.
  4. You can enter a keyword to search. For example, we enter "Load More Posts" and search.
  5. Select the source text at the top, and enter your "translation" in the pane at the bottom: "Load More Recipes".
    Change text
    Change text.
  6. Save.
  7. You can repeat these steps to change other text.

19. Bilingual / Multilingual - Polylang

If you are going to create a bilingual or multilingual website, we recommend using Polylang or WPML.

The differences between these 2 plugins:

  • Polylang is a free plugin. WPML is a premium (paid) plugin (and you need Multilingual CMS version).
  • If using Polylang, you need to translate theme strings (included in the .pot file) by using Poedit or Loco Translate. If using WPML, all the text can be translated by using WPML.
  • When using Polylang, if you need to make your WooCommerce shop to be multilingual, you need to purchase their Polylang for WooCommerce Extension. When using WPML, the feature is already included when you purchasing WPML.
  • And there may be some other differences.

In this chapter, we will provide simple explanations and points to explain how to make your WordPress site to be a bilingual/multilingual site when you are using TinySalt theme and the third-party plugin Polylang.

If you want to use WPML, please read the next chapter.

Please note: because Polylang is a third-party plugin, so we will only provide links to this plugin’s official documentation. We will not be able to provide details about how to use this plugin, or provide support service for this plugin.

Step 1 – Basic Knowledge

There are several different types of content that need to be translated separately:

  • Theme Strings: they are strings written in the theme code. Please continue reading to know more information in Step 2.
  • Dynamic content: like posts, pages, categories, and user defined strings. To translate those content, you can use the Polylang plugin. Please continue reading to know more information in Step 3.
  • Special – Home Widgets: Please continue reading to know more information in Step 4.
  • Newsletter Signup Form: Please find the details in Step 5.
  • Recipe Cards: Please find the details in Step 6.
  • Recipe Template: Please find the details in Step 7.
  • Recipe Index Page: Please find the details in Step 8.

Resources of Polylang:

Step 2 – Translate Theme Strings

Theme Strings: they are strings written in the theme code (included in the .pot file), for example, "Join the Conversation" (Comments Section Title) on each single post or page. To translate these strings, please follow this guide: Translating the theme.

Please make sure you have translated all the Theme Strings you need.

Please note: if you have imported demo data, then some strings are entered into the customizer during the demo importing process, then you will need to translate these strings by Polylang. Please see more details in "Step 3 – 2. Translate User Defined Strings".

Step 3 – Translate Dynamic Content with Polylang

  1. Create Languages:
    After installing Polylang, please create languages. For example, if your site will have 2 languages, English and German, you will need to create 2 languages, and set one of them to be the default language. Please read this article: https://polylang.pro/doc/create-languages/.
  2. Translate User Defined Strings
    Polylang allows you to translate user defined strings such as the site title, the tagline, or the widget titles. Moreover themes and plugins can allow you to translate their options here.
    To translate User Defined String, you must use the Strings Translations Table of the Polylang plugin.
    Please read this article: https://polylang.pro/doc/strings-translations/

    There are 2 types of User Defined String:

    • Strings entered with WordPress core features: such as the site title, the tagline, or the widget titles.
    • Strings entered with theme and plugins. Please see more details below:
    Theme Options Strings: They are strings entered in the theme options (customizer). When customizing your site with TinySalt theme, you will be able to enter many custom text in the customizer. To translate any custom text you entered in the customizer you need to use Strings Translations table of the Polylang plugin.

    To locate Strings Translations Table: on your site admin panel > Languages > Strings Translations.

    For example, you can change the text of "Read More" buttons to "Continue Reading", or you can change the related posts section's title "Other Posts You May Enjoy" to any other text like "Read more articles in this category". After you have entered/modified custom text in the customizer, you can find these text shown in the Strings Translations Table.
  3. Create Menus
    You have to create one menu per language and save them. Please read this article: https://polylang.pro/doc/create-menus/.
  4. About Widgets
    For all widgets you have now the possibility to choose to display it for all languages (default) or only one language. If you select "All languages" you will have the possibility to translate the title in the Strings translation option.
    Please read this article: https://polylang.pro/doc/widgets/.

    Please note: for custom widget TinySalt Category, you have to create one widget per language, because you have to choose different categories for each language.
  5. Translating pages, posts, categories and tags
    Please read this article: https://polylang.pro/doc/translating-pages-posts-categories-and-tags/.

Step 4 – Translate Home Widgets

TinySalt theme contains a built-in homepage drag and drop builder in the customizer to create a "Multi-content Homepage". Please read our documentation to know more details about it: Multi-content Homepage.

When creating a bilingual/multilingual site, you will need to create different home widgets for different languages.

For example, on the homepage, we have a home widget displaying the most viewed posts, this home widget has a title "Most Popular".

  1. Expand this home widget, you can find the option "The widget is displayed for:" at the bottom of its settings panel. Choose "English".
  2. Add a new home widget > "Posts", choose the same options as the home widget "Most Popular". Change the home widget title to "Am beliebtesten" ("Most Popular" in German).
  3. Find the option "The widget is displayed for:" at the bottom of its settings panel. Choose "Deutsch".
  4. Save changes and publish.

Step 5 – Translate Newsletter Signup Form

This is a new feature we added since v1.5. Please make sure you have updated the theme and required plugin to the latest version first.

On your website dashboard, please go to Appearance > TinySalt Basic Settings, you will find the MC4WP Multilingual Manager for Polylang. This option will show when Polylang and MC4WP are installed and activated.

  • If you are using the premium version of the "MailChimp for WordPress" plugin, you can create multiple forms. Therefore, please create different forms for each language, and then select a different form for each language on this page.
    Choose a form for a language
    Choose a form for a language
  • If you are using the free version of the "MailChimp for WordPress" plugin, you can only create one form. Then, please click the Translate the Form link to translate this form into another language.
    Translate the form into another language
    Translate the form into another language
    You will be redirected to the form edit page. You just need to edit the form title, content and messages into the target language. And save the changes.
    Translate the form into another language #2
    Translate the form into another language #2

Step 6 – Translating Recipe Cards

Please note: WP Recipe Maker works like this: the recipes created are stored under "WP Recipe Maker" section in sidebar of your WordPress dashboard. These recipes will not display on your website frontend directly. You need to insert a recipe to a post, then this recipe will display on the page of this single post.

Therefore, please create separate recipes for other languages, and insert them into the posts. For example, if there is a recipe "Almond Pastry Cookies" and it has been inserted into the English post "My secret Cookie Recipe", then we will add the German version of the recipe and the post.

  1. We need to create a new recipe in German: "Mandelgebäckplätzchen". We enter all the content in German. (Related tutorial: Creating a recipe.)
  2. Translate the post "My secret Cookie Recipe" (by following the instructions: Translating pages and posts).
  3. If the English recipe card "Almond Pastry Cookies" is in this German post, please delete it from the content.
  4. Insert the German recipe card "Mandelgebäckplätzchen" into this German post.

Step 7 – Recipe Template for a Multilingual Blog

WP Recipe Maker provides a tutorial, please read it for the detailed instructions: How to use WP Recipe Maker for a multilingual blog.

Step 8 – Translating Recipe Index Page

After creating and setting up the Recipe Index page for the main language (Related chapter: how to create Recipe Index), please follow the steps below to translate the Recipe Index page into other languages:

  1. Please translate your recipe posts first. Please follow this Polylang Official Tutorial to translate posts.
  2. Please also make sure that you have translated the post categories into different languages. Please follow this Polylang Official Tutorial to translate categories. For example, if there is an English category "Appetizer", you need to translate it to German "Vorspeise".
  3. Please assign the translated posts to the translated categories. For example, if the English post "Almond Pastry Cookies" is assigned to the English category "Appetizer", then after you translated this post into German "Mandelgebäck Plätzchen", you need to assign this German post to the German category "Vorspeise".
  4. Then, please navigate to Pages, find the recipe index you created for the main language, click the "+" button to add a new translation of this page. Please still refer to this Polylang Official Tutorial to operate.
  5. Done. Now you will have the translated page(s) of the Recipe Index page.

20. Bilingual / Multilingual - WPML

In this chapter, we will provide some explanations and points to explain how to make your WordPress site to be a bilingual/multilingual site when you are using TinySalt theme and the third-party plugin WPML.

If you would like to know the differences between Polylang and WPML, please check this chapter.


20.1 What you will need

  • TinySalt theme (version 1.5 or above)
  • A recent version of WPML, including the WPML Multilingual CMS, WPML String Translation and WPML Media add-ons.

20.2 Essential Resources


20.3 How to Translate

Table of Contents:


Step 1 – Getting started

  1. Install and activate TinySalt theme, the required plugin and recommended plugins (please refer to TinySalt Installation).
  2. Install and activate the main WPML components (Please see WPML Getting Started Guide for complete reference):
    • WPML Multilingual CMS (the core plugin)
    • String Translation
    • Media Translation
  3. Set up WPML. When you first activate WPML a Setup Wizard will help you specify the essential settings required to prepare your site for multilingual content. Follow the wizard you can:

Step 2 - Translating pages and posts

When you have created some pages and posts on your website, you can translate them into other languages.

For example, if you are going to translate a page. On your website dashboard > "Pages" > in the "All Pages" list, you will see these icons (translation controls) in the "Language" column. Or, you will find the "Language" box when editing the page.

List of Pages with translation controls
List of Pages with translation controls
WPML Language box when editing a page
WPML Language box when editing a page

Click on the "+" button of the language you are about to translate the content to. For example, "German". This creates a new German translation for it. Then enter the content written in German. And publish the page.

If you need to updating the translation of a page or post, please go to "Pages" or "Posts". For the translated pages or posts, the "+" icon will change to a pencil icon. Click on the pencil icon if you need to modify your translation.

Click on the Pencil icon to updating the translation
Click on the "Pencil" icon to updating the translation

Step 3 - Translating post categories and tags

Translating Post Categories:

  1. Navigating to Posts > Categories, as an example we will create a category and name it "Vegan", also upload a category image for it, and click on the Add New Category button. (Please refer to Edit a category.)
  2. When editing this category, find the Language box, and click on the "add" link to add the translation of the category.
    Add the translation of the category
    Add the translation of the category
  3. Fill the Name and Slug fields with the category translation, and also choose the same category image for it, and then click on the Add New Category button.

Translating post tags

Translating post tags is just as same as translating categories. The only difference is you only need to enter tag Name and Slug.

Taxonomy Translation

You can also translate post categories and tags via WPML Taxonomy Translation.

  1. Navigating to WPML > Taxonomy Translation. Select Tags (or Categories) from the Select the taxonomy to translate drop-down menu. Then click on the "+" icon or the pencil icon to translate a tag (or a category).
    Taxonomy Translation
    Taxonomy Translation
  2. The Term Translation box will pop up. Enter the translation and click on "Save" button.
    Term Translation
    Term Translation

Step 4 - Translating texts coming from the theme & WordPress Core

The following texts need to be translated on the String Translation screen. (Read more about Theme and Plugin Localization.)

  • Theme Strings - They are strings written in the theme code (included in the .pot file), for example, "Join the Conversation" (Comments Section Title) on each single post or page.
  • Theme Options Strings - They are strings entered in the theme options (customizer). When customizing your site with TinySalt theme, you will be able to enter many custom text in the customizer. To translate any custom text you entered in the customizer you need to use String Translation screen of WPML.
  • Strings entered with WordPress core features - Such as the site title, the tagline, widgets.

By default, WPML doesn’t scan or load these translation files into the database. Because of this, you will not be able to find these strings on the WPML → String Translation page. If you want to translate or edit these strings, you first need to scan the translation files of the related theme or a plugin.

1 - Scanning the theme

To translate texts coming from the theme and plugins, you need to scan them first. Go to the WPML → Theme and plugins localization page and find Strings in the themes box. Select "TinySalt" and click the Scan selected themes for strings button.

Scanning the theme
Scanning the theme

2 - Translating the texts

Please navigate to WPML → String translation page. Then you can:

  • Select "TinySalt" in the Select string within domain dropdown list.
  • If you have imported a demo, or you have changed any settings in the customizer, please select "admin_texts_theme_mods_tinysalt" in the Select string within domain dropdown list to find the text added in the customizer.
  • Or, you can enter some keywords copied from the texts you want to translate into the Search for: field and search.
Select string within domain
Select string within domain
Select string within domain - for text added in customizer
Select string within domain - for text added in customizer

For example, let's translate the "Load More Posts" button. The original text is entered in the customizer.

  1. Navigate to WPML → String translation. Enter "load more" and search. You will see the search result as shown below, then click on translations.
    Search for the string
    Search for the string
  2. Add your translated text. Then choose the Translation is complete option and click Save.
    Translate the string
    Translate the string

Step 5 - Translating TinySalt's Home Widgets

TinySalt theme contains a built-in homepage drag and drop builder in the customizer to create a "Multi-content Homepage". Please read our documentation to know more details about it: Multi-content Homepage.

When creating a bilingual/multilingual site, you will need to create different home widgets for different languages.

For example, on the homepage, we have a home widget displaying the most viewed posts, this home widget has a title "Most Popular".

  1. Expand this home widget, you can find the option "Display on language" at the bottom of its settings panel. Choose "English".
  2. Add a new home widget > "Posts", choose the same options as the home widget "Most Popular". Change the home widget title to "Am beliebtesten" ("Most Popular" in German).
  3. Find the option "Display on language" at the bottom of its settings panel. Choose "Deutsch".
  4. Save changes and publish.
Home Widget - Display on language
Home Widget - Display on language

Step 6 - Translating Newsletter Signup Form

1. Installing an Add-on

Please download and install this add-on: MailChimp for WordPress Multilingual. Please go to WPML and log into your account, then please go to "Download" page to download the MailChimp for WordPress Multilingual add-on. And then upload it to your website, install and activate it just as you would any other WordPress plugin.

2. Translating the form

Please read the WPML Offical Documentation: MailChimp for WordPress Multilingual.


Step 7 - Translating Recipes & Recipe Template

Translating Recipes

Please note: WP Recipe Maker works like this: the recipes created are stored under "WP Recipe Maker" section in sidebar of your WordPress dashboard. These recipes will not display on your website frontend directly. You need to insert a recipe to a post, then this recipe will display on the page of this single post.

Therefore, please create separate recipes for other languages, and insert them into the posts. For example, if there is a recipe "Almond Pastry Cookies" and it has been inserted into the English post "My secret Cookie Recipe", then we will add the German version of the recipe and the post.

  1. We need to create a new recipe in German: "Mandelgebäckplätzchen". We enter all the content in German. (Related tutorial: Creating a recipe.)
  2. Translate the post "My secret Cookie Recipe" (by following the instructions: Translating pages and posts).
  3. If the English recipe card "Almond Pastry Cookies" is in this German post, please delete it from the content.
  4. Insert the German recipe card "Mandelgebäckplätzchen" into this German post.

Translating Recipe Template

WP Recipe Maker provides a tutorial, please read it for the detailed instructions: How to use WP Recipe Maker for a multilingual blog.


Step 8 - Translating Menus

WPML lets you translate WordPress menus and create different menus per language. You can translate menus manually, or have WPML synchronize menu content. Please check Translating Menus for more details.


Step 9 - Translating widgets

WPML lets you easily translate your Widgets via the String Translation screen. This requires that the WPML String Translation module is installed. The module is available in the Multilingual CMS version.

Besides translating widgets, WPML allows you to display different widgets for different languages.


Step 10 - Language Switcher

A language switcher allows visitors to select the language in which they want to read your content. WPML lets you add a language switcher in different ways: in a menu, as a widget, or in the site’s footer. You can also use it to show links above or below your posts, offering them in other languages.

To add and customize language switchers, go to WPML → Languages in the WordPress dashboard, then you will find the following settings on this page:

  • Language switcher options
  • Menu language switcher
  • Widget language switcher
  • Footer language switcher
  • Links to translation of posts
  • Custom language switchers
WPML - Language Switcher Options
WPML - Language Switcher Options

Each language switcher type has its own settings. This allows you full and independent control over what it includes and how it looks. When clicking on the "Pencil" icon, it will show a dialog box with settings for the menu language switcher.


20.4 Need Help for WPML

If you need help with using WPML with TinySalt theme, please head over to WPML technical forum. Before posting about issues, we recommend that you review this quick checklist:

  • Make sure you have the latest versions of the theme and of the WPML plugins, and that they are all activated. These include WPML Multilingual CMS, WPML String Translation and WPML Translation Management.
  • Check that the problem does not appear if the WPML plugins are deactivated, and it does appear when only the core WPML plugins are activated.

Please always remember to search and read WPML official documentation for more details about how to use WPML.

21. Speed & Performance

"Themes execute the presentation and styling of content, while plugins handle content creation and functionality."

- WordPress code standards and ThemeForest requirements

All WordPress websites require optimization. As the theme author, we follow the WordPress development best practices when creating our products. But the performance of the website is not determined by the theme or individual plugins.

The performance of the website is determined by the collaboration of multiple factors. Including but not limited to:

  • Your Web Hosting Plan
  • Install some necessary optimization plugins (caching plugins, image compression plugin, minify plugins, etc.)
  • Reduce external code/resources
  • Uninstall Unused Plugins
  • Optimize the content you added to your website (images, videos, etc.)
  • Server Response Time (use a fast web host and implement a CDN)
  • Google Analytics (view the solution)

In this subchapter, we will introduce some optimization methods we used on our demo site.

Please note: The following are only our general suggestions for optimizing a WordPress website when using TinySalt. Depending on the actual situation of your website and your specific needs, you may choose to skip certain steps or use other optimization methods that we have not mentioned.

There is more than one way to optimize a website.

Please kindly note:

  • The support service of the theme Does Not include providing optimization for a specific website so that it can get high scores on page speed test tools. (Because the performance of the website is not determined by the theme alone.)
  • The webmaster needs to take corresponding optimization measures for the actual environment of the site.

21.1 How to improve performance (General Suggestions)

  • The suggestions in this sub section (20.1) can help you optimize the user experience of your site: that is, when visitors visit your site, the sensory response speed of the site will be ideal.
  • If you want to get high scores on website speed test tools (such as Google PageSpeed Insights, Google Search Console, etc.), you also need to use more advanced optimization methods. This is a useful tutorial we found.

Table of Contents:

1. Please always use the latest version of the theme

In TinySalt version 1.6, we optimized the image sizes used by the theme. Using the appropriate image sizes on the page will reduce the total page size and loading time. In short, the page loads faster.

If you are using a version older than TinySalt v1.6, please follow the steps below:

If your site has been running with other themes for some time (already has content) before you switch to TinySalt, you will also need to regenerate thumbnails.


Let's take one of our demos as an example: Adaptive Masonry Home 2:

  • In version 1.5, the total page size of this homepage was 3.57MB.
  • After updating to v1.6 and regenerating thumbnails, the total page size of this homepage is 2.27MB. If we also enable the theme built-in "Lazy Loading" feature (new feature added in v1.6), and download the Instagram images to the website and optimize all image, the total page size will be reduced to 2.02MB.

And here is another example, the main demo:

  • In version 1.5, the total page size of this homepage was 9.8MB.
  • After performing the following steps, the total page size of this homepage is 3.95MB:
    1. Update the theme to v1.6
    2. Also update the required plugin "TinySalt Extension"
    3. Regenerate thumbnails
    4. Enable the theme built-in "Lazy Loading" feature
    5. Manually download the Instagram images to the website
    6. Optimize all image
Please note: What we optimized in the update is the featured image of the posts. Therefore, the main impact of this optimization is the list of posts. We cannot guarantee how much your page size can be reduced after updating the theme. It still depends on the content on your page.

2. Optimize image loading

The theme provided the following 2 optimizations for image loading:

  • Progressive Image Loading
  • Lazy Loading

To learn more about these 2 features, please check this subchapter. After enabling these 2 features, the total page size will be reduced.

Please note: Do not use multiple plugins with the same function on the same website at the same time. When the theme and multiple plugins provide the same function, conflicts may occur.

Therefore, if you are using the image loading optimizations provided by the theme, please disable the image loading optimization features provided by other plugins. If you are using the image loading optimization features provided by other plugins, please disable the image loading optimizations provided by the theme.

Please see the following details:

  • We recommend using the theme built-in "Lazy Loading" feature. Therefore, if you are using a third-party cache/performance optimization plugin which contains the "Lazy Loading" feature, please disable the "Lazy Loading" feature provided by the third-party plugin.
  • However, if you would like to use the "Lazy Loading" feature provided by a third-party plugin, please follow the steps below:
    1. Disable the third-party cache plugin first.
    2. Please disable the theme built-in "Lazy Loading" feature.
    3. Also disable the "Progressive Image Loading" feature provided by the theme.
    4. Then, reactivate the third-party cache plugin.
    5. Clear your website cache, and clear the browser cache. Then refresh the pages to check the results.

3. Downloading Instagram Images to your website to optimize

By default, when displaying your Instagram images on your website, these images are from the Instagram website and they are not stored on your website. This leads 2 problems:

  • It takes more time to load these images because they are on an external website.
  • These images cannot be optimized by the image optimized plugin installed on your website.

We added this new feature in v1.6. After updating the TinySalt theme and the required plugin "TinySalt Extension", please open your WordPress customizer, then navigate to General > Instagram > then you will find the "Download images from Instagram to my website server" button. Click the button to manually download these images to your website.

After that, you can use the image optimization plugin to optimize these image. Please continue reading the next subchapter.

4. Optimizing images

Image quality and quantity are important for a website speed & performance, and also important for user experience. You need to find a balance between them.

Before uploading your images to your website, please optimize your images first (using Photoshop or other image editing tools). Please check this article: How to Optimize Images for Better Web Design & SEO.

  • Optimal file size: The number of bytes the file takes up on your computer. This is the factor that can slow your website way down. A 15MB (megabyte) image is huge. Large images or full-screen background images should be no more than 1 MB. Most other small web graphics can be 300 KB or less.
  • Image size: The actual dimensions of your image, in pixels. As we mentioned in the Image Size subchapter, the recommended width of images is at least 1920 px when it is supposed to be a full-width image (for example, a fullwidth post slider on the homepage). If the image is not used as a full-width image, you can resize your image to a smaller size.

After uploading your images to your website, you can install this plugin to further optimize them: Smush.

5. Installing a Caching/performance plugin

You can use another cache plugin. The following is just a suggestion. Some users of TinySalt use different cache plugins and their websites work well. But the most important thing is:

  1. Please Do Not activate any cache plugins before you finish building the site.
  2. When you need to make any changes to the appearance and functionality of the site, please disable all cache plugins first.
  3. After editing, please reactivate the cache plugin, and be sure to clear the old cache files.
  4. After that, you need to clear your browser's cache. Or, use a browser that has not cached your site to browse your site to see the results.

Please install and activate this plugin: W3 Total Cache. And then please follow the instructions below:

  1. Please navigation to "Performance" > "General Settings" > Enable "Page Cache".
    W3 Total Cache Settings - 1
    W3 Total Cache Settings - 1
  2. Then also enable "Minify".
    W3 Total Cache Settings - 2
    W3 Total Cache Settings - 2
  3. And enable "Browser Cache".
    W3 Total Cache Settings - 3
    W3 Total Cache Settings - 3
  4. Navigate to "User Experience" > Check "Disable Emoji". (We chose to use the theme built-in image loading optimization features, so we did not enable the "Lazy Loading" provided by this plugin.)
    W3 Total Cache Settings - 4
    W3 Total Cache Settings - 4
  5. Then, please navigate to "Minify". Find the "HTML & XML" section, and tweak the settings as shown in the following screenshot.
    W3 Total Cache Settings - 5
    W3 Total Cache Settings - 5
  6. Find the "JS" section, and tweak the settings as shown in the following screenshot.
    W3 Total Cache Settings - 6
    W3 Total Cache Settings - 6
  7. Find the "CSS" section, and tweak the settings as shown in the following screenshot.
    W3 Total Cache Settings - 7
    W3 Total Cache Settings - 7
  8. If you are using WooCommerce, please find the "Advanced" section and add the pages related to WooCommerce to the "Never minify the following pages" box. If WooCommerce is not installed on your site, you can skip this step.
    W3 Total Cache Settings - 8
    W3 Total Cache Settings - 8
  9. Please navigate to "Browser Cache", and enable the options as shown in the following screenshot.
    W3 Total Cache Settings - 9
    W3 Total Cache Settings - 9

Please note: Since the "W3 Total Cache" plugin is installed on your website to optimize performance, so after updating the theme, please minify CSS again, and then clear the website cache. Please refer to this subchapter.


21.2 Is TinySalt a lightweight theme?

Basically, it is difficult to judge whether a theme is a lightweight theme or a heavyweight theme. Because the performance of the website is determined by the collaboration of multiple factors (see General Information about Website Performance).

We followed the WordPress development best practices when creating themes, and have optimized TinySalt theme in many ways. You can use TinySalt to create a lightweight recipe blog. But when the content of the page is very rich, the page will also become heavier.

For example, TinySalt's demo site has 12 homepage demos.

The lightest homepage is Adaptive Masonry Home 2. The total page size of this homepage is 2.02MB.

The heaviest homepage is Video Recipes 1. The total page size of this homepage is 5.22MB. There are more sections and assets (images, videos, etc.) on the page. Most importantly, it contains an auto-playing YouTube video, which seriously affects the scores.

When testing these demos in GTmetrix, the full load time of each demo is acceptable to us. In fact, because we optimized the demo site as mentioned above, the visitor experience is further optimized.


21.3 Improve Scores on Page Speed Test Tools

Actual user experience vs Web speed test tool score

After you optimize your website according to the above steps, your website speed will be ideal for website visitors.

If you want to get high scores on website speed test tools:
(such as Google PageSpeed Insights, Google Search Console, etc.) you also need to use more advanced optimization methods. This is a useful tutorial we found, please check this tutorial for the detailed explanations and instructions.

We followed the tutorial to optimize this website. The current Google PageSpeed Insights score is above 85 (see screenshot), and the GTmetrix score is B (see screenshot). Please note that we did not enable CDN. If we enable CDN as described in the tutorial, the scores will increase further.

So far, the best Google PageSpeed Insights score for this optimized website is as follows:

Please note that you can test multiple times, each test result will be different due to current network conditions.

If you need more help:

  • Since the support service of the theme Does Not include providing optimization for a specific website so that it can get high scores on page speed test tools (Why? Please click here for details), therefore, If you need more help, it is recommended that you hire an expert to optimize your website.
  • You might like to check on Envato Studio. There are some experts who provide WordPress Speed Optimization Service (Google PageSpeed, GTmetrix, etc.).

22. Need Our Support?

What is Item Support Service?

When you purchasing products from Envato Market, a supported item includes item support for 6 months from the purchase date. During those 6 months, we (as the author of the theme) are available to provide the item support services.

You may like to read more details about What is Item Support?.

What's included & What's not included in Item Support?

We can help with:

  • Answering questions about how to use the theme
  • Answering technical questions about the theme (and included third party assets)
  • Help with defects in the theme or included third party assets
  • Theme updates to ensure ongoing compatibility and to resolve security vulnerabilities

We cannot help with:

  • Item customization
  • Installation of the item
  • Issues about your web hosting, server environment, or software installed on your machine
  • Questions related to third party assets
  • Questions related to the basic use of WordPress (We have collected some WordPress Beginner Tutorials, hope this helps.)

Please check ThemeForest Item Support Policy for more details.

Please kindly note: The terms and conditions are set out by Envato exclusively, and every author must follow the rules. These rules are the same for every author and every buyer and we cannot change them selectively. Thank you for understanding.

What you should do first before asking your question?

To speed along the support request, please check by following the guide below:

  1. Make sure your site is running the latest version of WordPress.
  2. Make sure that the TinySalt theme and the required plugin "TinySalt Extension" have been updated to the latest version. Some known issues may have been fixed in an update.
  3. Update to the latest version of other plugins on your website.
  4. Check our Online Documentation first.
  5. Disable any other plugins and then check if it fix the issue.
  6. If you still cannot find a solution, please open a support ticket at Loft.Ocean Help Center.

Submitting a support request

When submitting your support request, please include the following information in as much detail as possible so that we can get more clues about your questions/problems:

  • Your website URL
  • Which version of the theme you are using
  • Detailed description of the issue or the question
  • Screenshots of the problem
  • Any notices or error messages
  • Any other information that you find useful
  • Since we have multiple products, please indicate which product your question corresponds to

And please write in English. Thanks!

How long does it take for LoftOcean support to reply to your support request?

  • We provide support for our customers Monday to Friday: 10 AM to 6 PM (UTC+10).
  • Support requests will be processed in the order received. Usually we reply to all requests within 24 hours.
  • If it is a weekend, our response time may take 48 hours or more: if you submit a support request on Friday night in our time zone, we won’t be able to see it and start working on it until the next Monday’s business hours.

We will carefully handle every user's support request. When you encounter a problem, please send us the detailed information of the problem. If we do not respond to you immediately, please don't worry, maybe it is just during our non-working hours (night or weekend), or it is because there are other users' requests in the request queue ahead of your requests.

The requests in the queue will be processed one by one. Therefore, when you submit a support request, please be sure to provide as much information as possible so that when we start to process your request, we can have enough information and provide accurate answers instead of asking for other necessary information (this will cause it to take longer to solve the problem for you).

Need to renew your support?

If you have less than 6 months remaining on a support item you’re eligible to renew your support. For more information about Item Support renewals, please see Extending and Renewing Item Support.