- 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
- 3.3.1 Required plugins
- 3.3.2 Suggested plugins
- 3.3.3 How to replicate the demo content
- 3.3.4 Auto updates
- 3.3.5 Manual updates
- 3.3.6 Updating the required/suggested plugins
- 3.3.7 Options presets
- 3.3.8 Refresh the website’s permalinks
- 3.3.9 Regenerating the media library thumbnails
- 3.3.10 Setting up the home page
- 3.3.11 Images
- 4 Advanced setup
- 4.1 Custom logo upload
- 4.2 Menus
- 4.3 Social links
- 4.4 Portfolio
- 4.5 Trips
- 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
- 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.
How to replicate the demo content
To load the demo content in your website, make sure to install the official WordPress Importer plugin.
After the plugin has been installed, go to the “Tools > Import > WordPress” page, and upload the dummy content XML file provided in the theme package.
After the dummy content has been uploaded, you’ll need to associate a menu to the theme defined menu locations (the main menu is usually called “Primary“).
If the demo menu has a mega menu, you’ll have to re-apply the mega menu setting to the menu item you want to appear as a mega menu. You can do so by editing the first level menu item, and checking the “Is mega menu?” option.
You can then set a static page to be your website’s home: head over to the “Settings > Reading” options panel, then choose your new front-page from the “A static page” select option.
The font used in our demo is called WC Mano Negra, designed by WC Fonts. The a pre-packaged version of the font generated via the FontSquirrel font face kit generator is included in the theme, and you can select the fonts to use it from the fonts select in the WordPress Customizer.
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
The theme define several image sizes that you can find in the config/config-general.php file:
- add_image_size( ‘micro’, 80, 80, true ): used for related posts
- add_image_size( ‘thumbnail’, 150, 150, true ): system image size used also on page/post builder blocks
- add_image_size( ‘large’, 930, null, true ): system image size used in the single attachment page
- add_image_size( ‘large-cropped’, 930, 523, true ): used in the classic blog/archive loop and single post format (without sidebar)
- add_image_size( ‘medium’, 610, null, true ): system image size used also on page/post builder blocks
- add_image_size( ‘medium-cropped’, 610, 343, true ): used in the blog/archive loop with the sidebar enabled
- add_image_size( ‘full-width’, 1600, null, true ): used for the page header slideshow or the section background image
- add_image_size( ‘grid-large’, 400, null, true ): used by the grid layouts (photgallery, portfolio) on 3 and 4 columns configuration with * the “variable” height option set
- add_image_size( ‘grid-large-cropped’, 400, 400, true ): used by the grid layouts (photgallery, portfolio) on 3 and 4 columns configuration * with the “fixed” height option set
- add_image_size( ‘grid-small’, 300, null, true ): used by the grid layouts (photgallery, portfolio) on 5 columns configuration with the * “variable” height option set
- add_image_size( ‘grid-small-cropped’, 300, 300, true ): used by the grid layouts (photgallery, portfolio) on 5 columns configuration with the “fixed” height option set
If you’d like to learn more about the add_image_size function, you can do so by reading its Codex page.
Please note that if you need to modify a specific image size value, or you’re experiencing weird looking blurred images (especially when using full width backgrounds or slides), you must remember to regenerate your Media Library thumbnails. You can do that automatically by using a plugin like “Force regenerate”.
The theme supports retina images out of the box only for the website’s logo. If you have other needs concerning the appearance of images in devices with higher density, you can use a plugin such as WP Retina 2x.
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 two custom menu locations for the main and the mobile navigation and offers 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.
The register_nav_menus function is located in the config/config-general.php file.
With “Voyager” you have the ability to choose between two different header layouts from the “Theme options > Layout” tab under the “Header” section.
The first header option generates an inline menu navigation. If you enable this layout, the menu associated to the primary menu location will be displayed horizontally, and you’ll have the ability to have separate menus for desktop and mobile devices and an optional side drawer.
The side drawer can be enabled by adding a menu widget under the WordPress “Appearance > Widgets” panel in the “Hamburger sidebar” widget area.The side drawer will be automatically enabled on mobile devices and will display the menu associated to the mobile menu location even if the “Hamburger sidebar” is empty.
The second header layout option will disable the main inline navigation and move the primary menu location inside the side drawer. On mobile devices the navigation displayed in the drawer will be the one associated to the mobile location.
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.
One of the main features of the theme is the ability to create a series of geolocalized entries called Trips.
As you’ll see, the name isn’t all that important, since having such connection between hierarchical content and its location on a map can open up all kinds of interesting possibilities.
What is a “Trip”?
A “Trip” is an entry of the relative post type “trip”. A trip can have multiple “Stops”, and each stop can be geolocalized on a map.
Also, Blog posts can be linked to a Trip and its Stops.
Creating and editing a Trip
When you’re in the Trip editing screen, you’ll find various layout options in the “Options” tab of the “Theme options” metabox.
Trips support the very same slideshow/page header background and page builder functionality that is shared throughout the theme. In addition to that, each Trip can display a map of its Stops.
In the Trip editing screen you’ll find two tabs, called “Trip map” and “Trip stops” that will allow you to edit the trip data.
In the “Trip map” tab, you’ll find various options to edit what the Trip map will look like. Most of the options are self explaining, and are generally based on the Google Maps API specification.
Make sure to specify the Google Maps API key under Theme Options > General, in order for Google Maps to work both frontend and backend.
The coolest option is the one called “Map style”. This will allow you to deeply customize the map appearance, in terms of colors and information shown. You can get a better idea of what you can achieve with map customization by going to Snazzy Maps.
Just pick the style you like the most, and copy/paste it in the “Map style” textarea, and the theme will do the rest.
Trip Stops data can be edited through the “Trip stops” tab. After clicking on the “Add new stop” button, you’ll be presented with a variety of options concerning the Trip Stop data.
In its simplest form, a Stop is identified by a “Label” and a set of coordinates. Adding a Stop to a Trip will result in a new marker on the map (if the Stop “Show on map” option is set to “Yes”), and a new block in page (if the Stop “Show in page” option is set to “Yes”).
A stop can have a custom “Description” which is displayed when the Trip Stop is present in page, and can have its own custom “Marker icon” when it is shown on the map (a small-to-medium sized transparent PNG will do).
In the “Pictures” tab of the Stop editing modal, you’ll be able to add a series of pictures to the Trip Stop.
Trip Stops also have several layout variants (“Layout” tab), and can be specified a background image (“Background” tab).
Concerning layouts, here’s a quick breakdown of what they do:
- Full screen image: the background image is stretched wide to cover the entire stop width and height.
- Full screen image, centered text: same as above, but with text center aligned.
- Mosaic centered: the Stop pictures are arranged in a mosaic view (see below), and aligned to the center of the screen.
- Mosaic left: the Stop pictures are arranged in a mosaic view (see below), and aligned to the left of the screen, with text on the right.
- Mosaic right: the Stop pictures are arranged in a mosaic view (see below), and aligned to the right of the screen, with text on the left.
- Image on the left: left aligned image that stretches till the left margin of the viewport.
- Image on the right: right aligned image that stretches till the right margin of the viewport.
Additionally, each Stop can take the whole viewport dimension in height, to create a vertical one-page slide layout effect.
Blog posts that are linked to the Trip Stop are shown below the Stop title and description in a list format. Even when they’re present, they can be hidden by checking the “Hide posts” option.
Also, whether posts are shown or not, you can make the Stop automatically display a “View gallery” button, that shows all featured images and gallery images of blog posts associated to the Stop in a lightbox format.
In the “Layout” tab, under the “Mosaic options” section, you’ll find specific options concerning the appearance of Stop pictures when a Mosaic layout is selected.
Mosaic layouts are composed using the jQuery Photoset Grid plugin.
The “Gutter” option allows you to control the spacing between images, and the “Image size” option allows you to choose the images dimensions. The “Module” option is the one that’ll determine the mosaic layout: if you have six pictures, entering a module of “231” will produce two images in the first row, three in the second, and one in the last row of the mosaic.
When using a mosaic layout, make sure to load images that are properly dimensioned so that image size generation won’t fail. (e.g. if images aren’t big enough, cropping will fail and will result in a kind of broken layout).
Linking blog posts to a Trip Stop
In the blog post editing screen, look for the “Trip” tab in the “Theme options” metabox and fill both the “Trip” and “Trip stop” select.
When a blog post is associated to a Trip and a Stop, it will be shown in the stop posts’ list in the Trip page.
Also, posts belonging to a Trip will display the Trip itinerary, which is a list of the Trip’s stops, in their sidebar.
Trips global options
You can access the Trips global options from the theme’s “Theme options” panel located under the “Appearance” menu in the WordPress admin.
You’ll be able to edit the URL slug for Trip entries, and the text of the “Show Map” button in the Trip page.
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.
Common layout behaviors
The splitted width layout option is available only if the “Hamburger sidebar” is empty and the first header layout (under the “Theme options > Layout” “Header” section) is enabled.
If you have applied this layout option to a page, then fill the “Hamburger sidebar” or switch to the second header layout option the page layout option will automatically switch to the first layout option.
Each slideshow video slide have the support for a poster image. This image will be used on mobile devices to replace the video.
YouTube and Vimeo videos will automatically generate a poster image, you can anyway replace this behavior by uploading your new one in the video slide “Poster image” upload field.
The self-hosted video requires a poster image in order to ensure an appropriate fallback on mobile devices.
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.