Superba documentation

Contents

Installation

To install this theme, simply make sure to have a correctly running copy of WordPress, and install then activate our theme.

Installing WordPress

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.

Required plugins

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.

THB-Portfolio: 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 “Projects” 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.

Suggested plugins

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.

Photographer demo

To import the dummy content of the Photographer demo, go and use the XML file you can find in the “Dummy/Photographer” folder of the main theme package you’ve downloaded.

After that, you’ll also need to import the provided backup file in the same folder, that sets up a series of global settings and customizations. You can do so by uploading the thb-dummy-photographer.thb-backup file using the control located under Appearance > Framework settings > Import in the WordPress administration.

Agency demo

To import the dummy content of the Agency demo, go and use the XML file you can find in the “Dummy/Agency” folder of the main theme package you’ve downloaded.

After that, you’ll also need to import the provided backup file in the same folder, that sets up a series of global settings and customizations. You can do so by uploading the thb-dummy-agency.thb-backup file using the control located under Appearance > Framework settings > Import in the WordPress administration.

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

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.

How to update your theme

Important: before beginning the update procedure, make sure to make a backup of the theme folder inside your WordPress themes folder, located in /wp-content/themes/your-theme.

Also, before downloading the updated package, make sure to read the version changelog and the list of changed files.

We strongly suggest to use the provided child theme, as it would not break the theme compatibility with future updates.

When updating, or when switching from a previous WordPress installation, we warmly recommend that you regenerate the theme’s Media Library items thumbnails: you can do that automatically, using a plugin like “Force Regenerate thumbnails”. Unused image sizes will also be cleared from your media library.

If you want to manually upgrade your theme you can follow these guidelines:

To update the your theme, re-download the theme, extract the zip file’s contents, find the extracted theme folder, and upload it using a FTP client to the /wp-content/themes/your-theme folder in your server. Beware: this will overwrite the old files! That’s why it’s important to backup any changes you’ve made to the theme files beforehand.

If you didn’t make any changes to the theme files, you are free to overwrite them with the new files without risk of losing theme settings, pages, posts, etc. Backwards compatibility is guaranteed. If you have made changes to the theme files, you will need to compare your changed files to the new files listed in the changelog below and merge them together.

Update plugins

How to update our plugins:

In order to update a plugin bundled with our theme (for example “THB Portfolio”) you’ve to follow these steps:

  1. Go to “Plugins > Installed plugins”
  2. Deactivate the plugin (for example “THB Portfolio”)
  3. Delete the plugin
  4. Go to “Appearance > Install plugins” and install the required plugin (for example “THB Portfolio”)
  5. Activate the plugin

You can then check that the version number has changed in the “Plugins > Installed plugins” page.

You can view a quick video about “how to update a plugin” on our YouTube channel.

Options presets

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

Images will be imported into the Media library when you upload the dummy content xml. All images are from Unsplash licensed under CC0 license.

Image sizes

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’, 160, 160, true ): system image size used also on page/post builder blocks
  • add_image_size( ‘large’, 1160, null ): system image size used in the single attachment page
  • add_image_size( ‘large-cropped’, 1160, 650, true ): system image size used in the single attachment page
  • add_image_size( ‘medium’, 760, null ): system image size used also on page/post builder blocks
  • add_image_size( ‘medium-cropped’, 760, 420, true ): system image size used also on page/post builder blocks
  • add_image_size( ‘carousel’, null, 600 ): used for the carousel gallery page template
  • add_image_size( ‘grid-large’, 360, null ): 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’, 360, 360, 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’, 200, null ): used by the grid layouts (photgallery, portfolio) on 5 columns configuration with the “variable” height option set
  • add_image_size( ‘grid-small-cropped’, 200, 200, 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”.

Retina support

The theme supports retina images out of the box only for the website’s logo, the splash page logo and the page loader 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.

Advanced setup

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 for the website, loading page or for the website on mobile displays 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.

Menus

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.

Social links

Global links to social network pages can be set up under the “Social” tab in the “Theme options” panel. Each link must be a valid URL that points to the respective profile page on the social network.

In order for a link to be considered valid, it must begin with either http:// or https://.

After global social links have been set up and saved, the Theme options page must be refreshed. After refreshing the page, you’ll be able to select which social networks links will be displayed alongside the copyright text area on the bottom of the pages in form of icons, through the “Social networks in the footer area” option.

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.

Projects

Global options concerning the Projects custom post type can be found under the “Projects” 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 projects. For example if you’ve set up pretty permalinks, by default projects can be reached from a URL such as example.com/works/your-work.

If you set the “URL slug” to “project”, the resulting permalink for Portfolio items will be example.com/project/your-work.

Important: please note that you cannot use the same slug for projects and the Projects 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 projects” link in the single project page you have to choose which page will be your projects index page. You can do that by choosing your desired page from the select called “Select the Projects index”. In this select only pages with the “Projects” page template applied will be shown.

Layout

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.

Similarly, you can also add custom frontend JavaScript in the “Custom frontend JS” textarea located under the “Custom JS” tab in the “Theme appearance” page. The option automatically generates a script tag placed at the bottom of the 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.

Pages

The theme features ten different page templates. Under the “Theme options” box in the page editing screen, you’ll find options to edit specific aspects of the page templates, such as:

  • Page subtitle as long with its position,
  • Disabling the page title and subtitle by checking the “Disable page header” checkbox,
  • Page header alignment,
  • Page width.

The available page templates are:

  • Default
  • Album – carousel, will display pictures and videos in a centered carousel format
  • Album – grid, will display pictures and videos aligned on a grid
  • Album – mosaic, will display pictures and videos in a mosaic with pieces of different proportions
  • Album – slideshow, will display pictures and videos in a slideshow, with an option to make it full screen.
  • Blank page, with no header or footer
  • Blog, a regular blog
  • Blog grid, a grid-like blog layout
  • Projects, a page where projects will be displayed if the THB Portfolio plugin is activated
  • Splash page, a blank intro page with a full screen background image with options to set headings, a call to action, social links and a custom logo.
Album pages

Under the “Theme options” box in the page editing screen, album pages also have the option to select the skin of the gallery mode that is loaded when clicking on one of their images.

Album options

Options regarding the contents of the album can be found under the “Gallery” tab of the page editing screen.

All albums have an option to include contents from other albums or projects (if the THB Portfolio plugin has been enabled) with the Include images & videos from projects and other albums option, and can also filter the import to a specific set of categories with the Gallery categories option.

Under the “Images and videos” section, you will be able to add new content to the album, by adding images or videos. After adding an image or video, you can click on the respective “Edit” button to open a modal window that will let you specify details concerning the media item.

The title and caption are displayed when the item is loaded in the gallery mode, while specifying one or more categories will allow to properly tag the image.

Media categories

The taxonomy used to categorize media items can be found in the Media panel in the WordPress admin, under “Gallery Categories”.

Images and videos can only be tagged in album pages, and for this reason the association between a taxonomy item and its images/videos is not set anywhere else.

Carousel albums

On top of the regular album options described above, carousel albums have an option to highlight the media item being displayed through the Highlight only the active carousel slide checkbox control.

Slideshow albums

On top of the regular album options described above, slideshow albums have options to select their transition effect (Slideshow effect select control), can go fullscreen (Enable full screen display checkbox control), and can load specific image sizes (Image size select control) to reduce the page load (see the Image sizes section of this document for further information).

Grid albums

On top of the regular album options described above, grid albums have options to select the number of columns displayed (Columns select control) and a control that will let you choose between a masonry-style grid and a regular grid (Images height select control): selecting a “Fixed” value will display a regular grid with square thumbnails, while selecting “Variable” will display a masonry grid with varying height thumbnails.

The Items loaded at a time control will allow you to display only a small set of items on page load, and load the rest of your items via AJAX.

Being a grid-like album layout, this page has a filter that is on by default on top of the grid. You can hide the filter through the Hide filter checkbox control.

Mosaic albums

On top of the regular album options described above, grid albums have options to select the mosaic module (Mosaic module input control) and gutter (Mosaic gutter number control).

In this page template you can also load specific image sizes (Image size select control) to reduce the page load (see the Image sizes section of this document for further information).

Being a grid-like album layout, this page has a filter that is on by default on top of the grid. You can hide the filter through the Hide filter checkbox control.

Album builder block

Album pages can also be referenced in other pages thanks to the Album builder block. In the block editing modal, you’ll be able to select which album to pick up, and set various options concerning its appearance.

Splash page

The splash page is mean to be used as a full-screen background intro page, with a big heading on top of the background, with minimal controls and no navigation menu.

You can set the background image to be used in this page by setting its Featured image.

You can find the Splash page controls in the “Theme options” box of the page editing screen, conveniently grouped.

Most of the options are pretty much self-explanatory. The only thing that’s worth noting is the Overlay options, that are meant to create an overlay effect on the image in order to enhance the legibility of texts placed upon it.

A dark overlay color, even with its opacity set to 0, will generate white texts; a light overlay color, will generate dark texts.

Notes concerning images
  • By checking the Disable right click on images option located under Appearance > Theme options > General > Theme functionalities in the WordPress administration, you can prevent visitors from right clicking your images without the need to install an external plugin to do it.

Layout builder

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.

Sections

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.

Rows

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.

Columns

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.

Blocks

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.

Icons

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: icon-code-of-the-icon.

Projects

Enable the provided THB Portfolio plugin in order to enable the Projects custom post type. Projects are going to be displayed in pages with the Projects page template.

Each project is defined by a title, content, a cover image (featured image) and a series of data that can be found in the “Project data” tab in the project editing screen.

Most of the data connected to the project is pretty much self explanatory. However a few notes need to be pointed out:

External URL

An external URL for the project. When you specify an URL in this field, projects listed in Projects pages will redirect to that URL directly, instead of their individual page on the website.

Details

A series of label/value fields that is displayed after the main content of the project. If labels are URLs, they automatically turn into clickable links.

Images & Videos

Just like for Album pages, a series of images and videos that can have a title, description, and that can be catalogued under one of the categories created under Media > Gallery Categories.

These images are displayed below the content in the project page.

Sidebars

Custom sidebars can be created from the “Theme options > Sidebars” section

Sidebars are actually not available on the 404 page.

Footer

The theme can display a footer section at the bottom of all the pages. The section can be structured to have a number of columns of different widths. The Layout option under the Footer heading will allow you to choose both how many columns you’re going to have in the footer and their dimensions.

Selecting the “None” option will disable the footer area entirely, while selecting a column configuration will automatically create a new WordPress Widget Area. A widget area is a section of the page which can be filled with widgets, which are little, reusable and configurable bits of contents. To learn more about widgets, you can refer to their WordPress documentation page.

Footer widget areas are named as “Footer column #”, and can be edited under the Appearance > Widgets section of the WordPress administration.

Responsive

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.

Customizer

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.

Fonts

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.

Fonts imports

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.

Post formats

This theme supports the following post formats:

  • Aside
  • Gallery
  • Link
  • Image
  • Quote
  • Video
  • Audio

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.

Framework settings

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.

Advanced

In the “Advanced” tab of the “Framework settings” page, you’ll be able to optionally compact theme’s Javascript files on frontend. This is particularly useful as it noticeably increases performance, and doesn’t force you to use a plugin just for that.

Super users

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.

Please note The “Super users” field will be displayed only if there is more than one user registered.

Admin customizations

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.

FAQ

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.

Support

In order to keep valuable information organized, and to provide a better service to our users, please note that support is offered on our Support platform only. Support requests submitted via either comments on the item’s page on ThemeForest, or via email, will all be redirected to the forum.

Before opening a report please make sure to read our policy about “How to ask for support”, then go through the appropriate forum which is the one specifically dedicated to the product you bought, and click on the green “Report a bug” button.

Note If you have some issues with the theme and you have installed additional plugins, please disable them first and check if the issue persists.