- 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
- 5 Working with Shortcode Ultimate
- 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.
In order to use the Portfolio feature of this theme you’ll need to activate the “THB-Portfolio” plugin. Normally, the plugin is activated upon the theme installation.
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.
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:
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.
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 http://example.com/works/your-work.
If you set the “URL slug” to “portfolio”, the resulting permalink for Portfolio items will be http://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.
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 “Appearance” section in the aforementioned tab.
In pages and post-type entries, a box called “Layout” is entitled to manage all the options concerning the appearance of the page or post.
Sidebars are actually supported only on the Footer and Single post.
Custom sidebars can be created from the “Theme options > Sidebars” section
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 “Appearance” section of our “Theme options” tab you’ll find the advanced font settings.
Font import section:
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 section:
Here you can choose to refine your font variants. Variants can then be used in the Custom frontend CSS textarea on this 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 section in the Theme options 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.
Working with Shortcode Ultimate
A page named “Some shortcodes” contain several plugin shortcodes example.
This theme has been designed to work with Shortcode Ultimate plugin.
A note about the plugin feature “Posts”
this theme include a customized template for:
- templates/default-loop.php – posts loop
- templates/teaser-loop.php – posts loop with thumbnail and title
- templates/single-post.php – single post template
these templates are located under the theme “templates” folder.
A couple of configuration examples:
- [su_posts template=”templates/teaser-loop.php” posts_per_page=”3″] (small thumbnail, post date, post title and comments number)
- [su_posts template=”templates/default-loop.php” posts_per_page=”5″] (large thumbnail, post date, post title, excerpt, comments number)
- [su_posts template=”templates/teaser-loop.php” posts_per_page=”5″ taxonomy=”category” tax_term=”photography”] (loop of 5 items from the photography blog category using the teaser loop style)