Installing, Securing WordPress and First Steps

What is WordPress?

WordPress is a free content management system (CMS) that powers more than quarter of the internet.

It can scale with your business when you're ready to grow and is easy to learn with many free and low-cost tutorials for beginners. No matter your level of knowledge, there is a WordPress tutorial to help you create, update, and fix your site.

What is a theme?

A WordPress theme changes the way your site looks and affects the style of the content displayed on it. WordPress themes are built so you can change your site's design without losing content.

There are themes out there that can lock you into their ecosystem, unfortunately. But we play nice and Icelander is not one of them :)

What is a plugin?

A WordPress plugin adds additional functionality to your site. There are many plugins available for free in the plugin directory, along with many premium ones out there to address nearly every site need, from eCommerce to email marketing to user registration.

You can check the recommended plugins in the appropriate section of this documentation.

Installing WordPress

You can run WordPress locally on your computer, or install and use it on your web hosting account (what kind of web hosting should you use?).

Icelander requires WordPress version 4.7 to work properly.

Securing WordPress

You can improve your WordPress installation security taking these steps:

  • Set the Authentication Unique Keys and Salts in wp-config.php file.
  • Do not use admin as user name and set strong passwords!
  • After installation is done, remove wp-admin/install.php file.
  • Keep backups of the database and WordPress files.
  • Keep your WordPress installation, plugins and themes up to date!
  • You can further strengthen the security of your site by using a specialized plugins and services.

Theme Installation

How to Install the Theme?

Theme purchased on a marketplace

  1. (Re)download the theme package ZIP folder from the marketplace where you've purchased the theme from.
  2. Log into your WordPress admin.
  3. In WordPress admin navigate to Appearance » Themes and click the [Add New] button next to "Themes" page title.
  4. On "Add Themes" screen click the [Upload Theme] button next to page title.
  5. On the next screen choose the theme ZIP package file you've downloaded in step 1 above and click the [Install Now] button.
  6. After the theme is installed, activate it by clicking the "Activate" link.

Free theme available via WordPress.org repository

  1. Log into your WordPress admin.
  2. In WordPress admin navigate to Appearance » Themes and click the [Add New] button next to "Themes" page title.
  3. On "Add Themes" screen use a search field to search for "Icelander".
  4. Once you've found the theme in the search results list, click the [Install] button when hovering over the theme.
  5. After the theme is installed, activate it by clicking the "Activate" link.

Tip: Welcome page

After activating the theme, you can read the theme's welcome page navigating to Appearance » Welcome (you can disable this page in Appearance » Customize » Theme Options » Others).

Important: Subscribe for updates

It is strongly recommended to follow or subscribe to WebMan on Facebook or Twitter to get the most recent theme update notices as fast as possible.

You should always keep your WordPress, themes and plugins up to date!

Theme Update

How to Update the Theme?

You will be notified in the WordPress admin bar each time a new updated theme version is released. To install this updated theme version please follow the steps below.

IMPORTANT:

If there is a specific procedure required for the theme update, this will be clearly stated on the WebMan's Facebook and Twitter pages.

Updating main stylesheet

After each theme update the main CSS stylesheet file gets regenerated to incorporate all the new style changes introduced in the updated theme version. You will get notified about this in the WordPress admin area.

Back Up!

It is strongly recommended to back up your theme settings before you update the theme. This is only a precaution procedure and a good practice.

For backing up the theme (customizer) settings, please use the Customizer Export/Import plugin.

Automatic Theme Update

If none of these apply to you, you need to update the theme manually (see below).

Manual Theme Update

First you need to download the theme ZIP package from your marketplace.
  • Updating via WordPress dashboard

    A simple way of doing a manual theme update would be deleting and reinstalling the theme directly via WordPress dashboard. You can read an article or watch a video on how to do this.

  • Updating via FTP

    This is a more advanced manual theme update procedure and you will need an FTP client (such as FileZilla) to connect to your server:

    1. (Re)download the theme package ZIP folder from the marketplace where you've purchased the theme from and unpack the theme installation ZIP file on your computer.
    2. Now you will need an FTP client to connect to your server.
    3. On your server navigate to YOUR_WORDPRESS_FOLDER/wp-content/themes/ folder.
    4. Delete the existing icelander folder (or create a backup just in case).
    5. Copy the unpacked theme icelander folder from your computer (from step 1. above) to the YOUR_WORDPRESS_FOLDER/wp-content/themes/ on your server.
    6. Log into your WordPress admin area and check the version of the theme in Appearance » Themes. Your theme should be updated now.

Anatomy or What, Where and How?

  1. Basics (Site container, Header, Intro section, Footer)
  2. Page content
  3. Blog, archives, search results
  4. Post content
  5. Custom post types
  6. Shop content

Basics (Site container, Header, Intro section, Footer)

(Click the item below to reveal more info. Click the image to download a bigger size.)

↑ Back to anatomy selection

↑ Back to anatomy selection

Page content

(Click the item below to reveal more info. Click the image to download a bigger size.)

↑ Back to anatomy selection

↑ Back to anatomy selection

Blog, archives, search results

(Click the item below to reveal more info. Click the image to download a bigger size.)

↑ Back to anatomy selection

↑ Back to anatomy selection

Post content

(Click the item below to reveal more info. Click the image to download a bigger size.)

↑ Back to anatomy selection

↑ Back to anatomy selection

Custom post types

You need WebMan Amplifier plugin to enable this functionality.

(Click the item below to reveal more info. Click the image to download a bigger size.)

↑ Back to anatomy selection

↑ Back to anatomy selection

Shop content

You need WooCommerce plugin to enable this functionality.

(Click the item below to reveal more info. Click the image to download a bigger size.)

↑ Back to anatomy selection

↑ Back to anatomy selection

Installing Plugins
Main recommended plugins | Other useful plugins

What are Plugins and Why Do I Need Them?

Do you ask why do you need to use plugins when you expected the theme to have all the functionality in it?

According to WordPress guidelines, the themes are meant for presentational purposes only, while plugins provide website functionality.

The reason is simple. When you decide to update your website look in the future, you simply change the theme without loosing your website content and additional functionality such as shortcodes, e-shop or forum functionality among others.

This theme follows this basic WordPress philosophy and you can sleep assured your website is as future-proof as possible!

While you get beautiful look for your website with this theme, it also supports and integrates seamlessly with various plugins. For more info please read on.

Installing Recommended Plugins

The theme uses the TGM Plugin Activation script that prompts you to install recommended plugins after you activate the theme.

The suggested recommended plugins are essential to provide the core functionality the theme relies on and/or to ease out the process of editing your website pages. You can still use the theme without these plugins, however, its functionality and your user experience would be limited.

Plugins Compatibility

Other plugins than the recommended ones should work with the theme with no issues, though some might require additional tweaks to integrate them 100% with the theme (this is usually the case of more robust plugins such as e-shop or directory plugins).

Please understand that there are thousands of plugins available for WordPress and it is not possible for any theme developer to test the theme with all of them. Icelander was tested with most of the popular plugins. You can install any custom plugin following the WordPress instructions (or following the plugin documentation).

In case of any plugin incompatibility or error, please, contact the plugin support first before contacting WebMan Design Support Center.

Bellow you'll find a list of plugins that were successfully tested with the theme and works with it without any conflicts:

WebMan Amplifier
(https://wordpress.org/plugins/webman-amplifier/)

This plugin extends the theme's functionality with additional content types, custom icon font, metaboxes, shortcodes (with page builder compatibility) and custom widgets.

It also provides seamless integration with Beaver Builder page builder plugin.

This is essential plugin to provide advanced functionality for the theme and you will be prompted to install it after theme activation.

Beaver Builder
(https://www.wpbeaverbuilder.com Pro, https://wordpress.org/plugins/beaver-builder-lite-version/ Free)

If you need a page builder plugin to create your pages with ease with a front-end drag and drop editor, I highly recommend using the Beaver Builder plugin. The plugin is available both in free Lite version and payed Pro version. The theme is 100% compatible with this plugin.

For more info on the plugin please visit the Beaver Builder website where you can also find the instructional videos for this page builder plugin.

When you install a WebMan Amplifier plugin, it will enhance the free (and also the paid) version of Beaver Builder with custom theme page builder elements. You can then create the exact same website as the theme demo website with a free Beaver Builder only!

The theme is fully compatible also with Beaver Themer to create your own custom header, footer, post, archive, product,… layouts! Check out the plugin information below.

WebMan TemplatesA set of predefined page builder templates

If you are using Beaver Builder page builder, you can benefit from predefined theme page builder row templates. Just install and activate the WebMan Templates plugin and all the predefined templates will be available in Beaver Builder when you edit the page. The plugin automatic installation will be suggested to you after you activate the theme, alternatively you can install the plugin manually.

Additional resources

Beaver Themer
(https://www.wpbeaverbuilder.com/beaver-themer/)

This is a paid add-in for Beaver Builder plugin which lets you create layouts for archive pages, template an entire post type, 404 and search results pages, and create parts like headers and footers.

This theme is 100% compatible with this flexible, advanced plugin so you can create any website you like with no coding at all! Read more about Beaver Themer at the plugin website.

WooCommerce
(https://wordpress.org/plugins/woocommerce/, https://woocommerce.com)

WooCommerce is the world's most favorite eCommerce solution that allows you to sell anything, beautifully.

This theme is fully compatible with WooCommerce e-commerce plugin out of the box, so you can start selling immediately. Just install, activate and setup the plugin and you are ready to go!

Once you set up your main shop page, by tweaking its options and/or setting the page template, you can actually change the layout and appearance of all shop archive pages. Additional shop related settings can be found in Appearance » Customize » Theme Options » Shop.

Since WordPress 4.7 you can set a custom post type page template for WooCommerce products. It supports "With intro widgets" and "No intro" page templates.

Tip: Image sizes

Set up these WooCommerce product image sizes for the best compatibility with the theme:

Catalog Images480 px × Use any custom height
Cropped
Single Product Image1200 px × Use any custom height
Cropped
Product Thumbnails120 × 120 px
Cropped
Tip: Product intro image

If you would like to display a custom Intro section image on a single product page, use an intro_image custom field for that.

Tip: Shop sidebar

You can enable or disable the sidebar on shop archive pages by setting widgets for "Shop Sidebar" sidebar or leave it empty.

Additional resources
Tip: Dynamic WooCommerce page title with page builders

When using a page builder and hiding the default page title on a special WooCommerce pages (such as Cart, Checkout and My Account page), you loose the ability to adapt your custom page title to an actual page being displayed (such as when previewing orders on your "My Account" page, the page title should read "Orders" instead).

This theme resolves this issue by introducing a special %wc_title% placeholder you can use in page or page builder content to display a dynamic page title.

Advanced Custom Fields
(https://wordpress.org/plugins/advanced-custom-fields/)

Use this plugin to create advanced page/post options metaboxes automatically for better user experience and easier setup of page/post options.

WooSidebars
(https://wordpress.org/plugins/woosidebars/)

For creating unlimited number of widget areas (sidebars) and using them anywhere on the website.

This plugin is actually also suitable for controlling and altering your website layout with ease. Here are some example usecases:

  • Want to remove a sidebar from certain page(s)?

    Just create a new custom widget area (let's call it "Empty") and set it to replace the "Sidebar" widget area on the specific pages. Once you leave this new widget area empty, with no widgets in it, the sidebar will simply not be displayed on the affected pages.

    Tip: Any custom-created sidebar in WordPress needs to be initiated first. This is done by adding widgets to the sidebar. You need to do this even for empty sidebar, though - just add a widget and then remove it so the sidebar can be properly recognized by WordPress.

  • Want to display a different widgets in intro section on certain page?

    Just create a new custom widget area (let's call it "About page intro widgets", for example) and set it to replace the "Intro Widgets" widget area on the specific page (the "About", for example). Then go ahead and add some widgets into the "About page intro widgets" area in Appearance » Widgets.

Additional resources
TIP: Controlling a single widget

If you would like to control a single widget display instead of the whole widget area, you can use Jetpack plugin's "Widget Visibility" feature (or try Widget Options plugin).

Jetpack
(https://wordpress.org/plugins/jetpack/)

This plugin was built by Automattic (the company behind the WordPress) and contains a lot of very useful tools for your website.

To choose some of the features included in this plugin: tiled galleries, image lightbox zooming effect, contact form, custom CSS, extra widgets, infinite scroll, better search, social networks sharing buttons, related posts display, CDN, site verification and others.

For more info on the plugin usage and functionality please visit the Jetpack.me website.

With this plugin you can create a perfect breadcrumbs navigation.

Read the instructions on custom plugin setup below.

Subtitles
(https://wordpress.org/plugins/subtitles/)

You can easily add posts and pages subtitles with this plugin.

Envato Market
(http://envato.github.io/wp-envato-market/)

If you obtained the theme from ThemeForest, you can use this plugin for easy automatic theme updates.

Other Great Plugins Worth Checking Out

You can use any plugin with this theme. Here are some tested, used and recommended plugins by the theme author:

Business Profile
Display your business's contact details with seo-friendly Schema.org markup.
Caldera Forms
A great form builder plugin for WordPress! Highly recommended!
Custom Post Type Editor
Allows you to rename any post type.
Customizer Export/Import
Perfect plugin for backing up your theme's customizer settings.
Disable Comments
Disables comments site-wide per post type.
Elementor Page Builder
Completely free frontend drag & drop page builder.
Front-end Editor
Edit your posts on the front-end of your site.
Imsanity
Automatically resizes huge image uploads.
Intuitive Custom Post Order
For easy posts ordering.
My Eyes Are Up Here
Helps you control how WordPress generates thumbnails.
Nested Pages
Provides a drag & drop interface for managing pages and posts in the WordPress admin, while maintaining quick edit functionality.
Page Links To
Lets you make a WordPress page (or other content type) link to a custom URL of your choosing.
Polylang
Making your WordPress website multilingual. A great free alternative to paid WPML plugin.
Post Type Archive Descriptions
Allows you to add a description to post type archive pages.
Rename Taxonomies
Allows you to rename any taxonomy.
Rich Text Excerpts
Enables rich text editing in excerpts for any post type which supports them.
Smart Slider 3
Great free advanced, layered slider plugin.
Social Warfare
If you don't want to use Jeptack plugin's social sharing buttons, you may try using this great plugin.
Theme Check
Checks your themes against the latest WordPress theme review standards.
Widget CSS Classes
Add custom classes to your widgets.
The theme integrates its predefined CSS classes directly into the plugin's interface automatically. You can just select the predefined class from the dropdown when editing a widget in Appearance » Widgets.
As the theme uses CSS flexbox in its horizontal widgets areas you can control the width of the widget with `set-flex-grow-#` classes.
Wordfence Security
A great plugin to keep your WordPress site secure.
WP Featherlight
The best free image lightbox (zooming) plugin that just works!

Installing Demo Content

Warning

  1. It is recommended to install the theme demo content into an empty, fresh WordPress site only. Otherwise it might mess up your existing content!
  2. Please note that the theme demo contains a lot of pages. You will certainly end up not using most of them. In that case it is highly recommended to delete the pages, posts, custom posts and media that you no longer need on your website. It improves your website SEO, speed and relevance.

Demo Images and Other Media Quality

Please understand that demo images, audio and video files are low quality due to copyright protection and you should replace them with your own, properly licensed images.

Demo Content Import Issues

Please note that there might occur some connection issues when downloading demo attachments (media files) from demo content servers during the demo content import process.

These, however, are just demo attachments (images, videos, audio files) and you are perfectly fine (actually, you should) replacing them with your own assets.

Other demo content (posts, pages and custom posts content) will be imported without any issues.

One-click Installation

For more info on automatic one-click demo content installation please read the Appearance » Welcome » "Installing the theme demo content". After installing and activating required One Click Demo Import plugin, head over to Appearance » Import Demo Data and run the import process.

In case you experience an issue during the one-click demo content import, please read the online information article.

Manual Installation

For detailed instructions regarding each demo content file installation and download, please visit the theme demo files repository at Github.

You can use this procedure in case the One-click Installation procedure fails. In that case it is recommended to delete (permanently) the imported media files from your media library and run the database reset with a plugin such as Advanced WordPress Reset.

Please check WordPress codex for information about manual demo XML file import issues.

Starter Content

This theme supports and contains its own WordPress starter content for easy and fast small website deployment.

The starter content is displayed in the theme customizer on clear WordPress installation only. Once you save the customizer settings, the starter content will be ported into your website automatically then.

If you have already created some posts or pages beforehand, you will not see the theme starter content in theme customizer.

Please note that this is only a very basic starter content suitable for small websites and if you want a more robust solution, install the full theme demo content instead.

Pages, Page Intro and Page Templates

Outdented Page Content

By default the theme displays the page content in 2 columns: H2 level headings in first and all the other page content in second column. This is to make the layout of the page not only prettier, but also more readable.

You can then use "Outdented content" in Formats button to make specific sections of your page content fullwidth (span the both columns), if you will.

If you, however, decide you would like to use more traditional, single column, fullwidth page content layout, you can set this in theme options in Appearance » Customize » Theme Options » Layout » Content.

Setting Up a Front and Blog Page

  1. In WordPress admin navigate to Appearance » Customize » Static Front Page (or to Settings » Reading).
  2. For "Front page displays" option set "A static page (select below)".
  3. Select the front page from dropdown list. This page will become your home page.
    Select the posts page from dropdown list. This page will become your blog page.
TIP: You can also do this in Customizer where you get live preview of your settings.

Page Excerpt

The theme adds support for excerpts also to WordPress pages. Page excerpt will be displayed in page intro section as well as in child pages list (read more in section about page templates).

If the "Excerpt" field is not displayed on a page edit screen, please enable it in the "Screen Options" tab in the upper right corner of the screen.

TIP: You can use Rich Text Excerpts plugin for rich formatted excerpts.

Page Intro Section

Page intro is basically a main title area of the page, post or archive page. By default it displays intro image (and video), page title (optionally with a subtitle) and page excerpt:

Page excerpt

Page Excerpt content depends on the page you are on.
If it is an actual WordPress Page or Post or any custom post type, you can set the "Excerpt" field (enable it in "Screen Options").
On taxonomy archive pages it displays the taxonomy (such as post category or tag) term description which you can set for any/all taxonomy terms in WordPress.
If you want to display some description text for the custom post type archive pages too, you need to use a plugin for that.

Image and Video

Intro image is taken from your website header images that can be set in Appearance » Customize » Header Media. That image can be then overridden by setting up a post/page featured image, which can be again overridden by setting up a dedicated intro_image custom field.

On single pages and posts the image is not displayed by default, unless you set a page featured image (or aforementioned custom field).

On front page of your website the intro section has a different, special layout with image (or video) background overlayed with a page title and excerpt. And yes, since WordPress 4.7 you can also set a video as a background for your front page intro section in Appearance » Customize » Header Media (please read "Bandwidth considerations" section for info about header video limitations in WordPress).

If you are using WooCommerce plugin, intro image is not displayed on single product pages even if you set a product featured image. If you really need to display an intro image there, use aforementioned custom field for that.

If you would like to remove the intro section (to set up your own with a page builder, for example), use "No intro" page template (or set up the specific custom field).

Colors of intro section can be customized in Appearance » Customize » Theme Options » Colors: Intro.

Intro Widgets

You can additionally display some widgets in the intro section. Just add those widgets into Intro Widgets area and set "With intro widgets" page template for the page or post.

Page Templates and Post Type Page Templates

Since WordPress 4.7 you can use page templates also with other post types. Where appropriate, this is stated in the list below. The theme contains these useful page templates you can use out of the box:

Blank Demo

There is no header, no intro section, no H1 heading tag and no footer on this page template. This page template works best with a page builder and is suitable for creating custom landing pages.

With intro widgets Demo

There is an additional "Intro Widgets" widget area displayed in the intro section of this page template. No intro widgets are displayed when the intro section is not displayed on the page or there are no widgets set in "Intro Widgets" sidebar.

Since WordPress 4.7 you can set this page template also for posts, projects, staff posts and WooCommerce products.
No intro Demo

Use this page template to remove the page intro title section (when you want to set up your own). Only the page content will be displayed.

For standard pages, the title will be accessibly hidden.

On the other hand, if you are using a Beaver Builder page builder, please, do not forget to set up your custom H1 heading, as it is being completely removed from the page in this case! The same applies for pages that you set to be ready for any other page builder.

This page template works best with a page builder.

Since WordPress 4.7 you can set this page template also for posts, projects, staff posts and WooCommerce products.
With sidebar Demo

By default, there is no sidebar is displayed on pages. However, if you would like to display a sidebar on a page, use this page template with it.

List child pages Demo

Please set this page template for a parent page only.

It will display a list of child pages below the actual (parent) page content. You can tweak each child page display by setting the corresponding page options.

There will be a page featured image (you can then even set a different intro image displayed on the actual page with a dedicated custom field), page title, page excerpt and optional "Continue reading" button displayed. "Continue reading" button is displayed only if the page has some actual content.

To set up a child page excerpt please use the "Excerpt" field on page edit screen (if the field is not displayed below the page content editor, enable it in "Screen Options" tab in the upper right corner of the screen).

If you would like to custom order your child pages, use page "Order" attribute. Or you can use a plugin for this, such as Nested Pages or Intuitive Custom Post Order.

Project layout Demo

This is a special custom post type template for displaying Project content in more traditional way. Read more under "Projects" section of this documentation.

Page Builder

The theme is fully compatible with the best front-end page builder plugin for WordPress, the Beaver Builder, which will help you create a complex page layouts with ease!

In case you'd like to use a different page builder plugin, the theme was tested and is working with 6 most popular ones and should be compatible with any decently coded page builder.

Posts

Post Excerpt

Post excerpt will be displayed in posts list. If no excerpt is set, a portion of post content will take its place in posts list (if set, until <!--more--> tag).

If you set the "Read more" tag inside the post content and you also set a post excerpt, first the post excerpt followed with post content (until "Read More" tag) will be displayed in posts list.

If the "Excerpt" field is not displayed on a post edit screen, please enable it in the "Screen Options" tab in the upper right corner of the screen.

Tip: Changing excerpt size

The default WordPress excerpt size is set to 55 words (reduced by the theme to 40 words). If you would like to change this, use this code in your child theme's functions.php file:

function child_theme_excerpt_length( $length ) {
  return 20; // Now we set the excerpt to 20 words.
}
add_filter( 'excerpt_length', 'child_theme_excerpt_length', 20 );

TIP: You can use Rich Text Excerpts plugin for rich formatted excerpts.

TIP: If you are displaying posts with WM Posts / Custom Posts page builder element, you can modify the layout with helper CSS classes.

Post Page Templates

Since WordPress 4.7 you can set a custom post type page template for posts, too. It supports "With intro widgets" and "No intro" page templates.

Table of Contents on Parted Post

If you are setting up a multipage post (using a "Page break" button in visual editor, or <!–nextpage–> tag in "Text" tab of visual editor), the automatic table of contents will be generated for the post/page for you.

All you need to do is to set up a post parts titles at the top of each post part (so, immediately after <!–nextpage–> tag) with H2 heading.

Blog Styles

This theme comes preset with multiple blog styles. You can set them globally for your posts archive pages in theme options in Appearance » Customize » Theme Options » Blog

Archive Title Prefix

By default WordPress adds some general caption, prefix to the archive page title, such as "Category:" in front of a category name on category archive page. You can disable these in Appearance » Customize » Theme Options » Others

Projects

What Are They and How to Use Them?

Projects custom post can be used to showcase your work. You can place any content into projects and create stunning complex layouts using Beaver Builder page builder plugin.

Each project can be categorized and tagged and you can use these taxonomies for portfolio filtering in dedicated Beaver Builder "Posts (custom posts)" element.

Projects can be set to display in various styles in Appearance » Customize » Theme Options » Layout.

On Projects archives pages, there will be a filter displayed on top of the posts list from (not empty) project categories.

To display all projects on your site, you can use a projects archive page link in the navigation.

This custom post type is provided via WebMan Amplifier plugin.

What Beaver Builder element to use to display Projects?

Use "WM Posts (custom posts)" element and set the "Post type" option to "Projects".

Before using Beaver Builder page builder with this custom post type you need to enable it in Beaver Builder's settings first.
Navigate to Settings » Page Builder » Post Types.
Since WordPress 4.7 you can set a custom post type page template for these posts. It supports "With intro widgets" and "No intro" page templates.

TIP: If you would like to point the post to a custom URL, try using a Page Links To plugin.

TIP: If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies related to this post type, use the Rename Taxonomies plugin.

TIP: For custom posts order use a plugin, such as Intuitive Custom Post Order.

"Project layout" post type template

This custom post type contains a predefined special post type page template, the "Project layout", which lets you display project content in more traditional way: project description in one column, and project gallery in another column. There is no sidebar displayed on this template.

The gallery can be created in 2 ways:

  • Just upload project-related images directly from the project edit screen. This way those images will get associated/connected with that particular post and gallery can be automatically created by the theme. This is default WordPress behavior.
  • For much more flexible way with more control over the gallery, you can simply insert the gallery anywhere into post content. You can edit it however you want - add, remove, link or reorder any image. The theme will automatically grab the (first) gallery it finds in post content and place it correctly in the project layout on your website front-end.

Staff posts

What Are They and How to Use Them?

With staff custom post you can easily manage your company team info.

Post excerpt is displayed in posts listing, and if the Staff post contains some content, a "Nice to meet you!" button is displayed too. After clicking the button you get to single Staff post page with full profile of the person.

The featured image is used as a Staff photo.

Organize your Staff posts with dedicated tags, departments, set a team member position and specialties.

On Staff posts archives pages, there will be a filter displayed on top of the posts list from (not empty) staff departments.

To display all staff posts on your site, you can use a staff archive page link in the navigation.

This custom post type is provided via WebMan Amplifier plugin.

What Beaver Builder element to use to display Staff?

Use "WM Posts (custom posts)" element and set the "Post type" option to "Staff".

Before using Beaver Builder page builder with this custom post type you need to enable it in Beaver Builder's settings first.
Navigate to Settings » Page Builder » Post Types.
Since WordPress 4.7 you can set a custom post type page template for these posts. It supports "With intro widgets" and "No intro" page templates.

TIP: If you would like to point the post to a custom URL, try using a Page Links To plugin.

TIP: If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies related to this post type, use the Rename Taxonomies plugin.

TIP: For custom posts order use a plugin, such as Intuitive Custom Post Order.

Testimonials

What Are They and How to Use Them?

Testimonials posts can be used to display reviews you receive from your clients or customers.

Besides the actual testimonial text you can also set its author details together with author photo or logo (featured image) and conveniently categorize testimonials for better organization.

To display all testimonials on your site, you can use a testimonials archive page link in the navigation.

This custom post type is provided via WebMan Amplifier plugin.

What Beaver Builder element to use to display Testimonials?

Use "WM Testimonials" element.

TIP: If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies related to this post type, use the Rename Taxonomies plugin.

TIP: For custom posts order use a plugin, such as Intuitive Custom Post Order.

Content Modules

What Are They and How to Use Them?

Content Modules can be used as a content injection to various website areas. You can display it within any page or post content. Content Modules can be styled as icon boxes, so they are perfect for your services, features or benefits presentation.

For each Content Module you can set up a title, description text, custom link URL, custom link action, set an icon or featured image. If you use font icon, you can change the icon colors too. It is also possible to conveniently group Content Modules using dedicated module tags.

NOTE: Content Modules are not meant to be used for inserting a basic content with a page builder. In Beaver Builder please use it's native "Text Editor" element instead.

This custom post type is provided via WebMan Amplifier plugin.

What Beaver Builder element to use to display Content Modules?

Use "WM Content Module" element.

TIP: If you would like to rename this post type, use the Custom Post Type Editor plugin. To rename the custom taxonomies related to this post type, use the Rename Taxonomies plugin.

TIP: You can modify the layout of this post type display with helper CSS classes.

TIP: For custom posts order use a plugin, such as Intuitive Custom Post Order.

Shortcodes

Shortcodes

Shortcodes are basically commands you place into page/post/text widget content that will display content elements that are not possible (or would be too complicated) to create otherwise.

WordPress offers couple of shortcodes natively and one of them is a [gallery] shortcode. You can read more on shortcodes in WordPress codex.

Documentation

For more information on available custom shortcodes please read the documentation of WebMan Amplifier plugin.

Shortcodes documentation »

Shortcode Generator

With integrated Shortcode Generator it is very easy to insert a WebMan Amplifier's shortcode into the post or page content. Simply click the [S] button in page/post content editor, select a shortcode from dropdown and it will be inserted into the post content on the current cursor position.

Page builder integration

The theme is compatible with Beaver Builder page builder plugin that allows you to create a page/post content in drag and drop environment with ease, which is even more convenient way of creating a complex content than using shortcodes and Shortcode Generator.

Using Navigational Menus

Icelander supports WordPress Menus, so you can easily create custom navigational menus directly in Appearance » Menus.

Custom menus may contain links to pages, categories, custom links or other content types (use the "Screen Options" tab in upper right corner of the screen to decide which content types to show on the menu edit screen).

You can specify a different navigation label for a menu item as well as other attributes. The theme supports menu item description text. To display menus on website you need to assign them to a menu locations or use a Custom Menu widget.

The theme allows you to create as many menus as you want. However these menus can be placed into predefined locations only. The theme defines these menu locations:

Primary
The main navigation area in the header of the website displayed next to site logo. Can be nested and hierarchically organized and you can use a megamenu here. This is mobile-ready main site navigation menu.
Secondary
The secondary navigation area displays on the right side of the header, before social links menu. This menu can not be nested or hierarchically organized. It is only a secondary, complementary navigation to primary menu and will be displayed as is on mobile device.
Footer
Menu in the footer area of the website. This menu can not be nested or hierarchically organized. A search form is displayed aside this menu area.
Social Links
Please read the "Social Links" documentation section below for more info.

Please follow the instructions in WordPress codex on how to create menus.

Helpful tutorial: WordPress video tutorials.

Tip:
Opening submenu to reverse direction

You can use a special reverse-expand CSS class on a menu item if you want its sub-menu to open to the other side than the theme's default.

For this functionality you will need enable CSS Classes attributes in "Screen Options" tab in the upper right corner of the screen.

Tip:
Post type archive link

You can add any custom post type archive page link into the menu. Please see the image for the instructions »

Menu Item Icon

To set up menu icons please use a HTML directly in the menu "Navigation Label" such as <span class="icon-class" aria-hidden="true"></span> Menu label (icon classes can be found in Appearance » Icon Font - you need to have WebMan Amplifier plugin installed and activated).

Setting up a menu item icon

Megamenu

For this functionality you will need to set the menu item CSS Classes attributes. To enable this attribute, check it in "Screen Options" tab in the upper right corner of the screen.

With built in simple megamenu functionality you can display submenu items laid out into multiple columns.

  1. To create a megamenu from submenu items just set a megamenu class on the 1st level menu item. This 1st level menu item essentially becomes a wrapper and trigger for your megamenu. Number of columns will be set automatically.

  2. Then the 2nd level menu items (first children) becomes captions/titles/headings of the megamenu columns.

    TIP: You can hide any menu item by applying a hide class on it. This is great for hiding megamenu column captions.

  3. Finally, the 3rd level menu items (second children) within your megamenu are the actual column menu items. So, you should set these for each column (for each 2nd level menu item).

Adding Social Network Links and Icons

Social icons linked to your social network profiles can be displayed anywhere on the website. But beforehand you must create and set up a social links menu:

  1. Go to Appearance » Menus in the WordPress admin.
  2. Click create a new menu link.
  3. Give the menu a name, such as "Social Menu".
  4. Click [Create Menu] button.
  5. Click the Links header on the left side of the page.
  6. Type a link (such as https://www.facebook.com/webmandesigneu) to one of your social profiles in the URL field.
  7. Give the link a title by typing the name of the service into the Link Text field.
  8. Click [Add to Menu].
  9. Repeat the above steps to add additional social profiles.
  10. In the Menu Settings section at the bottom, check the "Social Links" box for Theme locations.
  11. Click [Save Menu] button.

Adding your social links as a custom menu allows you to sort your profiles and add as many as you want.

The theme currently supports following icons: Behance, Bitbucket, Codepen, Deviantart, Digg, Dribbble, Dropbox, Facebook, Flickr, Foursquare, Github, Google Plus, Instagram, LinkedIn, Medium, Paypal, Pinterest, Pocket, Reddit, Skype, Slack, Slideshare, Snapchat, SoundCloud, Spotify, Stack Overflow, StumbleUpon, Trello, TripAdvisor, Tumblr, Twitch, Twitter, Vimeo, Vine, VK, WordPress, Yelp, YouTube.

For links starting with mailto: an envelope icon is applied. For unrecognized links a link chain icon is used.

Can I use a custom social icon?

If you want to set a custom social icon, please read dedicated support article.

Feel free to use a WordPress native Custom Menu widget to display social menu anywhere on your website.

Using Custom Menu widget to display social network icons

Social sharing buttons

If you want to add a social sharing buttons to your website to allow your visitors to share your content, please consider enabling the Sharing module of Jetpack plugin.

Widget Areas and Widgets

Predefined Widget Areas

The content of widget areas can be customized in Appearance » Customize » Widgets or Appearance » Widgets. The theme predefines these widget areas:

Sidebar
This widget area is displayed on all posts, archive and search results pages, unless you leave it empty, with no widgets in it. If you want to display a sidebar on a page, use a "With sidebar" page template. If you want to remove a sidebar from certain page(s) only, use WooSidebars plugin for that.
Header Widgets
Use this widget area to display information in the website header area. It's useful for placing a search form and additional links (menu), for example.
Intro Widgets
Use this widget area to display additional information in the intro section of the page. If you want to display intro widgets also on archive pages, you can enable this in Appearance » Customize » Theme Options » Layout » Intro.
Footer Widgets
Displays widgets in footer area of the website. This is actually your main footer section.
Footer Secondary Widgets
Additional footer widgets can be used to display information above the Footer Widgets area.
Shop Sidebar
(A WooCommerce specific widget area.) This widget area is displayed on shop page and product archive pages. It basically replaces default sidebar on those pages to make it easier to set up a shop-specific sidebar. If there are no widgets in this sidebar, it won't be displayed and shop page will take the full width.
Product
(A WooCommerce specific widget area.) This widget area is displayed on single product page, just above the related products list.
Before Products List
(A WooCommerce specific widget area.) This widget area is displayed on shop archive pages before the products list. It is especially suitable for WooCommerce filtering widgets.

Custom sidebars & website layout control

You can create a custom widget areas (sidebars) and use them anywhere on the website with a help of WooSidebars plugin.

That way you can control even displaying of the sidebar, effectively altering the page layout - limitless options, great flexibility!

Widget width

If a widget is displayed in horizontal widgetized area (such as Intro Widgets or Footer Widgets), you can alter its width using a custom widget CSS class with help of Widget CSS Classes plugin.

Widgets

This theme enhances some native WordPress widgets with custom functionality and/or layout:

"Recent Posts" Widget

The theme only restyles the display of the post date to special, more pleasing format. To preview this change you need to enable the "Display post date?" widget option.

"Text" Widget

The theme allows you to set a custom widget icon and widget featured image. You can then use a "Text" widget to display a service or a feature in any widgetized area or in a page builder layout on your website.

To enable the custom icon functionality you need to have WebMan Amplifier plugin installed and activated first.

Customizer

What is Customizer and How to Use It

The theme seamlessly integrates its options into the WordPress Customizer.

You can access it navigating to Appearance » Customize. All the changes you make in Customizer will be immediately displayed in the theme preview. However, these changes will not be saved until you press the [Save & Publish] button.

You can set up your site's title, tagline and logo, header images and video, manage navigational menu locations and widget areas, set up a front and blog page, theme colors, layout, predefined texts and typography.

All the custom theme options can be found under Appearance » Customize » Theme Options section.

For the best performance, the theme generates a single CSS stylesheet file using WordPress native filesystem API. The file is being generated after saving theme customizer settings.

Why are my changes not being applied on the website?

There might be several different causes of such issue, most likely they are related to caching:

Search Engine Optimization and Traffic Tracking

Search Engine Optimization

The theme is coded semantically, with best SEO practices in mind, meaning it is ready to be displayed on top of search results in search engines such as Google.

Please note though, that this is just a basic SEO optimization and you will have to push it further to make the real deal with SEO. For such cases I recommend using Yoast SEO plugin.

You can furthermore integrate support for Schema JSON-LD microformats using a plugin such as Schema or Schema App Structured Data. (Please note that WooCommerce plugin already contains these microformats for its products.)

Traffic Tracking

I recommend using Google Analytics by MonsterInsights plugin as it offers advanced customization of tracking of you website.

You can also consider using Jetpack plugin's Stats module instead.

Localization

TIP: How to Install WordPress in Other Languages »

Every WordPress theme contains some texts that need to be translated into your language if you are building a non-English website. This theme if fully translation ready (and supports even Right-To-Left languages) and is also translated into multiple languages out of the box. (For reference of pre-packed language packs please check the list of translation files within icelander/languages folder of the theme.)

To enable your language on your website, please switch WordPress into the desired language localization.

How to Translate the Theme?

Translating using Poedit

  1. Make a copy of the original icelander/languages/icelander.pot file.

  2. You need to rename the copied file now. The naming convention is based on your language code locale and renaming the file extension to "po". So, the British English file would be named as en_GB.po.

  3. Use Poedit to translate the file and export (save) translation also in "mo" translation file format.

  4. Upload translated en_GB.mo file into your WordPress language directory, such as /wp-content/languages/themes/icelander/en_GB.mo.

    Alternatively you can put translations into your child theme: /wp-content/themes/your-child-theme/languages/en_GB.mo.

    REMINDER: When you update the theme, all custom translation files will be deleted from /wp-content/themes/icelander/languages folder. Do not place custom translation files into that folder!

Translating directly in your WordPress dashboard

If you would like translate the theme directly in your WordPress dashboard you need to use a specialized plugin for that. Please install and activate Loco Translate plugin. For instructions on how to use the plugin please refer to beginner's guide and/or technical overview.

Don't forget to translate your plugins too!

WordPress website is built from WordPress system itself, a theme and plugin(s). There is a very high probability that WordPress system is already translated into your language, so, you don't have to do it on your own. You have also learned how to translate the theme into your language above. But what about plugins and their texts?

If you are lucky, your plugin contains your language localization files already and you don't have to do anything. But if you need to translate the plugin into your language, the best advice is to check the plugin's documentation for instructions (you can check the instructions for WebMan Amplifier plugin localization procedure).

Alternatively you can also use Loco Translate plugin (again) to translate your plugins directly in your WordPress dashboard.

Free WordPress.org themes translation

If you have obtained the theme from WordPress.org themes repository, please translate the theme by clicking the Translate Icelander link in theme page sidebar.

Help us translate the theme :)

If you would like to help out translating the theme, please contribute on WebMan Design Support Center.
If you have translated the theme at WordPress.org repository, you don't have to do anything :)

Accessibility

What is accessibility

Accessibility in web design means creating web pages that everyone can use, regardless of hardware, software, or any sensory or physical impairment.

While this is a complex process that includes a website content strategy, the Icelander theme helps you with being accessibility ready. It complies to and surpasses the WordPress accessibility requirements and was built to pass the WCAG 2.0 level AA and Section 508 requirements.

The theme itself contains and applies proper headings structure, uses ARIA landmark roles and attributes, adds informative "read more" links, keyboard accessible navigation (applied also on mobile navigation), skip links, the default color scheme complies to WCAG 2.0 level AA color contrast ratio, and others.

Please note that to make your website fully accessible, you need to apply accessibility guidelines also to your website content. For further information please read WordPress Codex on accessibility.

Focus on Readability

The single post page (and the actual default page layout) was designed very carefully to provide the best reading experience for your visitors. The maximum line width is around 70 characters with properly set line height and spacing around elements to provide great readability of your content.

Accessibility compliant headings structure

To comply to best accessibility guidelines, the theme follows this headings structure:

Only one h1 on the page

The theme outputs only one first-level heading (HTML tag <h1>) on each page. This is set up for the main page/post/archive title in the main content area of the page.

Please read more about exception when using "No intro" page template.

On some pages the main h1 heading might be hidden from the view with .screen-reader-text class, which is perfectly accessible, though.

Site title heading

Page's HTML body title (the site title set in Settings » General) is outputted with h2 heading size, leaving the h1 size for the main page/post/archive title in the actual website main content area.

The only exception from this rule is on your website front page (the homepage) where the site title is outputted with h1 heading size.

Headings hierarchy

The theme follows the best practice by hierarchically organizing heading levels, not skipping any of them. For example, h3 headings can be found only in a section titled with level h2 heading (and not h1). This rule is applied also in the theme demo content and you should do the same in your website content too.

To comply to this rule when using page builder elements (or shortcodes), and when you need to override the default element (shortcode) heading level, you need to set up the proper heading HTML tag for the element.

You can find this option usually under "Others" tab of the element settings (or set the heading_tag shortcode attribute).

Check the image at right

In case you would like to test your website headings hierarchy, there is a great Chrome browser extension for this called HeadingsMap.

Decorative headings

You should never use heading levels to style the text for decorative purposes! In case this is required, please use helper CSS classes such as .h1, .h2, .h3 or .display-1, .display-2, .display-3, .display-4 to override any HTML heading or paragraph default styling.

Changing the heading level (HTML tag) in a page builder element
Changing the heading level (HTML tag) for the "WM Posts (custom posts)" page builder element

Page builder elements default heading levels

Below you can find a list of default heading levels used in page builder elements (shortcodes):

WM Accordion and WM Tabs item
Default accordion item title heading level is set to h3. The tabs items are also titled with heading level h3, though the heading is visible for screen readers only (it is hidden with .screen-reader-text CSS class).
WM Call to action
Default call to action caption heading level is set to h2.
WM Content Module
Default Content Module post title heading level is set to h2.
WM Message
Default message box caption heading level is set to h3.
WM Posts (custom posts)
Default post and Staff post title heading level is set to h2.
WM Testimonials
Default Testimonial post title heading level is set to h2. The title of the Testimonial post won't be displayed as it is accessibly hidden with .screen-reader-text CSS class.

Theme Modifications and Child Theme Download a sample child theme

Important:

Please note that we do not provide support for custom theme modifications!

You are responsible for all the changes you apply to the theme on your website.

If you don't feel comfortable enough coding, please, consider hiring someone who could help.

When and How to Use a Child Theme?

If you need to make any styling or functional changes to the theme, please use the WordPress native child theme functionality. This way you can continue updating the parent (original) Icelander theme without any worry of your changes being overwritten as all your custom styles and functionality are kept in a child theme. You can read more about child themes on WordPress Codex pages.

You can put all your custom CSS styles into YOUR_CHILD_THEME/style.css file. (You can alternatively use Appearance » Customize » Additional CSS for that.)

If you also want to change the functionality of the original Icelander theme, do so in YOUR_CHILD_THEME/functions.php file. You can freely modify any theme function or class method there by hooking onto the specific "pre" filter or unhooking the function altogether (see below for how to use filter and action hooks).

Additional resources:

Child Theme Generator

Icelander theme lets you create a child theme automatically. Just navigate to Appearance » Editor and click the "Create and activate now »" link in the displayed child theme notification.

A new child theme will be created and activated for you automatically, so you can add any custom code in it.

Please note that this option is not available when using WordPress multisite installation. In that case (or when automatic child theme creation doesn't work) please download a sample child theme (see "Additional resources" on left).

How to use action and filter hooks?

This topic is dedicated to WordPress developers who would like to modify the theme and alter or expand its functionality.
Please note that we do not provide support for custom theme modifications, though.

The theme is coded according to WordPress coding standards and is full of action and filter hooks. You can easily hook onto these to alter functions outputs (or short-circuit the whole functions - the wmhook_HOOKNAME_pre filter hooks) or alter parameters and variables, to add your own meta data, theme or design options, layouts and much more!

Please check the theme's source code for which hook to use (you can simply search for "do_action(" or "apply_filters(", respectively), or contact WebMan Design Support Center for more details and tips.

Icelander theme also uses the Theme Hook Alliance hooks too. This is useful to entirely rebuild the theme structure or add your own sections anywhere in the theme. The whole theme front-end structure setup can be found in files inside the icelander/includes/frontend folder.

You can also watch an instructional video on how to use WordPress hooks.

To show all theme hooks you may try using Simply Show Hooks plugin or WP Inspect plugin.

FAQ and Tips and Tricks Frequently Asked Questions and Additional tips for the theme

List of Frequently Asked Questions:

  1. How to use any page builder plugin?
  2. How to restyle elements with ease? Using special predefined CSS classes.
  3. How to set up and use a custom font? Google Fonts or Typekit setup.
  4. How to set up custom icons set?
  5. How to set up cookies notification?
  6. How to customize error 404 page?
  7. How to customize WordPress admin?
  8. How to set up breadcrumbs?
  9. How to create tables easily?
  10. My images are blurry/small/of bad quality, what can I do?
  11. How to use the Formats button in post editor?
  12. What are custom fields and how to use them?
  13. How to speed up the website?
  14. How to edit the CSS or add your own?

How to use any page builder plugin? Back to FAQ list ↑

The theme is 100% compatible with Beaver Builder page builder plugin. It works wonderfully with this most powerful and easy to use page builder. This is the only page builder plugin in which we automatically integrate custom theme content elements. If you are using other page builder, you will need to use shortcodes.

The theme was also tested and is working perfectly fine with 6 of the most popular page builders (paid and free ones; see "Compatibility" section aside) and should be compatible with any decently coded page builder plugin.

To ensure layout compatibility the theme offers a convenient "Page builder layout" metabox (preview ») where you can set special custom fields to prepare the page or post layout for use with your page builder. As every page builder works differently, you will need to set these options to your needs. Also, please note that when you are using Beaver Builder, this metabox is not available as the plugin works automagically :)

Can I use page builder with any post type?

To use a page builder on posts or custom post types, you will probably need to enable those post types in your page builder plugin settings first. This is different with every plugin and you should find the information in your plugin's documentation.

With Beaver Builder you can set these in Settings » Page Builder » Post Types.

Compatibility

Besides full compatibility with Beaver Builder, the theme was tested and is working perfectly fine with these page builder plugins:

How to restyle elements with ease? Using special predefined CSS classes. Back to FAQ list ↑

Yes, this theme predefines some useful CSS classes for you so you can use them in your page builder elements, shortcodes or directly in the HTML of your page or post. These custom special CSS classes will modify the appearance and even layout and behavior of your website elements.

For full, up-to-date list of these classes and instructions on how to use them, please, refer to the "Helper CSS classes" page at the theme demo website.

All of these classes are integrated with Beaver Builder page builder CSS field for easier usage.

List of CSS classes you can use »

How to set up and use a custom font? Google Fonts or Typekit setup. Back to FAQ list ↑

Instead of restricting you to using either Google Fonts or Typekit fonts (or any other fonts provider) built within the theme, you have the luxury of choosing your own preferred fonts provider (or using web safe fonts) with the Icelander WordPress theme.

There are multiple different custom fonts plugins you can use, such as Easy Google Fonts, Typekit Fonts for WordPress or Font Squirrel (unofficial).

All the information regarding the theme typography and fonts setup can be found in Appearance » Customize » Theme Options » Typography.

More advanced, but more flexible procedures:

How to set up custom icons set? Back to FAQ list ↑

The theme comes bundled with 2 icons sets:

  • Utility icons

    The utility icons set is used by the theme internally to provide icons for post meta information, for example. These icons can not be changed easily, you can override them with custom CSS code only. The theme uses Genericons icon set as the utility icons.

  • Content icons

    Thanks to help of WebMan Amplifier plugin, you can use a set of custom content icons, which can be changed under Appearance » Icon Font in your WordPress dashboard using a Fontello online icon fonts generator. These icons are then available to set in Content Modules posts or for use anywhere on the website (just grab the icon-specific "Instant HTML" when hovering over an icon in Appearance » Icon Font page).

    By default, the theme provides its own custom content icons set best suited for the theme usage purpose. If you import your own Fontello icons set, this will override the default theme icons. In case you just want to add a new icons to the theme's predefined set, please import the theme's icelander/assets/fonts/fontello/config.json file into Fontello icons font generator first (as seen in the picture below) and then select your additional icons or import your custom icons SVG into Fontello (read instructions on how to use Fontello).

    Importing config.json file into Fontello.com icons font generator
    Importing config.json file into Fontello.com icons font generator

How to set up cookies notification? Back to FAQ list ↑

Every European website has to conform European Union guidelines on privacy and data protection and inform users about cookies being set by the website. There are multiple ways to go about this with WordPress, you can use a plugin for that, or set a notification with Silktide Cookie Consent script (there is also a plugin for this script).

How to customize error 404 page? Back to FAQ list ↑

In case you would like to customize the theme's error 404 page and you do not want to touch a line of code, you can do so easily with a help of a 404page plugin. Or, you can use Beaver Themer plugin too.

How to customize WordPress admin? Back to FAQ list ↑

If you are building a website for a client using WordPress (and Icelander theme), you might want to adapt the WordPress admin area a bit to remove unnecessary things and maybe even rename some post types. In this case we provide some useful resources you would want to check out:

The theme supports Breadcrumb NavXT plugin that allows very flexible set up and display of breadcrumbs navigation on your website. After you install and activate the plugin, the theme displays the breadcrumbs navigation in preset location (you can change this in Appearance » Customize » Theme Options » Layout).

If you would like to display breadcrumbs navigation the same way it is displayed on the theme demo website, please use these settings (feel free to set up all the other breadcrumbs settings to your needs):

Settings » Breadcrumb NavXT » General » "Breadcrumbs Separator"
Set to <span class="sep"> / </span>.
Settings » Breadcrumb NavXT » General » "Home Template"
Settings » Breadcrumb NavXT » General » "Home Template (Unlinked)"
Prepend the existing text with <a href="#" class="back-to-top">Back to top ↑</a> <span class="breadcrumbs-title">You are here: </span>....
The "Back to top" link above will only be displayed in breadcrumbs navigation below the page/post content.

How to create tables easily? Back to FAQ list ↑

There are times you need to display tabular data in your posts and/or pages. This is not an easy task in WordPress if you are not familiar with HTML coding as there is no out-of-the-box tool to create HTML tables in post editor. But, there is an easy fix for the issue: try using TablePress plugin.

My images are blurry/small/of bad quality, what can I do? Back to FAQ list ↑

For the information about what image sizes are declared in the theme and how you should set up the WordPress native image sizes, please navigate to Settings » Media and read the "Recommended image sizes" section.

WordPress will rescale and crop the images to selected formats automatically during the image upload process. If you already have some images on your website, these need to be rescaled when using the theme. Please use a plugin such as Force Regenerate Thumbnails to do the rescaling for you.

Blurred images

To prevent blurred images, please make sure you upload images of minimal recommended size (see "Recommended image sizes" section on Settings » Media WordPress admin page).

WooCommerce Image sizes

If you are using WooCommerce plugin, set up these product image sizes for the best compatibility with the theme:

Catalog Images480 px × Use any custom height
Cropped
Single Product Image1200 px × Use any custom height
Cropped
Product Thumbnails120 × 120 px
Cropped

Image file size

It is recommended to use the Imsanity plugin to keep the sane size of the uploaded images on your server automatically.

Set the plugin to your (boxed) website container width (you can tweak this in theme customizer) and lower the image quality to value of 70 (or to your preference).

"Lightbox" image zooming

If you would like to use a lightbox effect (image zooming), try using great WP Featherlight plugin.

High DPI (Retina) screen images

To keep your images high DPI (Retina) screen ready, consider using WP Retina 2x plugin.

Website speed and performance

To speed up the website loading time consider using a CDN on your images. You can try Jetpack's Photon or CloudFlare (or any other CDN).

How to use the Formats button in post editor? Back to FAQ list ↑

The theme adds a new Formats button to the visual editor of WordPress posts/pages. Please use this button to create a special elements, such as pullquotes, cite source, inline code, super/sub-scripts, uppercase text, highlighted (marked) text, outdented content.

For all the formats please select a text in post/page content first. The format will be applied on this selected text then.
Visual editor Format button

Editor stylesheet

The theme supports WordPress editor stylesheet, making the experience of writing post or page content truly WYSIWYG.

The width of the edited post or page content is the same as it is on the front-end of your website, specifically set for the best readability. If you edit a page, the content width depends also on the page template you are using.

Text styles » Dropcap text

Apply the "Dropcap Text" format on the paragraph of text, not on a single character.

Text styles » Heading 1/2/3 text style

Please note that this only applies the heading CSS styles on the selected text. It does not apply the actual HTML heading tag, thus making it convenient way of separating styles from structure.

Outdented content

Please note that content outdentation will only be visible on your website front-end and not in the content editor. This is due to limitations of the content editor size.

However, the outdented content will get emphasized in the content editor for easier identification:

Outdented content in admin, when editing a page Outdented content on a front-end page

What are custom fields and how to use them? Back to FAQ list ↑

To allow more control over pages and posts appearance, the theme uses some predefined custom fields.

You can use the WordPress native custom fields interface, but for the best experience it is recommended to install and activate the Advanced Custom Fields plugin. The theme is compatible with this plugin out of the box and automatically creates easy-to-use metaboxes for you for all its options (custom fields). If you prefer to use a different custom fields plugin, you need to set the plugin up according to information provided below.

Below is an information about the custom fields used in the theme:

Intro section related

For easy setup of these custom fields please use the ACF metabox (click to preview).

no_intro

Boolean: "1" or empty

Disables Intro section for the current page/post.

With supported post types (pages, posts, projects, staff and WooCommerce products) you can preferably use a special page template instead.

no_intro_media

Boolean: "1" or empty

Removes any intro media (such as image) from the particular page.

intro_image

String: URL or ID of the image

Overrides the default intro section image with a custom one.

show_intro_widgets

Boolean: "1" or empty

Displays Intro Widgets area if Intro section is displayed.

With supported post types (pages, posts, projects, staff and WooCommerce products) you can preferably use a special page template instead.

Child pages list related

For easy setup of these custom fields please use the ACF metabox (click to preview). The metabox is only displayed for pages set as a child of some parent page.

no_thumbnail

Boolean: "1" or empty

Removes the page thumbnail (featured image) from the list of child pages on the parent page.

Page builder related

These custom fields can be set for any post type only if you are not using Beaver Builder page builder.

Why the theme uses a custom field for this instead of a page template? For better flexibility. If this custom field was replaced with a custom page template, you could not use a different page template on that specific page or post. The theme allows you to use any page template you like while preparing it for your page builder plugin custom layout.

For easy setup of these custom fields please use the ACF metabox in the sidebar of page/post edit screen (click to preview).

content_layout

Predefined: empty, or no-paddings, or stretched

Prepares the content area of the page/post for use with your page builder plugin.

You don't need to set this if you are using Beaver Builder.

Easy setup with metaboxes by ACF

For very easy setup of custom fields please install and activate the Advanced Custom Fields plugin.

Once you activate this plugin, the theme will automatically create metaboxes for all custom fields it uses for specific post types.

How to speed up the website? Back to FAQ list ↑

Having a performant, speedy website is a must in todays world. It makes your website more SEO friendly and most importantly pleasing for your visitors. This theme was coded with performance in mind, however, speeding up a website is a complex process that requires some further steps:

  • Use a good hosting

    Having a good host for your website is one of the most important steps you can make towards a speedy website. It should support PHP7 as that alone speeds up your website tremendously. Depending on your location it is also good to use a host that has servers in your country or on the same continent, at least. We recommend using Siteground, WP Engine or Pagely. You can also check out WordPress hosting recommendation page.

  • Optimize your images, video, audio files

    You should always keep the file size of your images, video, audio and other asset files on your website as low as possible. We suggest preparing the images before you upload them to your website: compress them, reduce the dimensions (maybe even crop them). You can also use plugins to keep your image sizes down: Imsanity and WP Smush Image Optimizer, for example.

    In case of video and audio files set the optimal compression and formats before uploading them to your website. Maybe even consider using a 3rd party services such as Vimeo, YouTube and SoundCloud to host your video and audio files off your servers.

    Also consider using a CDN service such as CloudFlare.

  • Enable caching

    We recommend at least enabling the basic browser caching and GZIP compression of your website. However, you get better results using a dedicated caching solution such as WP Rocket (or try other WordPress caching plugin, like WP Super Cache).

    Your hosting provider may actually provide you with a caching solution built directly into the hosting service. Check this with your hosting provider.

    With your caching solution you should also be able to set up a CSS and JavaScript files combining and minification. As minification is a complex process that might cause JavaScript errors on your website we recommend to test it thoroughly and always checking the results before live deploying.

For measuring your website performance and tips on how to improve it try using GTmetrix, Pingdom Tools and WebPageTest.

How to edit the CSS or add your own? Back to FAQ list ↑

If you need to apply a custom CSS to override theme styles, since WordPress 4.7 you can add your custom CSS into Appearance » Customize » Additional CSS.

Alternatively use a child theme.

Sources and Credits