Thank you and congratulations for using a theme by WebMan Design!
This user manual will teach you how to set up and use the theme. In case you have any questions that are beyond the scope of this documentation, please join WebMan Design support forum. Enjoy your Icelander WordPress theme!
WordPress is free open source CMS software for creating websites. It can scale with your needs when you're ready to grow and is easy to learn with many free and low-cost tutorials. You can learn more about WordPress at wordpress.org.
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. As you are reading a user manual for a WordPress theme and it requires WordPress to run, let's install it first.
Icelander requires at least WordPress 4.7 and PHP 5.6 to work properly. Please make sure to meet the requirements.
(Re)download the theme package ZIP folder from the marketplace where you've purchased the theme from.
Log into your WordPress admin.
In WordPress admin navigate to Appearance → Themes and click the Add New button next to "Themes" page title.
On "Add Themes" screen click the Upload Theme button next to page title.
On the next screen choose the theme ZIP package file you've downloaded in step 1 above and click the Install Now button.
After the theme is installed, activate it by clicking the "Activate" link.
Now you can go to Appearance → Welcome page for information on how to set up your website (and the theme). Also, please pay special attention to your website image sizes setup.
If you've obtained the theme from ThemeForest (Envato Market), please make sure to unpack the downloaded ZIP package on your computer first and check if you are uploading the correct theme ZIP file (or the whole theme folder).
Basically, the theme installation ZIP file or folder is named with your theme slug only, so only icelander.
Do not install a whole ZIP package that contains other files such as documentation, child theme, licencing and others. Install only the file under icelander-package/theme folder. Otherwise you might experience a common issue.
Don't forget to check the theme welcome page at Appearance → Welcome. It contains everything you need to start.
Tip:Get info about updates
Get fast information about new theme updates by subscribing to WebMan Design on Facebook and Twitter.
Download the theme ZIP package from where you've obtained it originally. Then follow the steps below:
Updating via WordPress dashboard
A simple way of doing a manual theme update is 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 more advanced manual update procedure and you will need an FTP client (such as FileZilla) to connect to your server:
(Re)download the theme ZIP file from where you've obtained it and unpack the ZIP file on your computer.
Now you will need an FTP client to connect to your server.
On your server navigate to WORDPRESS_FOLDER/wp-content/themes/ folder.
Delete the existing icelander folder (or create a backup just in case - you can do this simply by renaming the folder name by appending .backup to its name so it becomes icelander.backup, for example).
Copy the unpacked theme icelander folder from your computer (from step 1 above) into WORDPRESS_FOLDER/wp-content/themes/ folder on your server.
Log into your WordPress admin area and check the version of the theme in Appearance → Themes. Your theme should be updated now. (And you can delete the icelander.backup folder from step 4 above.)
There are various page templates available for use with this theme. Such as when you're creating a special landing page and would like to remove header and footer from the page use the "Blank" page template.
(Click the item below to reveal more info. Click the image to preview a bigger size.)
By default WordPress displays blog posts listing on your website homepage. If you would like to set up a static homepage and use a different page for a blog posts listing, set it up in Appearance → Customize → Static Front Page settings (or in Settings → Reading).
The style of blog and archive page posts listing can be set in Appearance → Customize → Theme Options → Blog.
Projects and Staff posts display a filter from their taxonomies on archive pages.
A taxonomy can also display on specific posts in the custom post type posts list. This depends on the custom post type and on the taxonomies you have assigned to it (such as project category, project tags, staff department or specialty).
Custom post excerpt is displayed in intro section on all custom post type single pages (except for Testimonials).
Staff post excerpt is displayed also 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.
Project post does not display excerpt in posts listing.
(Click the item below to reveal more info. Click the image to preview a bigger size.)
Product archive pages (such as a product category page) intro section display is set according to your Shop page setup.
Single product page intro section contains shop breadcrumbs navigation, product title, product price. It does not display a product featured image. If you want to display an image in intro section on single product page, you need to use a dedicated custom field.
If you set widgets in "Shop Sidebar" there will be a sidebar displayed on all product archive pages and products will be displayed in 2 columns instead of 3.
Product categories list:
If you are displaying product categories, the theme conveniently separates categories from products list (which is a WooCommerce default display) for you, displaying categories first.
Please note that you need to have a "Show categories & products" set for Shop Page Displays (and "Show subcategories & products" set for Default Category Display) in your WooCommerce products display settings for this feature to be enabled.
The theme is also compatible with WooCommerce Product Image Flipper plugin which displays the additional image (the first one from product image gallery) when hovering a product in products listing. The theme changes the hover effect of the plugin to a custom one, though.
The theme allows you to import a demo content, which matches theme demo website. Then you can simply change the imported demo content to your needs and build your website faster that way.
Before you import the theme demo content, please check these important notes:
Theme demo contains a lot of pages. You will certainly end up not using most of them. In that case it is strongly recommended to delete the leftover demo content you no longer need from your website. It improves your website performance and relevance.
Please understand that demo images, audio and video files are of low quality. This is to prevent any copyright infringement. You should replace them with your own, properly licensed media that fit your website project.
Warning:Page builder compatibility
If you want to use a page builder, please understand that if the theme demo content was not built with your page builder, you will not be able to edit the imported demo pages.
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.
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 Home and Blog Page
Navigate to Appearance → Customize → Homepage Settings (or you can also do this at Settings → Reading).
For "Your homepage displays" option set "A static page".
Select your homepage and posts page from dropdown lists. Posts page becomes your blog page.
Tip:Take advantage of live preview
Doing this in customizer gives you live preview of your changes.
Displays only page content and so it's best suited for creating landing pages. There is no site header, no page intro title section (no h1 heading tag), and no site footer on this template.
"With intro widgets"
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.
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 Beaver Builder page builder, please, do not forget to set up your custom h1 heading, as it is being completely removed from the page HTML in this case. The same applies for pages that you set to be ready for any other page builder.
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"
Please set this page template for a parent page only.
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 content.
To set up a child page excerpt please use the "Excerpt" field on page edit screen.
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 and 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.
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 overridden then 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.
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.
By default WordPress displays a caption in archive page titles (such as "Category:" in front of a category name). Use an Archive Title plugin to hide these labels.
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.
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.
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 animated on-page filtering in a dedicated Beaver Builder "Posts (custom posts)" module.
You can choose from various styles of projects archive display in Appearance → Customize → Theme Options → Layout. On Projects archive pages there is a filter displayed on top of the posts list from (non-empty) project categories.
Navigational menus for your website can be created at Appearance → Menus. They may contain links to pages, categories, custom links or other content. You can specify a custom menu item label, as well as other attributes.
Display menus on your website by assigning them to a predefined theme menu location. The theme defines these menu locations for you:
This is the main navigation in the header of the website.
Menu in this location can be nested and hierarchically organized (up to 4 levels deep) and you can also use a simple megamenu functionality here.
It is also mobile-ready menu and, if needed, mobile functionality can be disabled at Appearance → Customize → Theme Options → Others.
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.
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.
Click the Custom Links header on the left side of the page.
Type a link (such as https://www.facebook.com/webmandesigneu/) in the URL field.
Give the link a label by typing in the Link Text field. (This label text will be accessibly hidden.)
Click Add to Menu.
Repeat the above steps for additional social links.
In the Menu Settings section at the bottom, check the "Social Links" box for Theme locations.
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. Once you assign a social links menu this way, feel free to use a Navigation Menu widget to display it in sidebars of your website.
The theme displays icons as SVG images. For full list of supported icons please refer to assets/images/svg folder of your theme.
For links starting with mailto: an envelope icon is applied. For unrecognized links a link chain icon is used.
WordPress 5.8 introduced a new block-based interface to widgets and sidebars management screen. As this may be confusing and possibly even cause incompatibility issues in some cases, you can consider reverting back the interface with Classic Widgets plugin.
Predefined Widget Areas
The content of widget areas (sidebars) can be customized in Appearance → Widgets or Appearance → Customize → Widgets. The theme predefines these widget areas:
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 Content Aware Sidebars plugin for that.
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.
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.
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.
(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.
(A WooCommerce specific widget area.) This widget area is displayed on single product page, just above the related products list.
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.
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.
Customizer can be accessed at Appearance → Customize. All the changes you make in Customizer will be immediately displayed in the preview, but they will be made live only after you press the Publish button.
At Appearance → Customize → Theme Options panel you'll find theme-specific options. Check them out to get familiar with theme customization capabilities.
Create a copy of the original icelander/languages/icelander.pot file.
Rename the copied file now: add hyphen followed with your language code locale, and change the file extension to "po". (So, the British English file would be named icelander-en_GB.po.)
Use Poedit to translate the file and export (save) translation in "mo" file format.
Upload translated icelander-en_GB.mo file into your WordPress languages directory, into themes folder (such as /wp-content/languages/themes/icelander-en_GB.mo (if the themes folder does not exist in your WordPress languages directory, create it).
Warning:Don't lose your files!
When you update the theme, all custom translation files will be deleted from /wp-content/themes/icelander/languages folder. Do not put your custom translation files into that folder! Basically, you should never modify the actual theme files and folders.
If you are lucky, your plugin contains your language translations already and you don't have to do anything. But if you need to translate a plugin, the best advice is to check the plugin's documentation for the best approach.
Alternatively you can also use Loco Translate plugin (again) to translate your plugins directly in your WordPress admin area.
Help With Your Translations
If you would like to help out translating the theme, please contribute your translations at WebMan Design support forum by submitting a ZIP package of your .po and .mo translation files in a new support ticket attachment. Thank you!
Accessibility in web development means creating a web site that everybody can use regardless of one's hardware, software, or sensory, or physical impairment. It is about building a barrier-less web.
While creating accessible website is a complex process that includes a content strategy, Icelander theme helps you with being accessibility ready out of the box. It complies to WordPress accessibility requirements and was built to help you create a website that passes WCAG 2.1 level AA requirements.
Among other features the theme itself applies proper headings structure, uses ARIA attributes and landmarks where needed, adds informative "read more" links, makes your website navigation keyboard accessible, creates skip links for you and provides sufficient color contrast in default color scheme.
However, please understand that creating an accessible website is not just about a theme. You need to apply accessibility principles also to your website content and be cautious when using plugins. For further information please read WordPress documentation about accessibility.
And for even more information about accessibility please check:
Content area of this theme was designed carefully to provide the best reading experience for your visitors. Maximum line width is set to roughly 70 characters (can be tweaked in theme options). With proper line height and spacing around elements it is easier for visitors to digest your website content.
To comply with accessibility guidelines, the theme follows this headings structure:
Max one h1 on any given page
Theme outputs only one first-level heading (HTML tag <h1>) on each page. This is reserved for a page main title.
Important:Exceptions in templates
Read more about exception from this rule applied with certain templates. For example, you can remove the h1 title altogether and create your own custom one in a page content.
Site title heading
Site title (logo) is rendered as h1 only on homepage. On other pages the h1 tag is reserved for the actual page main title.
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 (and not h1). This rule is applied also in the theme demo content and you should do the same when building your site content too.
Tip:Test it out!
In case you would like to test a page headings hierarchy, there is a great browser extension for this called HeadingsMap.
Why do you need to use plugins when you expected the theme to have all the functionality in it? Well, according to WordPress guidelines and generally the best practice: themes are meant for presentational purpose only, while plugins provide website functionality.
The reason is simple: when you decide to update your website looks you simply change a theme without loosing your website content and additional functionality such as eCommerce or portfolio.
This theme follows this WordPress philosophy and you can rest assured your site is as future-proof as possible. No lock-in effect with WebMan Design themes!
The theme does not need any plugin to work properly. It is coded responsibly and flexibly enough so it should handle any decently coded 3rd party plugin you throw at it.
However, please understand there are thousands of plugins available for WordPress and it is not humanly possible to test them all. Feel free to use your plugin and in case of an issue contact support for help.
Theme provides code and/or design integration for certain plugins. You will find these plugins in recommendations list below. They provide additional functionality for your website or improve your and your visitor's experience.
Please note that these are only recommended, suggested plugins, they are not required for the theme to work. Always read the plugin description before installing a plugin and install only those plugins you will use on your website.
Warning:Demo content required plugins
List of plugin the theme recommends may differ from plugins that are required when installing demo content. Check the demo content information for more details.
Here is a list of plugins that were successfully tested with the theme and the theme even provides additional integration layer for them:
Restores the previous WordPress widgets settings screens. Sidebars and widgets are not going to be used in fully block themes in the future, so if your website still uses sidebars, it is better to use this plugin to enable classic user interface.
Jetpack plugin contains a lot of useful tools and functionality for your website. Among others, there are portfolio and testimonials management, extra editor blocks, social network sharing functionality, content delivery network to speed up your website, site verification functionality, and others.
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.
Please note that WM Accordion and WM Tabs page builder modules/shortcodes provided by WebMan Amplifier plugin are not accessible elements currently and are not recommended for use on accessible websites.
This type of plugin is also great to alter you website layout with ease. Here are couple of example usecases:
Tip:Classic Widgets interface
When using a sidebar management plugin, it's recommended to restore previous widgets interface with Classic Widgets plugin.
Remove sidebar on specific pages
Simply create a new custom sidebar, let's call it "Empty", and set it to replace the actual theme's "Sidebar" on specific pages.
Then just leave this new custom sidebar empty, with no widgets in it. It will cause the theme to adapt the layout when it detects there is no sidebar on those specific pages displayed. This way you've effectively removed sidebar.
If you, on the other hand, want to display the sidebar on some pages only, you can use reverse logic:
Leave the theme's "Sidebar" empty and create a "Sidebar with widgets" using the plugin. Then set it to display on the specific pages and add some widgets into it.
Display a different footer on specific page
Create a new custom sidebar, let's call it "About page intro widgets", and set it to replace the actual theme's "Footer Widgets" widget area on the specific page (on the "About" page in our case).
Then go ahead and add some widgets into the "About page intro widgets" sidebar in Appearance → Widgets. This new custom sidebar will be displayed in the footer on your "About" page.
The theme is 100% compatible with Beaver Builder page builder plugin. It is the only page builder plugin in which there is integration for custom theme content modules. If you are using other page builder, you will need to use shortcodes.
The theme was also tested and is working perfectly fine with other page builders and should be compatible with any decently coded page builder plugin.
To ensure layout compatibility there is 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 without it.
The theme requires certain minimal image dimensions for optimal display. Info about recommended image size setup can be found at Settings → Media.
Once you set correct image sizes, all your newly uploaded images will get processed with new settings. But for the images already uploaded to your website you need to use additional plugin to refresh their sizes. Regenerate Thumbnails plugin (or similar) will do the trick.
This theme predefines some useful modifier CSS classes for you. You can use them in block editor, in page builder, or however you find useful. These classes modify appearance of your website elements and blocks.
For full up-to-date list of helper modifier CSS classes and instructions on how to use them refer to the theme demo website.
Having a performant website is a must. It makes your website more SEO friendly and most importantly pleasing for your visitors, more accessible. This theme was coded with performance in mind but we can always take things even further:
Use a good host
A good hosting for your website is very important choice you can make towards a speedy website. Depending on your location it is also advised to use a host that has servers in your country or at least on the same continent.
You should always keep the file size of your images, video, audio and other assets on your website as low as possible. Prepare images before you upload them to your website: compress them, reduce their dimensions, maybe even crop them. Use plugins to optimize further more such as Imsanity or Smush.
In case of video and audio files set the optimal compression and formats before uploading them to your site. Consider also using services such as Vimeo, YouTube or SoundCloud to host your files off your servers.
Also consider using a CDN service, such as CloudFlare.
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 tweak in Appearance → Customize → Theme Options → Layout.
Here is some tip for setting up your breadcrumbs display:
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="#top" class="back-to-top">Back to top ↑</a> <span class="breadcrumbs-title">You are here: </span>. (The "Back to top" link will only be displayed in breadcrumbs navigation below the page/post content.)
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.
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.
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).
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.
If you need to make styling or functional changes to the theme, use WordPress native child theming functionality. This way you can update the parent (original) Icelander theme without worrying your code would get overwritten and lost. All your custom code is kept safe in your child theme.
Put your custom CSS code into CHILD_THEME_FOLDER/style.css file. Alternatively use Appearance → Customize → Additional CSS for that.
Custom PHP code
If you want to change Icelander theme's functionality, do so in CHILD_THEME_FOLDER/functions.php file. You can freely modify any theme functionality via that file by hooking onto a specific filter or actionIcelander theme provides.
Sample child theme
Download a free child theme from WebMan Design GitHub repository. Don't forget to check the information in the repository for how to configure a child theme for your needs.
Please check the theme's source code for hook references (simply search for do_action and/or apply_filters), or contact support for help.
Icelander theme uses Theme Hook Alliance hooks too. This is useful to entirely rebuild the theme structure or add your own sections anywhere.
Tip:Theme builder compatibility
This theme can be modified with a theme builder plugin such as Beaver Themer or Elementor Pro Theme Builder. You will most likely need to install an additional compatibility layer plugin though (if you are not sure, please search or ask at support forum).