Fallsky WordPress Theme Documentation v1.9

1. WordPress Basics

To install Fallsky 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. Installation

2.1 Theme Requirements

Theme Requirements

To use Fallsky 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
  • 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

Detect Your Website Configuration

Since version 1.2.0, for more friendly user experience, we added a feature to detect your website configuration. If the website does not meet the minimum requirement to run Fallsky theme, the theme will not be activated, and it will display a warning message, so the user will know what happens, and what they can do.

Therefore, after installing and activating Fallsky theme on your website, if you see this warning message:

Website Configuration Warning Message
Website Configuration Warning Message

Then please update your PHP version or the WordPress version.

About PHP:

  • PHP Version - The minimum PHP version required for Fallsky is 5.2, but we recommend using PHP 5.6 or above. 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 Fallsky theme is 4.7, 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 Fallsky theme.

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

  • If you download the whole package, please unzip it, in the "WordPress Theme" folder, find fallsky.zip.
  • Or, you can download the Installable WordPress File Only - which is fallsky.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 "fallsky.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 fallsky.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 - fallsky.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 Fallsky 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 Fallsky theme, you will see the notice "This theme requires the following plugin: Fallsky Extension". It is the Fallsky Theme function extensions - including these features: post like, post sharing, gallery slider, Instagram feed and more.

Install Required Plugin
Install Required Plugin

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 Fallsky theme, activate it, then you will see a note box, it says: "This theme requires the following plugin: Fallsky Extension." Click on "Begin installing plugin" link.
    Install Required Plugin
    Install 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 "Fallsky Extension".
    Install Required Plugin
    Install Plugins - Install "Fallsky Extension"
  3. Then activate "Fallsky Extension". After installing the plugin, please go back to "Appearance" > "Install Plugins" page, then find "Fallsky Extension" in the plugin list, you will see Status: Installed But Not Activated. Please click on Activate.
    Activate Required Plugin
    Install Plugins - Activate "Fallsky Extension"

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

  • Please download the entire package which contains "All files and documentation", unzip it to get the "Fallsky" folder and open it, then go to "Plugin" to find "fallsky-extension.zip".

As mentioned above, when installing & activating Fallsky 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 Fallsky 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:

3. Updating

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

  • Step 1 - Update the theme first;
  • Step 2 - Then, please also update the Required Plugin: "Fallsky 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 will see this note while installing Fallsky theme, please click it to install and activate Envato Market plugin.

Activate Envato Market plugin
Activate Envato Market plugin
If you cannot find the note on your site admin panel – 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 a 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
Generate a personal token
Generate a personal token

There will show new tabs: Themes & Plugins (if you have purchased both themes & plugins from Envato).

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/

Update Manually

Please follow steps below when you need to update Fallsky theme manually on your site:

  1. Download the zip file of the latest version of Fallsky from ThemeForest.
  2. Extract the zip file and find fallsky.zip.
  3. Extract fallsky.zip and locate the fallsky folder
  4. Log into your website via FTP, get into the theme folder (wp-content/themes/fallsky), and upload the contents of the local fallsky folder to replace the old content in the fallsky folder on your website.

3.2 Update Required Plugin

When updating Fallsky 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: Fallsky Extension."

1. Please click on "Begin updating plugin" link to update the Fallsky Extension plugin as well.

The note for updating plugins.
The note for updating plugins.

2. After clicking on the "Begin updating plugin" link, please click on the "Update" link below "Fallsky Extension".

Update the required plugin.
Update the required plugin.

3. After the plugin updated, please click on the "Return to Required Plugins Installer" link.

The required plugin updated successfully.
The required plugin updated successfully.

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.

Activate the required plugin.
Activate the required plugin.

4. Demo Importing

Importing a demo to your site is optional for using Fallsky 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.

After installing Fallsky 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.

Demo Import
Choose one demo and click on "Import" button to import data of that demo.

It can take a couple of minutes, please wait.

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 MailChimp for WP plugin if you need a newsletter subscribe form
  2. 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.

If you still have problems when importing a demo:

We received a few issue reports about demo import from our users. Thanks to our users, we have found the cause and the solution.

On your admin panel, please go to Plugins > Installed Plugins, check if you have installed and activated the plugin "EWWW Image Optimizer" and/or "Imsanity". If so, please deactivate the plugin(s).

Deactivate this plugin before importing a demo
Deactivate this plugin before importing a demo.

Then go to Appearance > Import Demo Data and import a demo. It should work now.

If you have deactivated the plugin(s) but still cannot import a demo, please open a support ticket at Loft.Ocean Help Center and we will look into it for you.

In order to avoid future demo import problems, we have removed this third-party plugin "EWWW Image Optimizer" from our list of recommended plugins since version 1.1.0. But you can install and use this plugin after importing a demo.

5. Homepage / Front Page

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

When working with Fallsky 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, products list, call to action, newsletter signup form, and more. We call it "Multi-content Homepage".

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

  • Simple Blog
  • Multi-content Homepage + Blog
  • Multi-content Homepage Only (without Blog)
  • Static Homepage + Blog

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".
  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 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.

Multi-content Homepage Only (without Blog)

  1. On your site admin panel, go to Pages > Add New. Create 1 page1, for example, "Front Page".
  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. 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 feature 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.

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, display 3 selected posts in block layout;
  • Or, you can add some custom content here.

And there are more options to adjust the layout and style for this section.

Options for Fullwidth Featured Area
Options for Fullwidth Featured Area

What content can be featured here?

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

Pick Posts for Fullwidth Featured Area
Pick Posts for Fullwidth Featured Area

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).


Home Widgets

You can add different types of content to your homepage (only for Multi-content Homepage" - find out more) by using Home Widgets.

Please go to Customizer > Home Page > Home Main Content Area > Home Widgets, 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.

Currently there are 8 different home widgets:

  • Ad Banner
  • Call to Action
  • Custom Content
  • Featured Category
  • MailChimp Signup Form - need to install & activate the plugin "MailChimp for WP"
  • Posts
  • Product Categories - need to install & activate the plugin "WooCommerce"
  • Products - need to install & activate the plugin "WooCommerce"
Add Home Widgets to Homepage
Add Home Widgets to Homepage

Custom Class of Home Widgets

Since version 1.3.0, you can add custom class name(s) to each home widget so that you can write your own custom CSS code to control them.

When editing a home widget, you will find the new option Custom Class. Enter your own custom class name. Separate each class with space.

Add custom class name(s) to a Home Widget
Add custom class name(s) to a Home Widget

Hide Home Widgets on Desktop/Tablet/Mobile Devices

Since version 1.3.0, you can choose to hide specific home widgets at different screen sizes.

When editing a home widget, please find the new option Custom Class, then enter the following custom class name(s):

  • hide-on-mobile - this widget will be hidden on the mobile devices (screen width < 768px).
  • hide-on-tablet - this widget will be hidden on the tablet devices (screen width > 767px & < 1025px).
  • hide-on-desktop - this widget will be hidden on the desktop devices (screen width > 1024px).

You don't need to write custom CSS code for these class names, the styles have been included in the theme code.

Add custom class name to hide a Home Widget
Add custom class name to hide a Home Widget

6. 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

6.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. Supports SVG logo. When upload a SVG logo, please always click "Skip Cropping" button.
  • 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.
  • Logo for transparent site header (optional) – If your site header is in Light Color Scheme, your logo image might be in dark color so it can be visible in a white (or another light color) background. Then you can also upload a logo which is in light color so it can be visible in a transparent site header (often has a dark background behind). But if your site header is in Dark Color Scheme, then you probably don't need to upload a logo in this option.
  • 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. If you'd like to hide site title only, or hide tagline only, please read this how-to article.
  • Site Icon – Upload a square image to use it as a browser and app icon (the favicon) for your site.

6.2 Site Layout

To customize your site layout, please go to theme customizer > General > Site Layout. There are 3 site layout options:

  • Fullwidth
  • Boxed
  • Framed

And you can also upload a site background image. And if you choose "Boxed" or "Framed" as site layout, you can also customize background for outer area, and change Site Max Width for "Boxed" site layout.

A new option added since version 1.1.0: Inner Container Width - Normal / Wide.

This option determines the maximum width of the inner content area when the screen is narrower than 1440 pixels. When the screen is wider than 1440 pixels, the maximum width of the inner content area will always be 1440 pixels.

  • Normal – The maximum width of the inner content area will be 1140 pixels when the screen is narrower than 1440 pixels.
  • Wide – The maximum width of the inner content area will be screen width minus 80 pixels when the screen is narrower than 1440 pixels.

6.3 Colors

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

General Color Settings

Please go to theme 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 also modify colors for the 2 color schemes.

To change site header / site footer / sidebar's colors, please go to their sections and find "Design Options".


6.4.1 Site Header Layout

Please go to theme customizer > Site Header > Header Layouts, there you can:

  • Choose a site header layout from 7 layouts.
  • Enable Sticky Header effect or not.
  • Tweak hamburger button style (on small screens, site menu will hide, and a hamburger menu button will show as the menu trigger).
  • Show or hide Social Menu in site header (new feature since v1.1.6). Please note: social menu will be hidden when screen width is less than 768 pixels.
  • Show or hide search button in site header.

Site Header Layouts - 7 Choices

Please see the screenshot below: Fallsky theme provides 7 different choices for site header layout.

Site Header Layout Choices
Site Header Layout Choices
  • 4 of them support normal menus: Header Layout 1 / Header Layout 5 / Header Layout 6 / Header Layout 7.
    • Normal Menus - The menus in site header will be displayed on desktop devices. When the browser width is less than 1120 pixels, the menus (primary menu and secondary menu) will be collapsed, so visitors will not see them in the site header. A hamburger menu button will show instead - it is the menu trigger: click on the hamburger menu button, the fullscreen menu will show. The primary menu (and secondary menu) and more content are shown in the fullscreen menu. This design is widely used and it is for responsive web design - to make your web page look good on all devices (desktops, tablets, and phones).
    • Also Show Hamburger Menu Button - You will see this option when choosing any one of the 3 site header layouts that support expanded menus. Check this option, the hamburger menu button will always show.
  • The rest 3 support fullscreen (overlay) menus only: Header Layout 2 / Header Layout 3 / Header Layout 4.
    • Fullscreen Menus - Visitors will not see the site menus in site header. A hamburger menu button will show instead - it is the menu trigger: click on the hamburger menu button, the fullscreen (overlay) menu will show. The primary menu (and secondary menu) and more content are shown in the fullscreen menu. This design is widely used and it is for responsive web design - to make your web page look good on all devices (desktops, tablets, and phones).
    • To customize the fullscreen menu, please check this section: Fullscreen Menu.

Please see the screenshot below. Some users may encounter this situation: When they customize the site appearance, even if they select a site header layout that supports the normal menus, they still cannot see the menus in site header of the preview area.

Menus do not show in site header in the preview area
Menus do not show in site header of the preview area

This is related to your computer screen/browser width. When the computer screen width is 1280 pixels or less, because the WordPress customizer (the settings panel on the left side) width is 300 pixels, the width of the preview area will be 980 pixels or less.

As described above, when the screen width is less than 1120 pixels, the menus (primary menu and secondary menu) in site header will be collapsed, and the hamburger menu button will be displayed instead. This is for responsive design. To preview the menus in site header while customizing the site look, please click on the "Hide Controls" button (in the lower left corner) to hide the customizer, then you will see the same results as the site front-end.

Hide customizer
Hide customizer

For example, if you choose "Header Layout 1", after you hide the customizer, you will see the primary menu. Or you can save changes and go to your site front-end to see the results. Please see the screenshot below:

Hide customizer to preview the results
Hide customizer to preview the results

6.4.2 Site Header Colors & BG

Please go to theme customizer > Site Header > Design Options, there you can:

  • Set up site header background image.
  • Choose a basic color scheme for your site header: Light or Dark.
  • Change site header background color. (Text color of site header is controlled by the selected color scheme: dark text for Light scheme, white text for Dark scheme.)

Colors for Site Header Layout 7

If you select "Site Header Layout 7", normally the branding section (which contains the logo image, site title and description) and the menu bar will be in the same color scheme.

In the Site Header > Design Options section, find the option groups "For Header Layout 7", here you can tweak the colors for the branding section, like shown in the screenshot below:

Change text color and background color for Site Header Layout 7
Change text color and background color for Site Header Layout 7

Since version 1.9.0, we added the options to change the padding top & padding bottom values of the site logo for Site Header Layout 7.

6.4.3 Transparent Site Header

Since version 1.1.0, users can choose to enable/disable the transparent site header for homepage/single page/single post/archive pages.

Please go to theme customizer > Site Header > Transparent Site Header, there you can enable/disable transparent site header for:

  • Homepage
  • Single Post + "Post Template 1" - only works when the post has a featured image
  • Single Page + "Page Header Layout 2" - only works when the page has a featured image
  • Archive Pages - including:
    • Category/Tag Archive Pages - when the page has a header background image
    • WooCommerce Pages (Shop/Cart/Checkout/...) - when the page has a header background image (featured image)
    • Category Index & Static Blog Page - when the page has a header background image (featured image)

When site header is transparent, text in site header will be white, and if you have uploaded the alt logo image for the option "Logo for transparent site header", then the site logo image will be that one.


6.5 Fullscreen Menu

When you choose a site header layout that supports the fullscreen menu, or you choose to display the hamburger menu button in the site header, a hamburger menu button will show - it is the menu trigger: click on the hamburger menu button, the fullscreen (overlay) menu will show.

Customize the Fullscreen Menu
Customize the Fullscreen Menu

Fullscreen Menu Content

In the fullscreen menu, you can display the following content:

  1. Your site primary menu
  2. A search field
  3. Your site secondary menu (optional)
  4. Social Menu
  5. Copyright Text (or any custom text)

Please go to theme customizer > Fullscreen Menu > Content Options, there you can find the following options:

  • Display/Hide Search Form
  • Display/Hide Social Menu
  • Enter Copyright Text

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

Fullscreen Menu Colors & BG

Please go to theme customizer > Fullscreen Menu > Design Options, there you can:

  • Change the fullscreen menu background color and text color.
  • Set up the background image for the fullscreen menu.
  • Add an overlay between the background image and content, and you can also change the overlay's color and opacity (transparency).
  • Remove or keep the white bold border around the fullscreen menu.

Please go to theme customizer > Site Footer > Content Options, there you can find the following options:

  • InstagramPlease note: your Instagram account needs to be public to show feed on your site.
    • Please connect your website with your Instagram account first. Please click here to know how to set up your Instagram.
    • After that, you can check it to enable this feature.
    • You can change the position of the Instagram feed. There are 2 options to choose: Below Footer Widgets and Top of Site Footer. (New feature added in v1.8.0.)
    • Enter a title (it's optional) for the feed, for example, "Follow Me on Instagram".
    • If you want to link the title to your Instagram account page, please enter your Instagram account username.
    • Title Layout - Default / Overlay. New feature added since v1.1.0.
    • Then You can choose to display the latest 4 to 8 pictures from the Instagram account in a (full-width) row at the top of the site footer.
    • Since v1.1.4, you can choose to open images and title link in new tab.
  • Footer Bottom
    • Display a navigation menu or your social menu in the site footer bottom area.
    • Footer Text – Add some text (e.g. copyright information) into the site footer bottom area. It supports HTML tags. So you can use < h1 > to < h6 > tags, and < p >, < ul > tags to style the content.
    • Change column setting for site footer bottom area.

And Fallsky theme provides 3 footer widget areas for displaying widgets in site footer. On your site admin panel, please go to Appearance > Widgets page, drag and drop widgets into "Footer Column 1/2/3".

Please go to theme customizer > Site Footer > Design Options, there you can:

  • Set up site footer background image.
  • Choose a basic color scheme for your site footer: Light or Dark.
  • Tweak site footer background color and text color.
  • Tweak site footer Bottom Area background color and text color.

Please go to theme customizer > Sidebar, there you can:

  • Check to enable sticky sidebar. Only works when sidebar is shorter than content area and when screen width is larger than 1120 px.
  • Customize sidebar styles and colors - There are 3 style options:
    • Default - No border, no background for each widget item. Widget text color is inherit from site color.
    • With Border - Each widget item has a border line. And you can tweak border color and widget text color.
    • With Background - Each widget item has a background color. And you can tweak the background color and widget text color.

6.8 Typography

Please go to theme 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 800+ 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 Title
  • Page Title
  • Section & Widget Title
  • Category Links (New feature since v1.1.0)

6.9 Instagram

When using Fallsky, you can display your Instagram feed on your website: in site footer as a fullwidth section, or in a widget area (sidebar, or a footer column) by adding the custom widget "Fallsky Instagram".

Set up your Instagram

Before June 2020:
For most users, there is no need to add the Instagram Access Token to display the Instagram feed on the website. Only a few users need to add the Instagram Access Token because of a connection problem between their websites and Instagram.

Since June 2020
However, starting in June 2020, Instagram made changes AGAIN, and the old API will be deprecated at the end of June 2020. The new Instagram API is currently enabled.

Because of these changes, from June 2020, it is required to add the Instagram Access Token to connect your website with your Instagram account before you can display the Instagram feed on your website.

For users who have previously added the token manually in the old way, since you are using the old Instagram API (will be deprecated after June 29, 2020), so please follow the steps below to reconnect your Instagram account.

Please follow the steps below to connect your website with your Instagram account:

  1. Install the bridge plugin we made: "loftocean-instagram": Please click the plugin download link, and then install and activate this plugin on your website.
  2. Please install and activate this plugin Smash Balloon Social Photo Feed (Formerly "Smash Balloon Instagram Feed").
  3. 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).
  4. Enable an option in your Customizer: Please open your WordPress customizer, then go to "General" > "Instagram" > find "Using Instagram Token" option, tick the box, and save the changes. After that, please click on the "Clear Cache" button.
    Enable an option in your Customizer
    Enable an option in your Customizer.
  5. Select one of the feeds you created.
    Select one of the feeds you created
    Select one of the feeds you created
  6. Done. Please keep these two plugins installed and activated. And please make sure your Instagram account is public.
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 these two plugins?"

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.

Bridge plugin "LoftOcean Instagram": This is a bridge plugin. After activating this plugin, the Fallsky theme can work with the "Smash Balloon Social Photo Feed" plugin, so your Instagram feed can be displayed in the theme’s built-in locations (sidebar and footer), with the style set by the theme.


After connecting your website with your Instagram account, you can display your Instagram feed in the site footer, or use a widget to display the feed in the sidebar.

Instagram feed in site footer:
Please open your WordPress Customizer, then go to "Site Footer" > "Content Options" > find "Instagram" options. Enable the option and the Instagram feed will be displayed in the site footer. Please check this chapter for more details.

Instagram feed in widget areas (sidebar, footer widget column):
Please use the custom widget "Fallsky Instagram" to display Instagram feed in a widget area. If you are new to WordPress, you may like to read this tutorial: How to Add and Use Widgets in WordPress.

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.

Please note: this is a new feature added since Fallsky v1.1.7.

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.

Please note: this is a new feature added since Fallsky v1.1.7.

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 "Fallsky Extension" is installed and activated.
  2. If you update the theme, please make sure you also update the required plugin "Fallsky 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.

Search for Selected Post Types

When using the Search feature of Fallsky theme, only "Posts" are searched by default. Since v1.2.0, users can choose to search for all selected custom post types, such as Portfolios, Pages, Products, etc.

Please go to Customizer > General > Search, where you will see the "Search Selected Post Types" option. All custom post types that exist on your website will be listed, and you can click to select. Please hold down the CTRL key (PC) or COMMAND key (Mac) to select multiple items.

If none of the items are selected, it will search for all post types.

Search Selected Post Types
Search Selected Post Types

Fullsize Search Screen & Ajax Search

When clicking on the "Search" icon in your site header, a fullsize search screen will display. To customize the search screen, please go to Customizer > Search Screen.

Fullsize Search Screen
Fullsize Search Screen & "Search" section in Customizer

There you will find Content Options & Design Options to show/hide elements and change the colors and background image.

Instant / Ajax Search

Please note: The instant/Ajax search feature is only supported when searching on the fullsize search screen:

The search feature will start working while you are typing into keywords: there will show a spinning icon which means it is searching for the keywords. And the first 3 search results will be displayed on the screen. To see a full list of the search results, please press the "Enter" key on your keybord.

Ajax Search
Ajax Search

You can enable/disable the Ajax Search feature by checking/unchecking the option box.


6.11 Font Awesome Icons

Fallsky theme uses the most popular icon font toolkit Font Awesome to display icons. When the first version of Fallsky was released, we used Font Awesome v4.7. Later, Font Awesome version 5 was released, and included many new icons. Therefore, we provide a new feature to allow users to choose to upgrade to Font Awesome v5.x to show new social icons, for example, Google Play, Patreon, etc.

In the customizer, please go to General > Font Awesome, then tick the box of the Upgrade to Font Awesome 5 for more icons option.

Upgrade Font Awesome library
Upgrade Font Awesome library

Please note: some icons may look different after upgrading from v4.7 to v5.x because the icons are redesigned by the toolkit author.

You may like to check the icon list of Font Awesome library:


6.12 Progressive Image Loading

Fallsky theme uses a technique to smartly load the images: using a small & blurry image while the original image is being loaded. When it finishes, do a soft transition from the placeholder to the original image.

This technique is quite popular recently and being used on many modern websites. However, under certain circumstances, you may want to disable this effect on your website:

  • You don't like this effect;
  • Some plugins on the website will suspend all JavaScript before the visitor performs certain actions. For example, some cookie law plugins prevent all JS code from loading before the visitor clicks "Agree". And then all the images will be blurry before the visitor clicks "Agree".

To disable this effect, please open your WordPress customizer, and then go to General > Progressive Image Loading. This option is enabled by default. Therefore, you can uncheck the box for this option to disable it.

Progressive Image Loading
Enable/Disable Progressive Image Loading

8. Archive Pages

8.1 Posts General Options

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

  • Change the text showing on the "read more" buttons. (And you can also choose to hide the "Read More" button for each posts list while editing it.)
  • Choose a Pagination Style for posts archive - there are 4 options:
    • Nav/Prev Links
    • With Page Numbers
    • Load More Button
    • Infinite Scroll
  • Load Post Meta ( Like Count & View Count ) Dynamically with AJAX - Recommend enabling this option if any caching plugins are used on your site. (New feature added in version 1.9.0)
  • Comments Options -
    • Fold the comment form on each single post (and single page) - there will show a "Write a Response" button instead, click the button then the comment form will show.
    • Comments location on single post - you can display the comments (and the comment form) after single post content, or choose to display them after post pagination and the related posts.
  • Change the Post Excerpt Length for each posts layout.
Posts General Options
Posts General Options

8.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
  • Select a Posts Layout
  • Choose to show or hide post excerpt
  • Choose to show or hide "Read More" button
  • Display selected post meta
  • Dicide the number of Posts displayed Per Page.

8.3 Category Archive

8.3.1 Edit a category

Go to Posts > Categories, when adding a new category or edit an existing one, you can upload an 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: Fallsky Category widget.

Category Image
Category Image

8.3.2 Default Category Page Layout

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

  • Choose to show or hide page header
  • Choose to display category image in page header or not
  • Choose to display subcategories filter or not
  • 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
  • Show Posts or Sub Categories on Parent Category Page
Customize Category Archive
Customize Category Archive

Please note: the layout and styles set in the customizer will be the default styles for all category archive pages. If you want to set different layout and styles for each category page separately, please read the following sub-chapter.

8.3.3 Individual Category Page Layout

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

Customize a Category Page separately
Individual Category Page Layout Settings
  • Fallsky Category Layout - Default / Customize this category page.
    • If choose "Default", this category page will inherit the layout/style settings from the customizer (Customizer > Archive Pages > Category).
    • If choose "Customize this category page", then you can set a different layout/style for this category page.
Customize a Category Page separately - Options
Individual Category Page Layout Settings - Options

And you will find another option below the Fallsky Category Layout option: Posts from Other Categories.

Add Posts from other Categories
Add Posts from other Categories

Check to box to enable this feature, then you can add a section of posts from other categories by entering the IDs of those categories.

Please note: the pagination button ("Load More" or "Prev/Next" links) cannot be added to this section.

To know how to find the ID of a category, please read How to Find Post, Category, Tag, Comments, or User ID in WordPress.


8.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.

8.4.1 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

8.4.2 Edit Author Profile Picture

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

8.4.3 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

8.4.4. Hide Author Info Box on Single Post

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

Hide Author Info Box
Show or Hide Author Info Box on Single Post

8.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:

  • Choose to show or hide page header
  • Choose to display tag image in page header or not
  • 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

8.6 Search & Date-based Archive

You can also customize the layout of search result page and date-based archive pages. Please go to Customizer > Archive Pages, then go to Search or 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

8.7 Category Index Page

You can create a Category Index Page which lists all post categories on your site.

  1. First of all, please make sure your site has some post categories, and each category has some posts assigned to it. If a category has no posts assigned to it, then that category will not show on the Category Index Page.
  2. On your site admin panel, go to Pages > Add New. Create a new page, for example, "Browse Categories".
  3. You can upload a featured image for this page, it will be used as the category index page's page header background image. Please note: any content entered in the content editor will not show on the page.
  4. Then go to Settings > Reading panel, find the option Category Index Page, in the drop down menu select "Browse Categories".
    Set Category Index Page
    Set Category Index Page
  5. Then go to Appearance > Customize > Category Index Page panel to customize the page. There you can customize:
    • Sidebar Layout
    • Choose Categories
    • Category Style
    • Category Layout
    • Show or hide Post Counts
    • Exclude some categories

Exclude some Categories from Displaying on the Category Index Page

Please go to Appearance > Customize > Category Index Page panel, there you will find the "Enter Categories' IDs to Exclude Them from Displaying on the Page" option (new feature since v1.2.0).

Exclude some Categories
Exclude some Categories

You may like to read How to Find Post, Category, Tag, Comments, or User ID in WordPress.

9. Posts

9.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 Fallsky 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

9.2 General Single Post Options

Please go to Customizer > Single 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.

Single Post Options in Customizer
Single Post Options in Customizer

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.
  • Sticky Post Nav - Show/hide the sticky post nav, then adjust the nav color.
  • Display Categories - Show/hide the categories in the post header.
  • Display Tags - Show/hide the tags after the post content.
  • Post Sharing - Enable/disable the post sharing feature.
  • Footer Meta - Display the selected post meta in the footer of the post, including: Author Name/Publish Date/View Counts/Like Counts/Comment Counts.
  • Display Author Info Box - Please note: the author's biographical info need to have some content, or the author info box will not show.
  • Display Signup Form - The third-party plugin "MailChimp for WordPress" is required. (See Recommended Plugins and Signup Form)
  • Display Post Pagination - Show/hide the post pagination for the previous/next post.
  • Related Posts - Display/hide a group of related posts.

9.3 Specific Single Post Options

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

Single Post Options
Specific Single Post Options
  • Hide the featured image on the single post page (new feature since v1.2.0).
  • Choose Post Template -
    • Fallsky theme provides 7 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.
  • Choose Sidebar Layout -
    • There are 4 options: Default / No Sidebar / Left Sidebar / Right Sidebar.
    • You can choose a default sidebar layout for posts, and you are also able to choose different sidebar layouts for different posts.
    • If you choose "Default", then this post will use the default sidebar layout you have selected via Customizer > Single Post > Default Sidebar Layout.
    • If you choose any other value, then it will ignore the default sidebar layout setting. And if you change the default sidebar layout in Customizer, the change will not affect this 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.
  • Add Co-author(s) - Selected author name(s) will display on this post (if author meta is enabled).

10. Signup Form

10.1 Setup Newsletter Signup Form

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

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

Create the subscribe form

Please go to MailChimp for WP > Form to create and edit your signup form. It might look like this in the front-end:

Newsletter Signup Form
Newsletter Signup Form

And we provide another style for the signup form. Please use the code below for the form:

<p>
  Don’t miss out. Subscribe to our weekly newsletter.
</p>
<div class="fields-container">
  <input type="email" name="EMAIL" placeholder="Your Email" required="">
  
  <div class="button">
      <input type="submit" value="Subscribe">
  </div>
</div>
Create Subscribe Form
Another Markup for the Newsletter Signup Form

And the form will look like this in the front-end:

Alternative Style for the Newsletter Signup Form
Alternative Style for the Newsletter Signup Form

10.2 Add signup form in sidebar or footer widget areas

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

10.3 Add signup form on 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 Main Content Area > 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.

Add MailChimp Sign-Up Form to Homepage
Add MailChimp Sign-Up Form to Homepage

The form might look like this in the front-end:

MailChimp Sign-Up Form on Homepage
MailChimp Sign-Up Form on Homepage

10.4 Add signup form into single post page

Please go to Customizer > Single Post, find the option Display Signup Form, check the box and select a form in the drop down list.

Display MailChimp Sign-Up Form on Single Post Page
Display MailChimp Sign-Up Form on Single Post Page
MailChimp Sign-Up Form on Single Post
MailChimp Sign-Up Form on Single Post

10.5 Popup signup form

We support MailChimp's default functionality to add a popup signup form to your site. Please log into your MailChimp account and read this article to know how to create a popup signup form.

Then please go to Customizer > Popup Signup Form, copy and paste the form code into the box.

If you are looking for advanced and more customizable popup signup form, please check WisePops - Intelligent Pop-ups. It's a plugin recommended by MailChimp. It's a paid premium plugin.

11. WooCommerce

11.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 installation, WooCommerce creates the following 4 new pages via its Onboarding Wizard:

  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.

To set up the shop 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

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

And to setup your product image dimensions, please go to WooCommerce > Settings > Products > Display. And after changing image sizes, please don't forget to regenerate your thumbnails.

Product Image Size
Product Image Size

11.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 > Shop to customize your shop pages.

11.3 Add Products on Homepage

You can add products list & products categories to your homepage (only for Multi-content Homepage" - find out more).

Please go to Customizer > Home Page > Home Main Content Area > Home Widgets, click on the button "Add a Widget", then click on "Product Categories" or "Products".

And you can tweak the home widget's colors, and set styles for products list.

Add Products to Homepage
Add Products to Homepage

12. Item Customization

12.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.


12.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.


12.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 Fallsky theme (not just the installable WordPress theme zip file), unzip it and you will find WordPress Child Theme > fallsky-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 fallsky.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.

13. 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 1600 px when it is supposed to be a full-width image.

Images will be scaled and saved into different sizes after you upload them. You can set image sizes via dashboard > Settings > Media.

Recommended media sizes for Fallsky 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.

And if there are some images added before using the Fallsky theme, please also use this plugin to regenerate the new sizes for them.

14. Shortcodes

Currently we have provided 12 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.

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.

15. Gutenberg Ready

15.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 will be 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.

To get these new features and changes:

  1. Please update Fallsky theme to the latest version;
  2. Then update the required plugin "Fallsky Extension" to the latest version;
  3. Make sure the the required plugin "Fallsky Extension" has been activated.

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.


15.2 Theme Built-in Galleries: Slider & Justified Gallery

Fallsky 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

Please note: because the content area maximum width is 580 pixel in Gutenberg editor, and the content area is wider on the front-end, the justified gallery may look different on your front-end.

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

15.3 Fallsky Single Post/Page Options

In the Classic Editor, Fallsky Single Post/Page Options are meta boxes which were displayed below the post editor. Since Fallsky v1.2.0, we 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.)

Fallsky theme Single Post Options integrated to Gutenberg Sidebar
Fallsky 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.

Expand a group and show its settings
Expand a 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

15.5 Post Format Media

If the post format is Gallery / Video / Audio, the media files can be picked in Theme Settings section. Please see the screenshot below as reference:

Set media for Post Format
Set media for Post Format

15.5 Theme Shortcodes are converted to Blocks

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

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

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

15.5.2 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

15.6 Theme Block - Posts

In version 1.8.0, we added a new block in Gutenberg: Theme Posts. Users can use this block to add selected posts to the content of any post or page.

When editing a post or page in the Gutenberg editor (Block editor), search "Theme Posts". After adding this block to the content, you can select the post source, and customize the list layout, displayed meta, and etc.

Search Theme Posts in Gutenberg editor
Search "Theme Posts" in Gutenberg editor

Or, you can click the "Add Block" button to display all available blocks, and then scroll down to find Theme Blocks > Theme Posts.

Find Theme Blocks in Gutenberg editor
Find Theme Blocks in Gutenberg editor

How to select multiple categories/tags?

When selecting posts from categories/tags, you can select multiple categories/tags.

  • 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.
Select multiple categories/tags
Select multiple categories/tags

Please note: This block has not been converted into a shortcode in the classic editor. Therefore, if you want to add selected posts to the content of any post or page, please use the Gutenberg editor.

16. GDPR Compliant

We have included tips and resources related to this topic in this how-to article:

17. Online Resources

18. 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 Fallsky theme and the required plugin "Fallsky 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 and How-to Articles 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!

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.