NaturaLife WordPress Theme

Created: 23 April, 2018 By: RT-Themes
Support: http://support-rt.com
Theme URL: NaturaLife WordPress Theme

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to post your questions on my support forum at http://support-rt.com. Thanks so much!


ONLINE DOCUMENTATION WITH SEARCH FEATURE

Click here to open the online version of the document with search and better navigation functionality.


Table of Contents

Thank you for purchasing NaturaLife. Before you can use your new purchase and start on your new website you need to install the newly bought theme. Before installing it you need to download the package from your ThemeForest account and unzip that download locally on your computer.

Downloading your NaturaLife from Themeforest

  1. Login your Themeforest account
  2. Got to your downloads page
  3. Click the “Download” button and chose “All files and documentation” file

Package Contents

Once you have downloaded the theme you need to unzip the package locally on your computer. It will probably look like this :

Now there are two ways to install a theme in WordPress.

  1. By uploading it use the WordPress theme upload
  2. By uploading it via FTP into the wp-content/themes folder

 

1) Uploading the Theme by WordPress Theme upload.

  1. To upload the theme through WordPress admin panel you need to login into your /wp-admin/ and
  2. Go to the WordPress –> Appearance –> Themes section of your cms system and click the Add Theme Button or Add New button at the top.
  3. Click the “Upload Theme” button at the top.
  4. Select the naturalife.zip from your computer and hit the “Install Now” button
  5. Once the install completed you can finally click the “Activate” button to make it the theme of your website.

Activating an installed theme

Go to your Appearance ▸ Themes and just click the “activate” button of the theme that you’d like to set your theme.

Note: If the internal WordPress Theme upload fails then you need to use FTP upload. Failure can be caused by :

  1. Security settings on your server
  2. Max Upload File Size set on your server

In either case, you can consider and contact your hosting company about the issue or just use FTP upload.

 

2) Uploading a Theme via FTP upload.

To upload the theme via FTP you need to unzip first the ava.zip you found in your download package. Installing by FTP upload is very easy. You connect to your server by an FTP program like filezilla or winscp and make sure you upload the NaturaLife folder and all its subfolders into the wp-content/themes folder so that after the upload you have wp-content/themes/naturalife.

rt19-ftp-upload

 

 

Learn how to install the theme, plugins and import the demo contents. Please watch in full screen with high quality (720p).

Please Note: In this video, we have used our Business Lounge theme but the installing process is almost identical. This video comes without audio support!

NaturaLife ships with 1 premium and 3 free recommended plugins.

  1. NaturaLife Extensions Plugin. Four custom post types (portfolio, team, and testimonials) and a huge amount of shortcodes. They are bundled in an extension plugin that ships with the theme and needs to be installed and activated separately.
  2. Elementor plugin. (recommended page builder)
  3. The Slider Revolution plugin. (optional)
  4. Contact Form 7 plugin. (optional)

Once the theme is activated, your admin area will show a notification message telling you that you need to install a required extension plugin. Click on the “Begin installing plugin” link to start the install of the extension plugin. In case you click on “Dismiss this notice” don’t worry as the option will be available also in the WordPress -> Appearance -> Install Plugins menu.

Installing the extension plugin.

Once you click on “Begin installing plugins” you will be linked to “Install Plugins” screen. You can select bulk installation or just click install link under the plugin names.

 

  1. WordPress Appearance
  2. Install Plugins
  3. Install the actual plugin

Several notes about activating an installed plugin:

  • In case you deactivate a plugin you will see the notification message telling you that the plugin needs to be activated and you will also see the Menu Option again in the WordPress –> Appearance –> Install Plugins page. Just hover over the listed plugins in that overview, of installed but not activated plugins, and choose the “activate” option of the plugin you wish to activate.
  • You can also activate/deactivate an installed plugin via the WP-Admin -> Plugins section.
  • If you are using a WPMS ( WordPress MultiSite ) install, you may need to update the plugins manually by FTP upload. However, you can use the Plugins Upload Page of your Super Admin Plugins Area to upload the plugins for the first time. The plugins can be found as separate zip files inside the NaturaLife ▸ rt-framework ▸ plugins folder. (unzip naturalife.zip first)

 

IMPORTANT NOTE:
These sample contents may contain some copyright protected materials. These images/videos are not included to your purchase. If you copy or import one of our demo content images/videos to use in your website then you need to have your own license. Purchase links and copyright details can be found inside the copyright.txt file that included into the “All files and documentation” package where you can download from your ThemeForest account.

 

A ) One click demo import

Go to Customize ▸ Demo Import page and follow the screen instructions.

Notes:

  1. The mailing list subscription forms depend on the Contact Form 7 plugin. If you’ll need those forms, before start the importing make sure you have installed and activated the plugin.
  2. Always use the import within a clean install! The demo import will install media, posts, settings etc. We recommend that use a clean WordPress install to get a perfect demo clone.
  3. Do not disrupt the installation process by multiple clicking the “start importing” button or closing the page.

 


B ) Manually import contents

All import files can be found in the “Demo Contents” folder that comes with “All files and documentation” package.

C ) Manually import slider samples (Revolution Slider)

The demo import will install the demo sliders but in case you need it, you can manually import slider demos that created with Slider Revolution Plugin. For extended documentation please check https://www.themepunch.com/revslider-doc/slider-settings/#import

  1. Go to the Slider Revolution in your admin area and click the “Import Slider” button.
  2. Our demo sliders located in the “Demo Contents” folder that comes with “All files and documentation” package inside Dummy Contents / RevSlider folder.

PHP Version

The theme works with PHP 5.4+ but it is always recommended to use PHP 7+ to have a faster and more secure website.

PHP Memory Limit

WordPress Memory limit should be 128MB or greater (256 MB is recommended by WooCommerce) For further reading check https://codex.wordpress.org/Editing_wp-config.php#Increasing_memory_allocated_to_PHP.

Sources:

 

PHP Maximum File Size, Post Size and Execution Time values

If you are getting errors/warnings during file uploads, demo imports,saving customizer or page builders; it is recommended to increase these values. Contact your web hosting provider if you don’t have a permission to change the PHP.ini file.

 

 

 

WordPress displays the blog posts on the home as default. You need to set a Static Front Page as your home page.

In here you can set and select a page :

  1. To act as your static homepage. The page where you land on when you visit your website.
  2. To act as you default blog page. Note: This setting is optional.

wordpress-reading-settings

NaturaLife uses the WordPress customizer to change the theme settings. This gives one the ability to see in the back-end what you are changing and how it looks on the front of your website.

The customizer can be accessed in two different ways :

  1. Through the WordPress Admin Area –> Appearance –> Customize menu option.
  2. Through the WordPress Admin Area –> NaturaLife Menu

 

 

In the customizer you can adjust all the design related theme settings and see the results on the preview screen right of the settings.

Customizer Menu

In the customizer area, the theme settings can be adjusted for each section (group) of settings we created.

  • For leaving exiting the Customizer click the [X] top left in the customizer window. Note : Unsaved settings are not stored and will be lost.
  • To adjust the settings choose and open one of the category (group) options.
  • To save your adjusted settings hit the save and publish button
  • The Arrow Right in the customizer menu indicates that there is a submenu with more menu options.

Customizer Active Area Indicator

rt19-flash-button

The indicator icon

When you are working in the customizer you might see a yellow flash indicator. When you click on the flash indicator the preview window will show you a flashing overlay indicating on which part of the screen you are adjusting the settings. If you do not see anything flashing that the area is not in the viewport and you need to scroll the right side of the customizer (the preview area) in order to see the indicator.

 

When you start working with child-themes you have to be aware of the following:

  1. The child theme uses its own customizer settings.
  2. If you already worked in the customizer of the parent theme and you want to carry over the settings you need to export the customizer settings ( NaturaLife ▸ Export ) first while the parent theme is still active and import (NaturaLife ▸ Import ) them back into customizer after activating the child theme.

Either way, the customizer needs a reset, import or save of settings. Otherwise, the pages in the front of your website will not look ok. This comes with the way WordPress stores the customizer settings per activated theme.

Carryover the settings from Parent Theme to Child Theme

So before activating the Child Theme. 1) Export The Customizer Settings.
After the activation of the Child Theme 2) Import The Customizer Settings.

Reset Customizer Settings in Child Theme

If you don’t want to import the settings in the customizer then you may need to reset the settings after activation of the child theme.

Below you will find images and descriptions on what the settings are about.


gs-breadcrumb

Customizer Breadcrumbs Settings

Select a page to prepend the single post in the breadcrumb path. Can be set for the Blog, Portfolio, Rooms and Team members custom post-types which are build in into the theme. Only the built-in post types that come with the theme have these setting.


gs-sidebar

Customizer Sidebar Options

In here the default sidebar postion (left or right) can be set for :

  1. Pages and posts
  2. Blog Categories
  3. Portfolio Categories
  4. Room Categories

rt19-general-settings-commentsonpages

Customizer Comments on Pages Settings

By default pages don’t have comments in WordPress, only posts. The theme has a build in setting to enable the comments on pages.

Note : You can still turn on/off the comments in the page itself once this setting is enabled.


gs-pageloadingeffect

Customizer Page Loading Effect

Enable or disable the page loading animation in all pages in your website. You can also customize the look and the logo set that used.

 

Body

You can change several settings for the body. These settings are global and there are same settings available for each page/post. Note: The page body will only be visible when a content row / section width is not full width or has a transparent background. Remember the Color Set 1 is the default color set of the theme and it has a background color option, too. To apply a global background for all pages including categories, portfolio etc., you can give a transparent color to Color Set 1’s background to make the body background visible in fullwidth pages.

 

Header

This part will allow you to customize the header bar that includes the logo and the navigation bar of your website.
 

 

Mobile Header

This color set used for the header for small screens which is possibly a mobile device such as mobile phone, tablets.

 

Dark / Light Header Skins

There are two color sets available for the header. Each color set contains same variables for the header such as text, border, navigation item colors etc. We have created one with darker colors to be used with a darker logo image on a light background and the other one with light colors on a dark colored background. There are also two logo sets available with the same logic that linked to these color sets.

 

Side Panel

Use the color set to customize colors of the side panel that also contains the mobile menu.

 

Sub Header

Sub header is the part that contains the page title and the breadcrumb menu of a page.

 

Header Tools

This part is referring the icons where the top right of the page. You can enable/disable those icons and change their styles.

 

Color Sets

Color sets are used to for content rows or columns. These are color schemes that allow you create a different look for your each content blocks. There are three of them available. The first one is the default color set of the theme. You are able to select a color set for a row or column or some modules like portfolio posts / carousels  when you editing a page by using Elementor.

Note : When different color schemes are selected for nested rows and columns, the results may not be what you expect it to be because of the order of loading of the scheme in the CSS files. Basically, it will follow the order of the scheme list to overwrite the one before. So loading a preset Color Set 1 into a Color Set 3 might not work as the Color Set 1 is loaded before the 3.

 

 

Footer

Customize the footer area

 

rt20-typography-options-1

In the Typography options you can customize; body, headings, main menu items for desktop/mobile devices or a couple of other areas that used in the theme. For example in order to adjust global body font size, click the Body and change the settings. The following settings can be adjusted;

  1. The font-family. Click on the select navigation to browse and select a font family
  2. The Subsets. Hold CTRL while clicking to select or deselect one or more subsets
  3. The font weight. Thin (200) Normal (400), Thick (600), Thicker (700), Bold (800/900), Italic.
  4. The font-size in pixels

Custom Fonts

The available font list contains Web Safe fonts, Google fonts as default. But you can add your own custom font to the list by using BusinessLounge ▸ Custom Fonts tool.

 

In the Portfolio settings the following settings can be adjusted:

  1. Global Layout settings. Select and set a default column layout for the portfolio category & archive listing pages. Grid or Masonry layout.
  2. Listing Parameters. Number of items per page & sorting order
  3. Featured images. Show on/off cropping, size

Global Portfolio Options

The following settings can be adjusted:

  1. Select and set a default column layout for the product category & archive listing pages for each of the post items listed within those pages.
  2. Select and set a default layout style for the product category & archive listing pages. Grid or Masonry
  3. Item Style
  4. Color set for item style 1

global-portfolio

Portfolio Listing Parameters

In the Portfolio Listing Parameters the following settings can be adjusted

  1. The amount of portfolio item per listing page. Note : Don’t set too many posts for a page to avoid slow loading.
  2. The sorting order by the parameter. Author, Date, Title, Modified (date), ID or Random
  3. The Sorting order. Ascending or Descending.

Portfolio Featured Image Settings

In the Portfolio Featured image the following settings can be adjusted:

  1. Enable or Disable the featured image to show on listing pages.
  2. Set the maximum width in pixels.
  3. Set the maximum height in pixels.
  4. Enable or Disable cropping of the featured image

 

In the Blog settings the following settings can be adjusted:

  1. Global Layout settings. Select and set a default column layout for the blog category & archive listing pages. Grid or Masonry layout.
  2. Featured images. Show on/off cropping, size
  3. Excerpts. Enable the use of excerpts or when disable the use of more tags.
  4. Post meta. Enable or Disable meta settings for single blog post or blog listing pages.
  5. Blog Name. Default Title for single blog pages in the header area.

 

rt19-global-options

Global Blog Layout Options

The following settings can be adjusted:

  1. Select and set a default column layout for the blog category & archive listing pages for each of the post items listed within those pages.
  2. Select and set a default layout style for the blog category & archive listing pages. Grid or Masonry

 

rt19-featured-image-settings

Featured Images

In the Blog Featured image the following settings can be adjusted:

  1. Enable or Disable the featured image to show on listing pages.
  2. Set the maximum width in pixels.
  3. Set the maximum height in pixels.
  4. Enable or Disable cropping of the featured image.

Note : These settings can be adjusted in the single blog post item itself.


rt19-blog-excerpts

Blog Excerpts

In the Blog Excerpt Settings you can enable the use of excerpts or use or “more” tags:

Notes :

  • If excerpts are disabled then your will see the complete content of a post in blog listing pages unless you have inserted more tags into the content of the blog post.
  • You can use a function to change the excerpts length. Consult the wordpress.org codex for this.
  • If you do not see the excerpt field in the single post then enable it in the screen options below the admin name.

rt19-postmetadata

Blog Post Meta Options

In the Blog Meta Settings you can enable disable what meta information should show on :

  1. the blog listing pages. Author name, Categories, Number of Comments, Post Date
  2. the blog single blog pages. Author name, Categories, Post Date

wp-screen-optionsNote : Each screen in the admin area has different screen options.

 

 


rt19-single-post-title

Blog Post Single Post Title

In the Blog Single Post Page Settings, you can set a default post title for all single blog pages. If no title is set it will display the post title instead.

rt19-social-media-item-settings

Settings per social icon

In the social media single item you can set :

  1. The URL for the linking of the social icon. The page that should open once the icon is clicked upon.
  2. The text that should show when the icon is hovered by the mouse
  3. The link target. Current window or in a new browser tab

Note : Two icons deserve extra attention.

  1. Email Icon. You can either enter a url or a email address.
  2. Skype Icon. The URL field should contain valid skype formatting. Enter a skype address. Syntax : ‘skype:skypeid?call’ or ‘skype:phonenumber?call

Note : In all the other URL fields you need to add http:// or https:// preceding the url to where you want to link otherwise it will link to a page within the website.

 

site-identity
  1. Save and publish the adjusted settings.
  2. Change and set the Site Title. It only shows when no logo image is set!
  3. Change and set the Tagline for the website.

 

rt19-copyright-text

Copyright Text

The Customizer Copyright text only has one setting. A text field where one can add valid HTML that should display in the websites copyright section in the footer.

Note: You can use only pure text but link HTML codes are allowed (<a href=”http://link.com”>text</a>)

Ava has several menu locations;

  • Main Navigation: The main menu location for all designs of the theme.
  • Mobile Navigation: A menu location for the mobile menu only. If this menu is empty the main navigation will be used as a mobile menu.
  • Side Panel Navigation: The navigation inside the side panel.
  • Footer Navigation: The navigation above the copyright text in the footer.

Once you activated the theme those locations will be created automatically so you can jump over the creating a new menu part but if you have a menu already created you must assign it to the location, inside the Manage Locations tab.

Managing Navigation Menus

  1. Go to Appearance ▸ Menus and select a menu that you want to edit.
  2. Use the left panel of the page to add a new navigation item into the menu.
  3. Custom post types such as Product Showcase, Team, Testimonial, WooCommerce Products will not be visible in the available item list as default. You must activate them via the screen options. Please check these two screenshots;

 

Menu items are dragged and dropped into the menu containers. Try some of the WordPress menu tutorials on youtube.com as they explain all.
WordPress 3.0 menu system
WordPress 3.0 menu custom links


rt20-menu-item

Editing Menu Items

Once you have these fields visible in the menu item you can

  1. Extend a menu item and click the CSS Classes field then a list of available icons will appear that allows you select and set an icon to the menu item. To add icons to a menu items make sure in the in the screen options you have enabled the CSS Classes.
  2. Add a sub text to the description field to display below the menu item’s label text. To add a description text to a menu item make sure in the in the screen options you have enabled the Description.
  3. Select Multi-Column Menu option to split the sub menus into columns.

 

Mobile Navigation

Be aware that the mobile navigation is different than the one you see on your computer while resizing the browser window. The mobile menu will be looking different then the desktop version and some of those setting will not be visible in the mobile view such as icons. If you want to have a different menu than the main menu only for the mobile screens you can use the “Mobile Navigation” menu location.

Widgets and Sidebars

The Widgets options menu looks like this:

  1. Use the left arrow to get back to the upper parent settings menu item.

  2. Use the Save and Publish button to save your changes made in the settings.

rt19-customizer-wdigets

In the Widgets options you can add widgets to 4 of the default widgets container areas that are created by the theme.

  1. Sidebar for Footer (Column 1)
  2. Sidebar for Footer (Column 2)
  3. Sidebar for Footer (Column 3)
  4. Common Sidebar

Note : There are only these 4 widgets containers that can be set and adjusted in the customizer.

How To Add Widgets in the customizer?

To add widgets in the customizer click the “Add A Widget”button. You will notice that the list of widgets will appear on the right side if that button and you can search for a certain widgets or if its already visible select it. The moment you select a widget it will be added to the container you started the adding widget process from and the options to be set for that widget will become visible. Set the options as you want the widget to behave itself. Once done you can save the settings in the customizer.

Customize widget areas for a page individually

Edit a page/post and select Right / Left option from the Sidebar Position list. Then you’ll able select  to customize the order of the sidebars that will be displayed for the page. Leave the list blank to use the default settings.

page-design-sidebar-settings

Creating new sidebars

For creating a new sidebar you’ll need to install a plugin like;

Stag Custom Sidebars Plugin
WPMuDev Custom Sidebars Plugin

Once you created a new sidebar you’ll be able to select it inside the sidebar locations list.

 

There are two logo sets available;

  • Dark Logo Set: to be used within the dark header skin
  • Light Logo Set: to be used within the light header skin

Each logo set contains 6 logo file for regular, sticky and mobile headers. Use the 2x versions to provide a proper support for Retina/HDPI devices. Otherwise, your logo image may look blurry in those devices such as new tablets, smartphones and MacBook’s.

 

There are two main header styles are available; One Row and Two Rows. You can relocate the header elements and use other settings to create your custom header. Also, use the header presets to easily create a header layout as seen in the demo. Go to Customize > Styling Options > Header to change the global header settings.

 

 

There are two color sets available for the header.

  • Dark Header Skin
  • Light Header Skin

Each color set contains same variables for the header such as text, border, navigation item colors etc. We have created one with darker colors to be used with a darker logo image on a light background and the other one with light colors on a dark colored background. There are also two logo sets available with the same logic that linked to these color sets. For example, we’ve used the light header skin for this page https://naturalife.rtthemes.com/demo/home-page-v/ and customized the header background color of the page as transparent inside the page design options individually since it is overlapped on a darker slider image. When you scroll down, the page “sticky header” picks up the dark color set on a white header background. Use header skins to;

  • Customize menu colors
  • Customize sub menu colors
  • Header line colors
  • Header font colors

 

 

 

There are 4 tool icons available for the header;

  • Language Menu Icon: Available only when Polylang or WPML plugins installed
  • Search Icon
  • Cart Icon: Available only when WooCommerce plugin installed
  • User Icon: Available only when WooCommerce plugin installed

You can show/hide any of the header icons via Customize > Styling Options > Header

Or use the Design Options > Header of a page/post to overwrite the global settings individually.

There are four header widget areas (sidebars) available. These widget areas support only the Text, Social Media, Custom Menu, Custom HTML widgets. Usage of other widgets may break the header design but it won’t be a big problem if you know what are you doing.

Every page displays the sub-header as default. The sub header contains two elements; the page title and the breadcrumb menu. You can disable these elements globally via Customize > Styling Options > Sub Header or use the Design Options for a single page/post.

You can disable those elements by using the “Design Options > Sub Header” inside the page/post edit screens to overwrite the global settings individually. When you check the “hide the entire sub header” checkbox, the sub header will not be displayed like the home pages.

 

Footer Widgets

Go to Customize -> Styling Options -> Footer to reach footer related settings.

 

Footer Widgets

You can add footer widgets via Appearance -> Widgets page. Use the Footer related widget areas (sidebars).

Elementor is a front-end page builder that let you create complex layouts without having to code by yourself. Install the plugin, go to edit a page/post and, click  “Edit with Elementor” button on the top of the screen.

The theme has many design options available in the Customizer -> Styling options that help you control design of your website. Some of those options are available for pages/posts individually inside the “Design Options” box available for each page/post edit screen. Design options always overwrite the global settings when changed. Design options also contain a couple of different option than the global options such as “Customize Menus” and “Sidebars”.

For example, let’s say you have selected “Header Stye 1″ from the Customize > Styling Options > Header Options to be used as the global setting for your entire website. But a page you are working needs to be”Header Stye 2”, then you can adjust it for the page by using the “Design Options”.

 

 

rt20-multi-column

You can create a multi-column drop down menu by selecting the “Multi-Column” check box that is available for each menu item. But please note that it will be functioning only for the top level items. Once you check the box the sub menu items will be split into columns when displaying. Check the screenshot from our demo website. We created the “Features” menu by collecting the third-level sub menu items under five second-level items. A second level item will be considered as a section title if it has a submenu. Those multi-column menus will be displayed as regular menus in the mobile menu.

Using WordPress Menus

The WordPress system comes with the ability to build your own custom navigation menus. Menus are built by creating ‘containers’ in which you drag drop your menu items. The menu ‘containers’ once created and filled with menu items are set to the themes locations.
F.e. : Suppose you create a menu container called ‘My main navigation’. Once done you assign this menu to the Theme Main Navigation Location. By doing so your custom menu will be listed at that location within the theme where the main navigation is located.

Menu Subtitles

Ava supports subtitles for the Main Menu location. Subtitles are to be added in the individual menu item itself in the menu-item description field. If you don’t see the description field then while in the WordPress menu system click on the screen options just below the admin name
(top right corner of your screen) and enable the description field in the screen options. It will then become visible in the menu item to be used and filled with a subtitle.

wordpress-menu-screen-options

Note : Menu Item Subtitle support is only available for the main menu container / location and only for the top level menu items. So sub level menu items will not display any subtitle, which is by design.

Note : You can use :

  • the “Main Navigation Menu” container for the main navigation location,
  • the “Footer Navigation Menu” container for the footer menu location,

Of course, you can create new containers with your own fancy naming and assign those to the theme menu locations. You can also assign each container to the same location. But be aware not every location supports sub level menu items as the main menu location does. Which means that the footer and top menu locations can only have top level menu items and will not display any dropdown (sub) menu items.

Mobile Navigation.

Note : Be aware that the mobile navigation is different than the one you see on your computer while resizing the browser window.

Q : Where is the WordPress Menus??

A : Go to Appearance → section tab → Menus

wordpress-navigation-section

Q : How can I build a navigation menu?

A: See steps below

  • Click on the edit menu tab in the WordPress menu system and select the “Main Navigation Menu” from the drop-down list and click the select button.
  • You can also create a new menu container in that same tab by clicking on the ‘create a new menu’ link on the right side of the menu select button.
  • The menu system is divided into two sections. On the left, you see all your pages, posts, products, categories, portfolio items. On the right section, you see the custom menu container with your menu items.
  • Drag the pages, posts, categories etc into the menu container or select them and click on the add to the menu button. You will notice they appear as a list of menu items in the second section, the actual menu container.
  • Each menu item has settings which can be adjusted. You can change the navigation label, the title attribute (this is what you see when you hover the menu item and which is very good for SEO to use), the description, and even add your own classes to f.e. target that specific menu item by that class by the use of custom CSS (for experienced users).
  • If you don’t see all of the just mentioned menu item settings enable them in the screen options below the admin name.
  • The listed menu items in the menu container can be rearranged by dragging and dropping. You can also make them a sub-level menu item by dragging them to the right below another menu item and releasing (dropping) them.
  • Drag and Move the menu items within the list and thus create your menu system.
  • Below the Menu items in the menu container the theme locations are listed. Make sure you select the location for the menu you are creating. This will be the location where the menu will show in the front of your website. You need to select and set this in order to display your menu in that location.!!
  • Click “Save Menu” button to save your just designed and created the menu and visit the front of your website to see the result.

Q : How can I add an icon and or subtitle to the menu item?

A: See steps below

  • For the icon : In the menu item click with the mouse in the class field, a popup will appear with available icons. Select the icon of your choice.
  • For the Subtitle : Type any text in the Description field

Note : If you don’t see these fields enable them in the screen options while in the menu system. See image below.

navigation-add-icon-subtext

Q : I do not see (Portfolio / Product / Post) Categories in the menu system to add to my menu. How can I make them visible?

A : See steps below

  • Click on “Screen Options” tab just below the admin name while you are working in the WordPress menu system.
    wordpress-menu-screen-options
  • Make sure within the screen options the post, product, and portfolio categories are selected (enabled) to have those categories listed and thus available on the left side of the menu system. Once enabled you can add them to your menu container.

Q : How can I add a “Home Page” or a Custom link?

A : See steps below

  • Use the “Links” box on the left side. Click on it to open its options.
  • Type your (home page) URL in the URL field.
  • Type “Home Page” or anything Label text that you want to call your (home) page in the “Link Text” field.
  • Click “Add to Menu” button.
  • Go to the newly added link menu item in the menu container and drag it to its place and adjust its settings (optional).
  • Do not forget to save the menu !

Q : Is there a video on this?

A : See steps below

There are many good videos available on youtube. Go to youtube.com and search for ‘WordPress 3.0 menu system’. Watch some of those great video’s and discover how the menu system works.

  1. Go to Appearance > Widgets and add widgets to the Top Bar widget locations.
  2. The top bar will automatically appear when you have a widget inside one of the top bar widget locations unless you disable it via  Appearance > Customize > Styling Options > Top Bar
  3. Use only Custom Menu, Text and Social Media Icons widgets inside the top bar and leave blank their title’s.
  4. Customize colors via Appearance > Customize > Styling Options > Top Bar

 

The side panel can be used for both mobile and desktop screens. You can control the visibility of the menu icon via the Styling Options -> Side Panel.

I) Side Panel for Desktop Screens ( > 1024px )

Enable the side panel via Customize > Styling Options > Side Panel.

 

II) Mobile Menu & Side Panel for Mobile Screens ( <= 1024px )

Mobile menu is a part of the side panel. The Main Navigation menu will be automatically displayed in the side panel in mobile screens. Make sure both “Mobile Side Panel” and “Mobile Menu” options have been checked to display a mobile menu.

III) Custom Mobile Menu

If you want to use a different menu than the Main Navigation, you can create a new menu and assign to the Mobile Navigation location.

 

IV) Side Panel Widgets

The content of the Side Panel has been divided into 3 widget areas. You can place a widget to be displayed in a desktop or mobile screen( browser window width <= 1024px ) or use the Side Panel (Common) widget location to display your widget in all screen sizes.

To add a content slider you can use a “Content Slider” module in the Elementor, Visual Composer, or the shortcode.  You can find the details of the shortcode inside the Shortcode Helper window.

Adding with Elementor

  1. Go to the element list and find [RT] Slider element
  2. Add and slides be using the “+ ADD ITEM” button and configure.

 

Revolution Slider is a plugin with which you can build responsive sliders with text layers, video layers, image layers etc. To get a Revolution Slider into a page, add a Revolution Slider module/element and choose the slider you created by the use of that plugin. How to create a revolution slider is explained in here:

Revolution Slider documentation can be found here: Slider Revolution Documentation

Adding a slider to a page with Elementor

Add a Revolution Slider element and select your slider.

 

 

 

To create a Blog list you need to have single blog posts. Those can be grouped by categories and then presented that way in a overview page (a blog list).

Use WordPress “Posts” to create your blog posts.

wordpress-posts

Things you should know
  • Upload a featured image by clicking the “Set featured image” link under the “Featured Image” box.

    post-attached-images

  • A similar way the Gallery images can be attached to the post by pressing the “Add New Images” link/button in the Image Gallery box.

    post-image-gallery

  • A Post has a format option. Depending on which post format is chosen more settings become available which need to be set. The options each have help support textfields explaining what extra setting needs to be supplied. The chosen post format determines how the post should behave at the front of your website.

    postformats

Post Format Options

  • There are six post format available to select at the “Post Format” options :
    1. Standard : The attached featured image is shown,
    2. Gallery : Display Image(s) as gallery or slider,
    3. Link : Tell something about a subject of choice and add a (outside) link to the post,
    4. Video : Show and Play a Video,
    5. Audio : Show and Play a Audio file,
    6. Aside : The Post item is listed in the blog list but cannot be opened in a single post.
  • Once a post format has been selected new options that needs to be set for that post format become available in the post below the post format option setting.

    rt19-postoptions

Any page can contain a Blog list and you can create as many as you want with different settings.

Create with Elementor

  1. Create a new page or edit an existing one.
  2. Edit the page with Elementor by clicking the “Edit with Elementor” button.
  3. Find the “[RT] Blog List” element and add to the page.
  4. Adjust the element settings the way you want and save the page.

You can create your posts via your admin by using the Add New link under Posts menu. If you are not familiar the posts of WordPress you may want to check this page for further reading https://codex.wordpress.org/Writing_Posts

Post Formats

The theme comes with six different post format that allows you create a different kind of posts. You can change your post’s format by using the Post Formats section in a single post add/edit screen. Once you click a format option, it’s options will be appeared as the second section below it.

 

Portfolio is a built-in tool that allows you create flexible portfolio lists and pages.  If you have products or services that want to present in an organized way, portfolio posts will be a life saver for you.  Remember you change the permalink structure via Tools -> Permalinks.

 

To create a portfolio item  just visit your WordPress admin panel and click one of the Add New buttons under Portfolio

portfolio-add-new

Featured Image and Image Galleries

Use WordPress’s featured image box to upload/select the featured images of the post. The featured image will be used in the listing pages and carousels. It will also be included to the image gallery unless disabled from the portfolio options box. If you have selected  Image / Gallery portfolio format, you must use the Image Gallery box to select / upload the gallery images.

featured-images

 

 

Single Portfolio Posts

A single portfolio page can have different layouts.

  1. Default Layouts
    • Image / Gallery
    • Video
  2. Custom Layouts
    • Visual Composer
    • Regular page
1) Default Layouts

We have two post formats for a portfolio item; image / gallery and video. Please follow the screen options under the portfolio options box to find the best layout variation for your content.

portfolio-options

2) Project Info or Custom Layouts

You can use the Project Info to place a box near the main content. It is optional! Select custom layout to disable the box completely. If you are planning to  create custom layouts by using the page builder or shortcodes, you must select “custom layout”.

portfolio-project-info

Notes

  • A portfolio post can have a featured image and multiple other images attached to show as a portfolio image gallery.
  • A portfolio post needs to be assigned to at least one category
  • Upload a featured image by clicking the “Set featured image” link under the “Featured Image” box.
  • Use the options set inside the “Portfolio Options” box to change the layout/style of the single portfolio page or  behavior of the item in a portfolio list.

 

Any page can contain a Portfolio List and you can create as many as you want with different settings.

1) Create with Elementor

  1. Create a new page or edit an existing one.
  2. Edit the page with Elementor by clicking the “Edit with Elementor” button.
  3. Find the “[RT] Portfolio List” element and add to the page.
  4. Adjust the element settings the way you want and save the page.

2) Create with Shortcodes

You can do the same thing without using a page builder. All you need to do create a page and add “Portfolio Posts” shortcode of the theme. Please check the “Shortcodes” section to learn more about the shortcodes.

insert-shortcode

To create a team member page you need to have member items. Those can be called by a shortcode or visual composer element and then presented that way in a overview page (a team member listing or about us page).

rt-team-members

Things you should know

  • Team Members don’t have categories.
  • Calling a Team members has to be done by it’s id in the shortcode or select them one by one in the visual composer element settings.
  • The Team  body except (short info) allows valid HTML code (h-tags, a-tags, divs). We suggest to keep it as simple as possible.

Any page can contain a Team list and you can create as many as you want with different settings.

1) Create with Elementor

  1. Create a new page or edit an existing one.
  2. Edit the page with Elementor by clicking the “Edit with Elementor” button.
  3. Find the “[RT] Team” element and add to the page.
  4. Adjust the element settings the way you want and save the page.

2) Create with Shortcodes

You can do the same thing without using a page builder. All you need to do create a page and add “Staff Posts” shortcode of the theme. Please check the “Shortcodes” section to learn more about the shortcodes.

rt19-team-shortcode-example

Creating a Team Member.

Creating a Team Member is actually a straight forward process. Use the “Team” Custom Post Type to add your Members.

  1. In the WordPress Admin Area go to the member Post area
  2. Either click on Add New Member in the Menu or the Add New Member in the top of the Post List

rt19-add-new-team-member

Things you should know

  • Team Staff Members don’t have categories.
  • Calling a Team / Staff members has do be done by its id in the shortcode or select them one by one in the visual composer element settings.
  • Upload a featured image by clicking the “Set featured image” link under the “Featured Image” box.
  • The Team / Staff body except (short info) allows valid HTML code (h-tags, a-tags, divs). We suggest to keep it as simple as possible.
  • For each Team / Staff Member item one can add :
    1. A Title – Position
    2. A Short info box for the listing pages. A small excerpt.
    3. 40+ links to social pages all supported with an icon
    4. A complete “story” about the person into the body content of the team item post. Any valid HTML, shortcodes are allowed but also a complete design by visual composer elements.

The Single Team member Item

The Single Team Member item has a lot of options.

rt19-single-team-member

  1. The Title (Name) of the Team Member
  2. The Content of the Team Member. The story you want to tell. This info will show in the single team members page.
  3. The Position. His Job title.
  4. The short info for listing pages
  5. The social icons you want to attach to this team member.

    Note : Not all are shown (50+)

    Note : Two icons deserve extra attention.

    1. Email Icon. You can either enter a URL or an email address.
    2. Skype Icon. The URL field should contain valid skype formatting. Enter a skype address. Syntax : ‘skype:skypeid?call’ or ‘skype:phonenumber?call
  6. Attach a featured image of your team member.
  7. Publish the post. Make the post visible in the front of your website. Or change its date, visibility, set it draft and or preview it in the front of your website.
  8. Switch to visual composer mode to add visual composer elements or classic mode and add shortcodes or text to the team member the normal WordPress way.
  9. The Screen options. Enable / disable what you want to have visible in this custom post type.

Once all settings and content is added to the portfolio item you can publish the post and it will become visible in the team member list you created in a page either by adding the team member posts shortcode or visual composer team member element to that page at the location where you want the team member list to appear.

To create a testimonial page you need to have testimonial items. Those can be called by a shortcode or visual composer element and then presented that way in an overview page (a testimonials listing or “What people say about us” page).

rt19-testimonials

Things you should know

  • A single testimonials item can not be previewed or viewed as single post
  • Testimonials can be grouped by categories.
  • Calling a Testimonial has do be done by its id or category
  • the testimonial text allows valid HTML code (h-tags, a-tags, divs), but we advise to keep the formatting as simple as possible.
  • For each Testimonial Item one can add :
    1. Name of the person who wrote the Testimonial
    2. Job title of the person who wrote the Testimonial
    3. URL to that person’s website or social page
    4. Text for the URL
  • Upload a featured image by clicking the “Set featured image” link under the “Featured Image” box.

Any page can contain a Testimonial list and you can create as many as you want with different settings.

1) Create with Elementor

  1. Create a new page or edit an existing one.
  2. Edit the page with Elementor by clicking the “Edit with Elementor” button.
  3. Find the “[RT] Testimonials” element and add to the page.
  4. Adjust the element settings the way you want and save the page.

2) Create with Shortcodes

You can do the same thing without using a page builder. All you need to do create a page and add “Testimonial Posts” shortcode of the theme. Please check the “Shortcodes” section to learn more about the shortcodes.

rt19-testimonials-shortcode-in-page
[/rt_column] [/rt_columns]

Creating a Testimonial

Creating a Testimonial is a pretty straight forward process. Use the “Testimonials” Custom Post Type to add your Testimonials.

  1. In the WordPress Admin Area go to the Testimonials Post area
  2. Either click on Add New in the Menu or the Add New in the top of the Post List

rt19-creating-testimonial-item

Things you should know

  • A single testimonials item can not be previewed or viewed as a single post
  • Testimonials can be grouped by categories.
  • Calling a Testimonial has do be done by its id or category
  • the testimonial text allows valid HTML code (h-tags, a-tags, divs), but we advise to keep the formatting as simple as possible.
  • For each Testimonial Item one can add :
    1. A Name of the person who wrote the Testimonial
    2. A Job title of the person who wrote the Testimonial
    3. A (valid) URL to that person’s website or social page
    4. A Text for the URL
  • Upload a featured image by clicking the “Set featured image” link under the “Featured Image” box.

    post-attached-images

The Single Testimonials Item

The Single Team Member item has not so many options as the other post types.

rt19-single-testimonial-item

  1. The Title (Name) of the Testimonial
  2. The Testimonial Text
  3. Clients Name
  4. The Clients Job Title
  5. The Clients Link Text (optional)
  6. The Clients Link Url (optional)
  7. The Client image or logo
  8. The Testimonial category to group them
  9. Publish the post. Make the post visible in the front of your website. Or change its date, visibility, set as a draft.
  10. The Screen options. Enable / disable what you want to have visible in this custom post type.

Once all settings and content are added to the testimonial item you can publish the post and it will become visible in the testimonials list you created in a page either by adding the testimonials posts shortcode or visual composer testimonials element to that page at the location where you want the testimonial list to appear.

Note : Since testimonials have not a single post page, they don’t have individual design options, too.

Google Maps API Key

Google Maps requires a valid API key defined. (currently it is just for new domains) You’ll need to enter your API key into the Google API Key field inside the Customize ▸ General Options ▸ Google Maps section.

First of all there in an extended Google Documentation available for the process on this page https://developers.google.com/maps/documentation/javascript/get-api-key

In order to simplify everything, we’ve created some screenshots with some explanations;

Sign into your google account and go to https://console.developers.google.com/ and activate your DEV account. It is free! Under “Google Maps APIs” heading, click “Google Maps JavaScript API” link.

If you didn’t create a project before, click to the “Create Project” link and create one.


Don’t forget to enable the API usage.

Now, you need to create credentials. Click to the “Create credentials” button then select “API key” option.

We’ll use the api key as a “Browser key”

In the credentials section, you can add your website URLs as a wild cart URL for multiple domains. You can find more info on the Credential screen about how to limit the access of your API key.

Finally, your API key will be created

 

There are three plugins bundled with the theme;

  1. NaturaLife Extensions:  This is our plugin and available for the theme only. This plugin adds many new features to the theme.
  2. Revolution Slider: It is a 3rd party premium plugin. We bought a special license for the plugin that allows you use without having a separate license your own. You don’t need to purchase this plugin. Ignore the license messages of the plugin, it is only for direct buyers.

First of all, you need to note that you don’t have to purchase separate licenses in order to update these 3rd party bundled plugins. Always use the one that comes with the theme to be sure its compatibility.

When we release a new version of the theme we will include the most recent versions of the plugins to the package. When you update the theme, you’ll see a notification top of your page in the admin panel (if it has not been dismissed) By clicking the “Begin updating plugins” link you can update all of them as you did when you installing them. If you don’t see the notification, you can check Appearance -> Install Plugins page. If the “Install Plugins” link is missing, then can be sure there is no available update.

update-plugins

update-bundled-plugins

 

Manually Update

If you need to manually update the plugins, you can find the zip files inside /ava/rt-framework/plugins/ folder. Then all you need to do is extract and upload them via FTP to their directories. https://codex.wordpress.org/Managing_Plugins

IMPORTANT NOTES

  • If you have already purchased and activated your purchase code for auto updates of Visual Composer, it will be disabled! We have a very valid reason to do that. The plugin updates may break some parts of your website or new feature may not be compatible with our theme. So, the best way is waiting the update of the theme and update the plugin with the bundled one.

The theme comes with a huge number of shortcodes that allow you to add pre-designed content blocks by shortcodes into the content area of any page. Some shortcodes can also be added to a Text or HTML Widget in a sidebar or into any text-area. A shortcode gets processed once the page is viewed in the front of your website. For example, a contact form shortcode will display a contact form at the location where that shortcode was inserted into the content.

Editor Mode

The WordPress editor has two modes; Visual Mode (in some languages called “WYSIWYG Mode”) and Text Mode (in some languages called “HTML” Mode). To use the auto insert function for the shortcodes one has to use the Visual or Wysiwyg Mode of the editor.

The Shortcode Popup Window / Button [</>]

There are two ways to open the shortcode generator window and insert a shortcode while the editor is in Visual mode :

  1. Above the editor text-area by clicking on a button which looks like this : [</>].
  2. By clicking on the </> Shortcodes menu item in the WordPress Admin Bar

Click on one of those two buttons will open a popup window with a list of available shortcodes. The shortcode you select in that popup window will present two or three sections:

rt19-access-shortcodes

Shortcodes Explained

rt19-shortcode-explained

When you click on the shortcodes button a popup screen will appear with the following information :

  1. A list of available shortcodes
  2. One section, on the left explaining the shortcode and its parameters,
  3. One section on the right showing an already pre-generated shortcode, you can adjust the shortcode following the parameters as they are explained on the left. Once done adjusting select the modified shortcode, copy it and paste it into the page content, text area or text widget.
  4. Each of the parameters and its options. This list can be very long depending on the shortcode chosen

The already pre-generated shortcode in the top right of that window can be altered by following the explanation on the left. It is wise to adjust the variables while having that window open before hitting the shortcode insert button. The moment you copy the shortcode and close the shortcode screen you need to paste it into a textarea at the location where you want the shortcode to be executed.

Performance

Speed up your website by using minified and combined versions of the css/js files that used for the theme.

 

Special Pages

Set a page as your 404 page or enable maintenance / under construction mode without a 3rd party plugin.

You can use self-hosted or TypeKit fonts with the theme. Add custom fonts by following the screen instructions. The new font will be added to the top of the fonts list inside the Customize > Typography Options.

You can import export your theme settings including customizer panel settings. If you want to switch to a child theme, it is recommended to export your settings first.

 

Note : In a WordPress Multisite you need to enable importing of the txt file extension the superadmin area settings.

Note : If for some reason the settings in the customizer look different then on the real view of the website then try the following:
1) Export the customizer settings
2) Reset the customizer settings
3) Import the customizer settings.

 

The theme has a built-in contact form. It is available to use by a shortcode or page builder module. If you want to have a customized contact form or newsletter signup form you can use a free plugin called Contact Form 7

 

Creating Sample Booking / Newsletter Forms

  1. Install Contact Form 7 plugin
  2. Import sample forms via WP-Admin > Tools > Import.Sample forms can be found inside the folder Dummy Contents / Forms folder of the “All files and Documentation” package. You can download the package from your Themeforest account / downloads page. Note that, if you have used “Demo Import” tool of the theme the sample forms might be imported already.
  3. Edit forms and update the form settings such as from email, to, from and from name etc.
  4. Then, you can use the shortcode one of the newsletter forms in a text widget.
shortcode-contact-form-7

Using the form shortcode in a text widget

contact-form-7

Contact Form 7 forms list after import

 

 

 

 

 

 

 

The theme has some useful class names that you can use in a “CSS class name” fields in the builder or anywhere else if you are writing an HTML code.

Lightbox

rt_lightbox Add the class name to an image or video link (YouTube and Vimeo only) to the linked media in a lightbox window.

Boxed Design & Shadows

boxed Boxed design
shadow Shadow 1
shadow-2 Shadow 2
shadow-3 Shadow 3

Hover Styles

hover-shadow Shadow style on mouse over
hover-opacity Lower opacity on mouse over

Alignments

aligncenter
alignleft
alignright

Text Alignments

text-left Left aligned text.
text-center Center aligned text.
text-right Right aligned text.
text-justify Justified text.
text-nowrap No wrap text.

Text Alignments for Small Screens

mobile-text-left Left aligned text.
mobile-text-center Center aligned text.
mobile-text-right Right aligned text.

Bootstrap Class Names

You can use Bootstrap responsive class names. http://getbootstrap.com/docs/4.0/utilities/display/ For example to hide an element only on small devices like smartphones you can use the d-sm-none d-md-block class name.

Typography Class Names

There is a class name for each selected font from the Typography Options. For example, to use the same font family that selected for headings in a module like tabular contents you can just use “heading-font” class name inside the css class name field of the module.

heading-font Heading Font
body-font Body Font
secondary-font Secondary Font
menu-font Menu Font
sub-menu-font Sub-Menu Font

Colors

body-font-colorBody Font Color
primary-font-colorPrimary Font Color
light-font-colorLight Font Color
heading-colorHeading Font Color

There are two main steps must be completed to have a one-page design.

  1. Creating a page that has content rows/sections with unique IDs.
  2. Creating a new navigation menu that targets those IDs.

Note: It is recommended to use the “Stick Always” style of the Sticky Header for one-page navigations. ( Customize > Styling Options > Header Options –> Sticky Header Behaviour )

 

1) Creating the Page

Once your menu is done, you can create a new or edit an existing page to define the sections to be matched the menu.

Define Sections ( Elementor )

There are two valid methods in Elementor;

  • You can use the CSS ID inside the Advanced tab of a section or column.

 

  • Or use the Elementor’s “Menu Anchor” element.

 

2) Creating the Menu

  • Create a new menu via Appearance -> Menus
  • Add “Custom Link” to the menu and give a link as “/#unique-section-id”  that will be matched to the section in the final page.
    rt19-one-page-design-manual-link

Note: Do not forget to use the full URL of the page ( like http://yourwebsite.com/#unique-section-id ) when the one-page design is not the homepage and you have other menu items in the menu linking outside the “One Page Design” page.

 

The theme uses default strings which can we found in the theme language file that comes with the theme. These strings are grouped into one file which is located in the {theme_name}/languages folder. The file called is {theme_name}.pot. The values of those strings can be translated by the use of the poedit program. Or a plugin called Loco Translate

Loco Translate:

There is a free plugin called Loco Translate https://wordpress.org/plugins/loco-translate/ which allows you translate the files easily.

PoEdit

You will have to create a translation of that file by the use of poedit and name the file following the wordpress codex naming convention for localization. If you use different names the theme will not find the translations for the default strings you created.

Note: Even if you don’t like the default English wording used by us within the theme you can create a translation file called en_US.po and en_US.mo and change the wording this way. No need to do hard coded changes to the theme core files for those strings. The files you created with poedit you need to upload by an FTP program into the /wp-content/themes/{theme_name}/languages folder. You can read more on this and how this works on the RT-Themes forum : Show me →

WPML (WordPress Multi Language) is a plugin which gives your website the ability to have the same content in different languages. With WPML you don’t have to create a website for each language. You can have one website (domain) and have each page, post portfolio, product etc. show up in its the different language.

Changing languages

Once the plugin is enabled the flags show in the front of the website below the navigation and will give your visitors the ability to view a page in the selected (active) language (if the page has been created for that language). All they have to do is click on one of the listed flag (language) icons.

Notes:

  • If a page or (custom) post has not been translated / created in that language it won’t show of course.
  • Flags will only show for each of the activated languages.

How to Use the WordPress Multi-Language Plugin on Default Content?

Here are the Steps we would use to Translate a Page or Post :

  1. Create a page and finish the complete content with featured images and all other images, attachments etc. Once done publish the post.
  2. Once finished that page make sure you have the post / page opened (in the admin back-end) and on the right side just below the admin name in the wpml option box check the languages and create a duplicate of that page for each of the other languages.
  3. While still in that ‘original’ page change the language by the use of the language selector button (menu option) in the admin bar. The page will be presented in the other language.
  4. You will see the page in the other language but since you duplicated the content it will look exactly the same as in the original content of the primary default language your created the page in, in the first place.
  5. You now have two options…. :
    1. You leave it like it is which means that if somebody switches the language in the front of your website he will see the same page but still not translated.Note : If you do not create duplicates for a page or post that page or post will not show in the other language and throw the user back to the root of the domain in the other language if he clicks on the flags while viewing a page in the hope to see and read the translated version of that page. Note 2: WPML has an option called ‘Blog Post to Display’. You can set that option to ‘All posts’ or to ‘Only Translated Posts’. Please only use the ‘Only Translated Posts’ setting. The Theme does not support the ‘All Posts’ setting. You can read more about that here on the forum : Show me that tutorial
    2. You disconnect the duplicate from the original language by hitting the ‘ Translate Independent’ button in the WPML box just below the admin name. Making them independently translated pages means you can now write and adjust the content in the other language without affecting the content in the ‘master document’ or the original document.Note:The documents are still connected to each other by the WPML plugin but the content is now separated.Note 2:Not making them ‘Translate Independent’ documents means that if you change the content in one of the other languages you are actually modifying the content in the primary default language. So be careful here and watch your steps.
  6. Don’t forget to publish the translated version!
  7. Repeat steps 2, 3, 4, 5 and 6 for each language.

WordPress Multi-Language Plugin and Categories.

The theme comes with custom post types like Portfolio, Rooms, Teams which like the Posts of WordPress itself can be grouped into categories. In order to have Posts grouped and listed by category you will have to :

  1. Create a Post
  2. Create a Category
  3. Attach the Category to the Post
  4. Publish the Post

Calling a category will list all posts attached to that category in the requested sort order. Categories can be added to the menu system as a menu item. So once clicked upon a list of posts attached to that category will show.
By translating a category and posts the same can be accomplished for each of the translated category listing pages. The translated category will then list all posts attached to it within the other language.

Note : It is wise to create the categories first and their translations for each language. You will notice that if a post is attached to a category and that post is translated you don’t have to worry about the translation of the category anymore as wpml will already know it and assign the correct one to the post.

WPML Plugin String Translation Addon

WPML CMS Plugin comes with an add-on called String Translation. Theme supports string translations for fields we use throughout the theme. Even within the template builder. Once such string is detected by the WPML plugin its translation can be done in the String Translation Add-on. So instead of creating duplicates of some fields and content, if supported, these can be translated a different way. You can read more on the string translation add-on at WPML.org.

Note : Not all strings will be visible in the string translation Add-on.

Only the strings (fields) we connected and have taken care of within the theme code, will be visible on the list of the string translation add-on. For example :

  • Copyright text
  • Slogan
  • Social Media
  • Breadcrumb text
  • And much more…

WPML and Different Widgets Per Language

For widgets that are not supported by (string) translation, duplication WPML advice to use plugins like Widget Logic and Dynamic Widgets to make widgets appear in a certain sidebar areas based on a language ID. Please consult the WPML documentation on this on how to use and accomplish that. Show me →

Q : Can I get support on how the WPML plugin works?

A : No, WPML has its own support forum and documentation where one can get information and help (paid or non-paid). We only fix and support our coding mistakes if any. In the How To section available documentation on WPML pretty much covers all common questions and working on the WPML plugin within the theme.