- 1 Package structure
- 2 Installation
- 3 How to setup your theme
- 3.1 Installing the main theme
- 3.2 Installing the child theme
- 3.3 First steps after activating the theme
- 4 Advanced setup
- 4.1 Custom logo upload
- 4.2 Menus
- 4.3 Social links
- 4.4 Portfolio
- 4.5 LayerSlider
- 4.6 Layout
- 4.7 Layout builder
- 4.8 Sidebars
- 4.9 Footer
- 4.10 Responsive
- 4.11 Customizer
- 4.12 Fonts
- 4.13 Post formats
- 4.14 Framework settings
- 5 FAQ
- Installable theme archive
- Child theme
- Documentation folder
To install this theme, simply make sure to have a correctly running copy of WordPress, and install then activate our theme.
If you haven’t set up your WordPress installation yet, you can grab a copy of latest WordPress version here. Next, go through the installation instructions inside the readme.html file and set up your WordPress installation.
If you are new to WordPress and have problems installing it you might want to check out this page.
How to setup your theme
This section covers the basic information to setup the theme in the same way of the online demo.
Installing the main theme
You can either choose to upload the theme to your server via FTP, or use the WordPress theme upload function. In either cases, please make sure to upload only the archive file named after the theme, contained in the main package you downloaded (e.g. if the main package is called “Theme v.1.0”, you want to upload the “theme.zip” file contained in it).
If you are new to WordPress and have problems with theme you might want to check out this page.
If you do not plan to use a child theme, you can then proceed activating the theme.
Installing the child theme
Even with the main theme installed, using a child theme is a good practice when it comes to our themes, as it ensures that you can get all the benefits from updating the main theme when a new version comes out, while retaining your own customizations.
Inside the main theme package you’ll find a ready to use child-theme package.
You can upload the child theme just like you were uploading or installing a regular theme. If you plan to use it, proceed activating it.
Please note that the parent theme activation is not required when using child themes.
First steps after activating the theme
If you’re performing a fresh installation of the theme, upon activation you’ll be redirected to the theme’s welcome page where you’ll find a quick start guide to get your theme up and running, a collection of useful F.A.Q. and a list of the major theme features.
An help page containing the quick start guide and all of the F.A.Q. will always be available by clicking on the “Help” link in the upper right hand corner of the “Appearance > Theme Options” and “Appearance > Framework settings” pages.
Theme options are organized in tabs, each one of them covering a specific section or function of the website, and each option contained in a tab often comes with a little help text to clarify its usage.
If you want to return to the main options panel at a later time, you can find it under Appearance > Theme options, in the WordPress admin side menu.
A notice message above the theme options page will let you know what plugins are required for the theme, and give you a quick way to install or activate them.
In order to use the Portfolio feature of this theme you’ll need to activate the “THB-Portfolio” plugin.
If the plugin is currently active and running correctly, you’ll see a “Portfolio” menu section in the WordPress administration area. Shouldn’t that section be visible, check under the WordPress “Plugins > Installed plugins” section that the “THB-Portfolio” plugin is activated.
If you want to access the suggested plugins page for the theme at a later time, you can find it under Appearance > Install Plugins, in the WordPress admin side menu.
A notice message above the theme options page will let you know what plugins are suggested for the theme, and give you a quick way to install or activate them.
You can dismiss the suggested plugins message by clicking on the “Dismiss this notice” link inside the message box.
If you want to access the suggested plugins page for the theme at a later time, you can find it under Appearance > Install Plugins, in the WordPress admin side menu.
The theme has been designed to work best with the following plugins:
After the activation of the WooCommerce or the bbPress plugin a new tab specific for the plugin will be created in the “Theme options” panel with some dedicated options.
If you need assistance concerning the manual installation of plugins, you can refer to the official WordPress Codex page.
In order to receive updates notifications for the theme you’ll need to install the Envato Market WordPress plugin, which will take care of the whole process for you. Please refer to their documentation page about how to set it up correctly.
Auto updates work with child themes as well: in the case an update to the parent theme is available, you will be able to update it automatically and transparently without touching the child theme’s code.
As soon as a new update comes out, the new updated version will be available on your ThemeForest Downloads section, making sure to download the Installable WordPress file only.
After you got a copy of the updated theme, you have two options:
Log into your site via FTP or cPanel and delete the old theme folder and then upload the new archive you’ve just downloaded and unpack it in the
Make sure you make a backup of the old version of your theme just in case something goes wrong.
Another choice that you have is to rename folder that contains the now old version of the theme. This will allow you to successfully upload the new version of the theme.
In the case you’re manually updating the theme, make sure to only update the main/parent theme, not any child themes that you might be using.
Updating the required/suggested plugins
When a new theme update comes out, the required/suggested plugins, even when they’re distributed as a bundle together with the theme itself, may require to be updated as well.
Should that happen, a warning sign will be displayed near to the Clayton item in the WordPress admin menu. By going to that page, you’ll see a notice that will tell you which plugins need to be updated and will give you instructions about how to do it.
Upon installing the theme, a series of presets is automatically loaded. This presets include general theme options and the demo skin.
If you want to backup your options and import them at a later time, please refer to the “Framework settings” section of this document.
Refresh the website’s permalinks
In order to avoid 404 errors, we suggest that you refresh the website’s permalinks. You can do so, by going to the Settings > Permalinks page, and hit “Save changes”.
Regenerating the media library thumbnails
This theme supports custom image sizes. Newly uploaded images are automatically resized, while previously uploaded ones aren’t.
If you come from a previous installation and have images in your Media Library, we warmly recommend that you regenerate the theme’s Media Library items thumbnails upon the theme installation or activation: this ensures that images used in the theme are sized properly according to the theme specifications.
To batch resize images in your Media Library according to the theme image sizes, you can use a plugin like “Force Regenerate thumbnails”. Unused image sizes will also be cleared from your Media Library.
Setting up the home page
By default the home page will display your latest posts. If you want to set a specific page to be your home page, you can do that in the WordPress reading settings (Settings > Reading), choosing the “static page” option.
In the WordPress reading settings (Settings > Reading) page, we recommend to leave the “Posts page” option under “Front page displays” set to blank, in order to avoid pagination isssues.
Images will be imported into the Media library when you upload the dummy content xml.
All images are from Unsplash licensed under CC0 license
Here are some steps you might want to follow after setting up your theme.
Custom logo upload
Our themes come with the ability for you to choose an image or text as your main logo.
You can upload a graphic logo from the “Logo & Images” tab in the “Theme options” page. If the field is left empty, a simple text logo will be used, which can be later styled in the theme Customizer. Please remember to load a properly dimensioned logo.
This theme supports the WordPress custom menus feature.
This theme has one custom menu location for the main navigation and offer a multi-level support.
To setup your custom menus, navigate to Appearance > Menus. Give your menu a name and build it up using the available items. To extend the available menu items, click the “Screen Options” tab at the very top of the screen and configure your options. Once you have built your menu, save it and assign it to a location.
For more info on the WordPress custom menu feature check this video tutorial, or refer to the Codex.
A special class called “action” is available for create a nice “action like” menu item.
In order to add this class you’ve to enable the “CSS classes” checkbox from the “Screen options” button on the WordPress “Menu” section, you can view a guide here then, on your desired menu item you’ve to add “action” as CSS class.
A new action button style is available from version 1.3, add the class “blue” plus the “action” ( leave a space between classes: ‘blue action’ ) class in order to enable a new button style like the text box primary call to action button. The color of this button is guided by the Customizer Highlight color.
A new special class called “inpage” is available from version 1.4, this class is useful when you’re adding custom menu item link that point to a specific page section ID.
The theme has a built-in “Mega menu” functionality.
When editing a menu from the WordPress “Appearance > Menus” section of the WordPress admin, each primary level menu item can be told to act as a “Mega menu”, that is to function as a wide container for its submenus. You can also specify the columns layout for the mega menu: if you select a specific number of columns, the appearance will be fixed, as opposed to the “Auto” option, which will generate a fluid container.
Please note that when a column layout module is applied, the mega menu will have a fixed width.
For each Mega menu sub items, you can define if such item must be either clickable, or act as a simple label: you can do the latter by checking the “Disable the item link?” checkbox in the menu item editing box.
When building a “Mega menu” each first sub menu level item is considered to be a “column”. If a column have one or more children, the column item will be appear bold.
Please note that the “Mega menu” functionality is available for the main inline navigation menu only.
Global links to social network pages can be set up under the “Social” tab in the “Theme options” panel; please note that these links are used only on the theme footer.
Please note that these links only provide a simple link to the various social networks profile pages, and do not offer any more structured integration.
Global options concerning the Portfolio custom post type can be found under the “Portfolio” tab in the “Theme options” page.
A specific note has to be made about the “URL slug” options, which enables to customize the URL to Portfolio items. For example if you’ve set up pretty permalinks, by default Portfolio items can be reached from a URL such as example.com/works/your-work.
If you set the “URL slug” to “portfolio”, the resulting permalink for Portfolio items will be example.com/portfolio/your-work.
Important: please note that you cannot use the same slug for portfolio items and the Portfolio page, as this would mess up various things, including the Portfolio pagination.
Remember to re-save the site’s permalinks upon changing the URL slug field.
If you want to enable the “back to portfolio” link in the single portfolio item you’ve to choose which page will be your portfolio index page, you can do that by choosing your desired page from the select called “Select the Portfolio index”.
In this select only pages with the “Portfolio” page template applied will be shown.
The premium plugin “LayerSlider” is bundled with the theme, if you want to use this plugin you’ve to install and activate it.
After the plugin activation a new metabox called “LayerSlider” will be available in pages, with a input text where you’ve to put your slideshow shortcode.
For the LayerSlider documentation you can refer to the “LayerSlider guide.zip” file included in the main package in the documentation folder.
General options concerning the website layout can be found in the “Layout” tab in the “Theme options” page.
If you need to make specific customizations to the theme appearance, you can use the “Custom frontend CSS” textarea located under the “Custom CSS” tab in the “Theme appearance” page.
In pages and post-type entries, a box called “Template options” is entitled to manage all the options concerning the appearance of the page or post.
Layout, header backgrounds and header slideshows
When the page header is set to have an extended appearance, you’ll find options to add a big background image for it or use a slideshow, adding both pictures and videos.
When both the page header background and the slideshow are specified, please note that the slideshow will have precedence.
Both the page header background and the slideshow’s slides feature the ability to add an overlay. You can choose to activate/deactivate it, select its color and opacity level.
The color of the overlay (even if not enabled) or background determines the skin used for texts (e.g. a dark color automatically generates light text) in that portion of the template.
On the other hand, if the page header is set not to have an extended appearance, the slideshow would take the place of the featured image, if set.
The Layout Builder is a tool to easily build custom layouts, and you can find it under the “Layout builder” metabox in the pages’ editing screen.
The Layout builder content is essentially a block of custom contents that is injected in the page, usually below the regular page extended text. The Layout builder content is divided in horizontal regions called “sections”, each section can have multiple “rows”, each row can be formed by multiple “columns” of various widths, each one of them containing a variable number of “blocks”.
Here we’re going to briefly describe how the Layout builder works in the page editing screen of your admin backend.
First off, you can create sections by clicking on the “Add section” button in the “Layout builder” metabox.
Sections are meant to be portions of content that are distinct from one another, hence they have specific options concerning their appearance. You can access the appearance options hovering on the section, and clicking on the “Section appearance” control in the upper right hand corner: they can either be boxed or extended, with the content being limited to a central portion of the screen, or extending to the viewport’s edges.
Each section can also have a background assigned, that will stretch for the entire width and height of the section.
Sections, as well as columns and blocks, can also be specified with their own custom CSS class of your choice, so that you can hook to it via the custom CSS textarea of the theme’s admin panel.
You can add a new row to a section by clicking on the “Add row” control in the upper left hand corner of the section. Please note that rows can be dragged up or down within their own section, but they can’t be dragged to another section.
After inserting a row, you’ll be able to add columns. As a matter of fact, look for the “Add column” label in the row block that you just added, and you’ll be presented with a set of viable options concerning the width of the column you’re about to add. The theme supports widths from one fifth (20% of the available width), to 100%.
Going over a column with your mouse will show various options concerning the column: reduce or enlarge the column width (if possible), clone the column with its contents and alter the column appearance.
Columns as carousels
Concerning the column appearance, by clicking on the cog icon a modal window will be shown with various options. It is worth noting that each column can also be displayed as a carousel, with the blocks contained in the column being the carousel items. You’ll find various options to control the column carousel appearance, as well as the column CSS class, in the Column appearance modal.
After creating a column, you’ll be able to add blocks to it by clicking on the “Add” button at the bottom of the column. After clicking the control, you’ll be shown a modal listing all of the available builder blocks. After selecting the block you want to add, you’ll be shown the block editing screen.
Blocks can be dragged around columns to alter their order, even within columns that are not part of the same row.
Note: if for some reason a block is present in the page configuration but not installed (e.g. it’s declared by a plugin and such plugin is not active), the block will be presented in a “disabled” state, and will not be shown on frontend. You’ll need to activate the plugin in order to make the block appear.
Some blocks support icons as decoration. Icons are generated through the Fontello web service, and most of them are taken from the Font Awesome package. In order to allow the system to support also other packages in the future, we’re not following the Font Awesome naming convention for icons; instead of prefixing them with
fa fa-code-of-the-icon, the following syntax should be used:
Custom sidebars can be created from the “Theme options > Sidebars” section
Sidebars are actually not available on the 404 page.
If you want to use widget areas in the footer portion of the theme, you can select the columns layout for the footer area, in the “Footer” section of the “Layout” tab.
Selecting none will disable the footer area entirely, while selecting a column configuration will automatically create a new Widget Area named “Footer column #”, which you’ll can populate under the Appearance > Widgets section of the WordPress administration.
The theme has been designed to adapt itself to various screen sizes, like the ones used by tablets and phones. In order to get the most out of the theme even on these kind of devices, make sure to enable the appropriate responsive feature, in the “Responsive” section of the “Layout” tab.
This theme supports the WordPress native theme customization panel, available from version 3.4. Theme customization allows you to edit the appearance of your theme.
Options are conveniently grouped in layout sections, and a number of controls that allow the modification of fonts and colors are available.
If you want to backup your skin and import it at a later time, please refer to the “Framework settings” section of this document.
A large number of selected fonts from the Google Web Fonts library is available for you to use in the theme Customize screen.
From the “Theme appearance” page you’ll find advanced font settings.
Here you can add your Typekit kit ID or include code from other external fonts web services like Fonts.com, Fontdeck, etc.
Typekit kit ID
Paste you Typekit kit ID in order to use your Typekit fonts directly on in the WordPress Customizer.
You might want to read more about how to create a kit on the Typekit website.
Please remember to always add your development domain to the Typekit kit domains list. You can read more about this topic here and here.
External import code
You can use the “External import code” textarea to add the code needed by your webfont service in order to import its custom fonts.
Fonts in use
Here you can choose to refine your font variants. Variants can then be used in the “Custom frontend CSS” textarea on the “Custom CSS” tab.
For each font family imported in the theme you’ll find a reference to the CSS selector in use for that family. Clicking on it will automatically select the whole selector, so that you can copy and paste it in the “Custom frontend CSS” textarea or in your external CSS file.
Custom fonts upload
If you want to use your own font, create a new font-face kit using the font-face Kit Generator from Font Squirrel or download an already created Font Face Kit and upload it under the Custom fonts upload tab of the Theme appearance page. You’ll then find your newly uploaded font in the fonts selection dropdown menu.
This theme supports the following post formats:
Some post formats feature specific options; if the selected post format needs a more specific control, an additional metabox will appear right under the post title in the post editing screen.
The “Framework settings” page is intended to offer advanced control over the installation of the theme, allowing for admin customization and data backup and restore.
A Super user is a registered administrator that can edit the Framework settings. By default, all admins can edit the settings contained in this page, however it is possible to restrict the access to it only to a selected group of admins.
To do this, simply fill the “Super users” field with a comma-separated list of the usernames you want to allow access to the “Framework settings” page.
A particularly useful note about customizing the theme for your client: by specifying a Super User you’ll also disable all theme updates notifications to non-super users.
The “Super users” field will be displayed only if there is more than one user registered.
If you want to add some extra CSS to the WordPress Administration area and in the WordPress Login page or modify the login logo, you can do so from the “Framework Settings” page under the “Admin customizations” tab.
Export and import
The theme offers the ability to export and backup your options and customizations to the theme’s appearance. Backup is handled through the Export tab which will prompt you to save a file with “.thb-backup” extension upon submit.
If you want to import your options at a later time, simply open the Import tab, and upload the previously saved “.thb-backup” file. Please note that this will completely overwrite your options/skin settings.
Dummy content removal
If you’ve imported the contents from the WordPress exporter XML file, you may want to remove them once you’ve set up your theme. To do so, just open the “Dummy content” tab in the “Framework settings” options page, and select which imported contents you want to remove.
An extensive collection of F.A.Q. is included in the theme option panel, on the Welcome page and from the red link called “help” under “Appearance > Theme Options” and “Appearance > Framework settings” pages.