First of all, thank you for purchasing RT-Theme 19. We hope you like it!
Downloading your RT-Theme 19 from Themeforest
To download the theme you need to login into your themeforest account and go to the download section where your purchase will be visible (see the image below).
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.
By uploading it by ftp into the wp-content/themes folder
By uploading it by use of the wordpress theme upload ability
1) Uploading a Theme by ftp upload.
To upload the theme by ftp you need to unzip first the rttheme19.zip you found in your download package (see above image). After unzipping that file you will see this
When you would look into the rttheme19 folder you will see something like this.
Installing by FTP upload is very easy. You connect to your server by a ftp program like filezilla or winscp and make sure you upload the rttheme19 folder and all its subfolders into the wp-content/themes folder so that after the upload you have wp-content/themes/rttheme19. Note : Do not create wp-content/themes/rttheme19/rttheme19
After the FTP upload you should have this.
Now Login into your wordpress install as admin and goto the Appearance –> Themes section and activate your just by FTP uploaded theme by hovering over the RT-Theme 19 image and click the activate button.
Go to Appearance
Go to Themes
Activate the theme
2) Uploading the Theme by WordPress Theme upload.
To upload the theme by WordPress theme upload you need to login into your WordPress install and go to the WordPress –> Appearance –> Themes section of your cms system and click the Add Theme Button or the Plus Sign (see image below).
After clicking the Add Theme button or + Sign a new screen will load and in that screen you can manually upload your new theme by clicking the Upload Theme button.
After clicking the Upload Theme button a new screen opens (again) and in that screen you can select the rttheme19.zip file and finally install the theme. For this click in that screen the button to select the zip file and after selecting that file hit the “Install Now” button to install the theme.
When all done correctly this message will display and you can hit the activate link to activate your newly uploaded theme.
In case you hit the Return to Themes link or forgot to activate the theme then go back to the Appearance –> Themes section and activate your theme by hovering over the RT-Theme 19 image and click the activate button.
Go to Appearance
Go to Themes
Activate the theme
Note : If the internal WordPress Theme upload fails then you need to use ftp upload. Failure can be caused by :
Security settings on your server
Max Upload File Size set on your server
In either case you can consider and contact your hosting on this or just use FTP upload.
1.2 - Installing the Bundled Plugins
Navigate to the theme menu / Plugins page to manage the bundled plugins with the theme. Some of the plugins might be free plugins that are available to update from the regular WordPress / Plugins screen. But, for the theme extension and other premium plugins you need to use “Manage Plugins” page to automatically install or update.
Manually Install / Update Bundled Plugins
If you are having difficulties using the Manage Plugins tool, you can try manually updating your plugins. Important Note: Make sure you have updated the theme first before updating the bundled plugins.
Step 1: Download the theme ZIP file from your ThemeForest Account / Downloads page and extract it to your computer.
Step 2: Go to your WordPress Admin / Plugins and click on the “Add New” button and select a related plugin zip file from the /theme-name*/rt-framework/plugins/packages/ folder on your computer and follow the screen instructio
1.3 - Installing Bundled Plugins
RT-Theme 19 ships with 3 additional plugins :
RT-Theme 19 Extensions Plugin: Four custom post types (portfolio, products, team and testimonials) and a huge amount of shortcodes. They are bundled in a extension plugin that ships with the theme and need to be installed and activated separately.
Note : Activation of the RT-Theme 19 extension plugin is necessary for a correct import if the DEMO-Content that ships with the theme.
Visual Composer Plugin: The visual drag & drop page builder.
Slider Revolution Plugin: The advanced slider plugin for complex slide animations. Installing is optional
Once RT-Theme 19 is activated your admin area will show a notification message telling you that you need to install a required extension plugin. This screen looks like this
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 menu.
Installing the extension plugin.
Once you click on “Begin installing plugin” you will be linked to this screen:
WordPress Appearance
Install Plugins
Install the actual plugin or use the bulk install
Activating a installed plugin.
Note : 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 Plugin Section. 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.
Note : Of course you can also activate a installed plugin in the WordPress plugins section.
Note : The plugins can be found as separate zip files inside the RT-Theme 19 ▸ rt-framework ▸ plugins folder.
Note : If you would like to import the Portfolio, Product Showcase, Testimonials & Team related posts and media you must active RT-Theme 19 Extensions Plugin first. For WooCommerce you must active WooCommerce Plugin before even starting the import process.
1.4 - Installing the Demo Content
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 document file that included into the “All files and documentation” package where you can download from your themeforest account.
This step is optional, if you would like to replicate the demo website contents of the theme you can just import them. There are two ways to import the demo contents;
Installing by automatized tools that you can find under Customize ▸ Demo Import
Installing by using WordPress’s native import tools.
1) One click demo import
Go to Customize ▸ Demo Import page and follow the screen instructions.
2) Install manually
2-1) Import content samples
Before starting:
In order to get copies of Product Showcase, Team, Testimonial contents you must activate RT-Theme 19 Extensions Plugin and for sample WooCommerce products, activate WooCommerce Plugin.
Click the browse button and select the XML file of your selected demo on your computer. It is located in the “Demo Contents” folder that comes with “All files and documentation” package.
Hit “Upload file and import” button and follow the screen instructions.
Import Error Messages
When you import the demo content and Woocommerce is not active you might see some import errors after the import process. This is normal.
You most probably get tons of notification after the import because the plugin’s current version is still using one of the old WordPress functions. But it still functioning well so you can just ignore them.
This is not our plugin and we have no control over it!
Importing to a WordPress Multi Site install
When you import the demo content running a WordPress multi site (wpms) make sure you set the file types extensions that are allowed to import properly otherwise you get import errors. You must check the following file types has been entered into the “Upload file types” box inside WordPress Network Admin ▸ Network Settings page
jpg jpeg png gif mp3 mov avi wmv midi mid pdf txt js css mp4 ogv webm ogg ico zip
2-2) Import the Demo Content Sample Widgets
You can import the widgets that are used in the demo content.
WordPress Admin → Tools → ‘Widget Importer & Exporter’, click the ‘ Browse’ button and browse to the ‘wie’ file on your computer.
Our demo widgets located in the “Demo Contents” folder that comes with “All files and documentation” package.
Hit “Import Widgets” button to import the slider.
Note : Before you import the widgets that come with the theme go to the WordPress widgets area and remove the widgets that WordPress has already put into the first widget container called “Sidebar For Footer (Column 1)”. It is a annoyance that WordPress does on every new install of a theme. Just make sure before the import of widgets that area is empty.
2-3) Activate the skin of your choice
After importing the demo content you can set the layout of the theme to any of the available skins. Open the Customizer and go to Styling Options ▸ Pre-Made skins and activate the skin of your choice.
Go to the WordPress Admin / Slider Revolution in your admin area and click the “Import Slider” button.
Our demo sliders located in the “Demo Contents” folder that comes with “All files and documentation” package.
1.6 - Updating
When you activate your product, you’ll be prompted when there is an update available for the theme. There are two steps to finish the updating process.
Updating the theme
Updating the bundled plugins
Updating the theme
Go to your WP-Admin / Themes and click on the update now button over the theme thumbnail.
Troubleshooting
If you don’t see the “Update now” button, go to the Dashboard / Updates screen to trigger the pre-update process of WordPress.
If you are using WordPress Multi Website install, then you or the network administrator need to update the theme manually.
If you are having connection problems, try to disable your security plugin before updating then activate it after.
Consider updating your theme manually by simply following the “Installation” process.
Updating the bundled plugins
Navigate to the theme menu / Plugins page to manage the bundled plugins with the theme. Some of the plugins might be free plugins that are available to update from the regular WordPress / Plugins screen. But, the theme extension plugin and premium plugins cannot be automatically installed/updated somewhere else but this screen.
Troubleshooting
If you are having difficulties using the Manage Plugins tool, you can try manually updating your plugins.
Make sure you have the right user-level permissions to install/update a plugin.
1.7 - Video Install Demo Content
WATCH THE INSTALLATION AND IMPORT DEMO-CONTENT SCREENCAST
Please watch this video full screen with high quality (720p) on how to import the sample content.
Note: This video comes without audio support!
1.8 - Bundled 3rd Party plugins
The RT-Theme 19 comes with bundled 3rd party plugins for which we have bought valid extended licenses.
The Visual composer
The Slider Revolution
Things you should know and be aware of :
The Page content can be completely build in a visual design mode. This means what you see is what you get and you drag and drop elements into its place. Each element has its own settings panels and can be adjusted the way you want it to be. But the visual composer plugin has te be activated for this in order to have that ability.
The Slider Revolution plugin is a plugin with which you can build responsive sliders with text layers, video layers, image layers etc.
The Revslider documentation can be found here : Slider Revolution Documentation
We update these plugins to their latest versions when the theme updates and when feel the plugin is stable to update.
If you want support on how these plugins work above documentation is a very good guidance. If you have issues with these plugins and want support from the developers who build these plugins you need to buy a valid license of these plugins. We fix issues with these plugins within our theme. We make them work and keep them working. We don’t fix issues, nor can we support that, which are within the plugin itself nor can we teach you how these plugins work. It is a learning curve in which you as a user has to invest your own time.
2 - Version 2.0 Notes
2.1 - About v2.0 and updating from v.1x
RT-Theme 19 version 2.0 is a major update and comes with many new options and features. There are two new design options which mainly changes the look of the header.
Your current website style will not change unless you select a new design option from Customize > Styling Options > Design Options. So, you don’t have to worry about if you have customizations for your current setup.
Mega menus, top bar, side panel, header widgets are only available for Layout 3 and Layout 4.
If you have been using String Translation plugin of WPML to translate your logo image (the url) or the Footer copyright text, you may need to re-translate it. The version 2.0 of the theme only supports the latest version of the String Translation plugin.
Remember that it is always a good practice to have a backup before updating a theme or a plugin.
3 - Theme Customizer
3.1 - Theme Customizer
RT-Theme 19 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 in the front of your website.
The Customizer can be accessed in two different ways :
Through the WordPress Admin Area –> Appearance –> Customize menu option (see number 1 image below)
Through the WordPress Admin Area –> Customize Menu (ability added by RT-Theme 19)
Access the Theme Customizer / Settings
Import Theme settings which have been exported before. Note : In a WordPress Multi-site you need to enable importing of the txt file extension the super admin area settings.
Export the current theme settings to a txt file.
Reset all Theme settings to default. Note : All your settings will be erased
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.
Both Customize Menu options (1) bring you to the same area where you can visually adjust the theme settings and which looks like this:
In the customizer you can adjust all the theme settings and see the results on the preview screen right of the settings (In RTL mode : of course on the left size).
Note : For some settings a highlight area will be visible in the preview window ony if that area is in the visible part of your screen. I could mean that you need to scroll the preview area to actually see the setting you are adjusting.
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 (or RTL right) in the the customizer window. Note : Unsaved settings are not stored and 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 (see image further down below).
The Arrow Right in the customizer menu indicates that there is a submenu with more menu options.
The Arrow Down indicates that there is a settings panel with settings one can adjust.
Sub menu example in customizer
Customizer Submenu Working
Use the left arrow to get back to the upper parent settings menu item.
Use the Save and Publish button to save your changes made in the settings.
Customizer Active Area Indicator
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.
3.2 - Customizer & Child-Themes
When you start working with child-themes you have to be aware of the following:
The child theme uses its own customizer settings. This means that after activating the child theme you have to reset the settings in the customizer and save the settings
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 first while the parent theme is still active and 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.
Carry over 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 dont want to import the settings in the customizer then you need to reset the settings after activation of the child theme.
RT-Theme 19 child theme can be found inside the “All files and documentation” package.
3.3 - General Settings
Below you will find images and explainative text on what the settings is about.
Customizer Performance Settings
Enable loading of optimized css files.
Enable loading of optimized js files.
Note : Enable them when you are done with designing your website.
Note : Only the css and js files that come with the theme are optimized. Plugins with their own js and css files are not included in this.
Note : Disable this setting when you use firebug to get to the elements in order to alter them by custom css as it is harder to find the element and its corresponding css. You can/should enable these settings when you are completely done designing your website.
Customizer Breadcrumbs Settings
Select a page to prepend the single post in the breadcrumb path. Can be set for the Blog, Products Showcase, Portfolio and Teammembers custom post-types which are build in into the theme.
Note : Only the build in post types that come with the theme have these setting.
Customizer Sidebar Options
In here the default sidebar position (left or right) can be set for :
Pages and posts
Blog Categories
Portfolio Categories
Product Showcase Categories
WooCommerce Categories
Note : You need a plugin to create custom sidebar area’s and attach these to pages. You can read more on that here in this part of the documentation (scroll to the bottom in that article) : Sidebar plugins
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.
Customizer Page Loading Effect
Enable or disable the 100% loading effect overlay animation in all pages in your website.
3.4 - Logo Image and Logo Box Settings
RT-Theme 19 comes with many options for the site logo. You’ll need to check two part of the Customize screen to adjust your logo;
Logo Options: To change the logo image file
Styling Options / Logo Box: To adjust the box around the logo image.
1 ) Logo Options
Use the logo options to change the logo image file. You can have a standard logo image for regular screens without high resolution like retina devices. For retina devices like new MacBooks, Tablets, Smart Phones you may need upload a retina version of the logo image by using the Retina Logo field.
While using just a big version of the logo image for the Standard logo field without using a retina logo is enough for most kind of logo images but some logos that has thin lines or characters may not look good when it resized by the browser to fit the logo box that holds the image. (in Internet Explorer mostly) So, If you have a logo like this, you may need to have a separate logo images for both standard and retina fields. Retina logos must be at leatst 2x bigger than the standard logo with the same aspect ratio.
2 ) Logo Box Options
You can find the logo box options under the Styling Options. There is always a box that wraps the logo image even if it is transparent. You can use the logo box settings to add a background color for the logo or set maximum height and width for the logo image. Please enlarge the image below to learn how it affects the logo image sizes.
What is the perfect logo size?
To avoid browser resizing that mentioned in the 1 ) Logo Options section above, your logo image must not be bigger than the logo box. So, you can either play with the max width and height values of the box or upload smaller images.
3.5 - Design Options – Header Styles
You can change the design via Customize > Styling Options > Design Options. RT-19 comes with four different design options. These are;
Layout 1 – Vertical Navigation
Layout 2 – Horizontal Navigation
Layout 3 – Horizontal Navigation (v2)
Layout 4 – Centered Logo
When you switch to another design layout, you may see new options appeared across the Styling Options.
Important notes about switching the design options;
Many styling options are common for all four design options. When you switch between the designs you may notice that your header, menu styling etc. are not looking good as the demo site. It is because there are other options that affect your header look such as; Header Options, Main Navigation Options, Shortcut Icons Options etc. You must check and adjust these settings if needed. If you haven’t customized the colors yet, you can do it easily by using the Styling Options > Pre-Made skins.
All these designs has different content widths, column margins, row paddings etc. If you have dynamically resized images then you need to make sure they are still looking good, after the switch. If not, you can simply increase the min width and height values for the resizer.
If you have switched your layout from one of the v1 layouts (Layout 1, Layout 2) to any of v2 layout (Layout 3, Layout 4) and if you have a custom value set to any “Image Max Width” field for one of the listed options or modules below, you better check and adjust them. We recommend minimum690px for the “Image Max Width” fields or leave it blank for auto resizing.
Product Options -> Featured Images
Portfolio Options -> Featured Images
Blog Options -> Featured Images
WooCommerce Options -> Featured Images
Modules used within the Visual Composer that has custom featured image settings like Product, Portfolio, Blog, WooCommerce posts and carousel modules.
Example image resizing setting for Layout 3 or 4;
3.6 - Styling Options
Below you will find images and explainative text on what this styling options settings is about. In the styling options color settings can be set for the available elements in the theme, but also a background image and padding can be adjusted for those elements that support that feature.
The styling options have four appearances. The options may change when you change the Design Options in the styling settings.
Changing that setting will control and change the available options in the Customizer Styling Options.
Styling Options Vertical Layout.
Activate a preset skin that comes with the theme
Set Vertical or Horizontal menu layout
Set the default width (content width or full width)
Set a background color or image to the body class
Set a color or image to the left side of the page
Set a color or image to the right side of the page
Enable or Hide the page titles and or breadcrumbs
Set the height and padding for the logo
Modify the color settings and padding for the menu
Adjust the color settings for color preset group 1
Adjust the color settings for color preset group 2
Adjust the color settings for color preset group 3
Adjust the color settings for color preset group 4
Set the Icon location before or after the menu and modify the color settings for the sidebar elements
Modify the width and color settings of the footer area
Styling Options Horizontal Layout.
Activate a preset skin that comes with the theme
Set Vertical or Horizontal menu layout
Set the default width (content width or full width)
Set a background color or image to the body class
Set the Stick Header, Menu items padding, Header bar width, color and or background image
Enable or Hide the page titles and or breadcrumbs
Set the height and padding for the logo
Modify the color settings and padding for the menu
Toggle On / Off the available icons for the horizontal menu
Adjust the color settings for color preset group 1
Adjust the color settings for color preset group 2
Adjust the color settings for color preset group 3
Adjust the color settings for color preset group 4
Set the Icon location before or after the menu and modify the color settings for the sidebar elements
Modify the width and color settings of the footer area
Styling Options Activate a preset skin
The theme comes with default 5 preset skins (we might add more later). You can simply select a preset skin by clicking the + Select a Skin button.
A list of available skins will popup on the right of the select button.
The moment you select a skin you need to confirm the action.
After confirming the action the new skin will be loaded and will show in the preview area which might look like this
Note : The popup confirmation is because any settings you did in the current skin which you did not save are lost. You can still exit the customizer without saving even if you preview another skin. Only your unsaved changes to the previous skin are lost.
Note : The moment you Save and Publish the new skin will be applied and the old skin settings will be gone. As long as you don’t save and publish the customizer with new skin activated you can leave the customizer and open it up again and the old skin will be back.
Note : It is wise to export you current skin settings first so in case you want to revert you can import the settings of that skin back into your install.
Export the current skin and it’s settings
Import a saved skin and it’s settings
Styling Options Design Options
In the Design Options the menu appearance of the theme can be changed. The choices are :
Vertical menu design.
Horizontal menu design.
Content Row Settings
In the content row settings the default width for a content row can be set. Available options are
Content Width (boxed mode). This means the content area does not extend all the way to the left / right side of the browser.
Full Width. This means the content area does extend all the way to the left / right side of the browser.
Styling Options Body Settings
In the Body settings of the styling options a background color or background image can be set globally for all pages and posts.
Note : This can also be done in the page or post itself on a individual basis.
Upload a (self hosted) MP4 file
Upload a (self hosted) WebM file
Set and select a background color.
Upload and set a background image. The moment you click on the Image Upload button the WordPress Media Library will popup and give you the ability either to upload a new image or to select a current one.
Set the position of the background image.
Set it fixed or scrollable.
Note : Fixed background in certain area’s can cause issues in certain browsers.
Select and set if the image should be repeated in horizontal or vertical or both ways.
Note : Only works on scrollable images.
Select and set the size of the background.
Auto: The background-image contains its width and height
Contain: Ensures that the entire background-image will display by showing the image at a scaled size.
Cover: Scales the background image so that the smallest dimension reaches the maximum width/height of the element.
Percentage: Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to “auto”
Styling Options Left Side Settings
In the styling options Left side settings the color or a background-image for the area behind the menu can be set globally. Note : This can also be done in the page or post itself on a individual basis.
Besides what we already mentioned in the styling options body settings there are two settings that need extra attention.
Top Padding: With this setting the top padding of where the logo and menu area should start can be set.
Transparency of the background-color. The color picker has a transparency slider. This is useful when you have set a background image for the body. Then the image will shine through in the background-color. But be aware old browsers dont support transparency and will fall back to the full 100% color as set.
All the other settings for background-images are already explained in the styling options body settings. Note : All these settings can also be done in the page or post itself on a individual basis.
Styling Options Right Side Settings
In the styling options Right side settings the color or a background-image for the area behind the menu can be set globally. Note : This can also be done in the page or post itself on a individual basis.
Besides what we already mentioned in the styling options body settings there are two settings that need extra attention.
Top Padding : The top padding can be set in pixels for where the content should start.
All the other settings for background-images are already explained in the styling options body settings.
Note : All these settings can also be done in the page or post itself on a individual basis.
Styling Options Header Settings
The header settings only apply to the vertical menu and are only visible when in the Design Options in the customizer the horizontal menu layout is set.
In the header settings the following settings can be adjusted :
Turn On / Off the sticky menu
The breadcrumbs padding
The Header bar width (full width or default whic is content width)
The Header background colro or image
Styling Options Sub Header Settings
In the header settings the title and breadcrumbs can be controlled as well as the background-color or image of that area globally. Note : This can also be done in the page or post itself on a individual basis.
Below in the image you can se which area is affected by the header settings (the one with the darker yellow color where the title and the breadcrumbs are shown.
The Header settings look like this.
Besides settings we already mentioned in other parts of the styling options there are five settings that need extra attention.
Hide Page Titles : The page titles can be hidden globally for all pages.
Hide Breadcrumbs : The breadcrumbs can be hidden globally for all pages.
Page Title Color : The page title color can get set globally for all pages with a title visible
Header Bar Width : The header area can be set to “Full Width” or “Default” which is the content width.
Parallax Efffect : The Background image can de set to parallax effect. Note : the image has to be big enough to have this working.
Color settings for the breadcrumbs path
Note : All these settings can also be done in the page or post itself on a individual basis.
Styling Options Logo Box Settings
In the logo box settings the maximum size of the logo can be controlled, the padding around the logo can be set and controlled, as well as the logo background color, the logo border color and for text logo’s de logo text color.
Note : The color settings are available for the normal logo and mobile logo.
Note : Decrease the padding when you logo is bigger or use the padding to center the logo within that area the why you like it. The complete area is 290px x 150px.
Note : In the Horizontal menu you can also control the Logo maximum height.
Styling Options Main Navigation Settings
In the main navigation settings the color settings for the menu can be set. The text color and background-color can be set for the toplevel menu items as for the submenu items. Each color settings also has transparancy options. These settings are global and do not have individual settings in any page or post.
There is three setting that need extra attention.
Item Vertical Padding : in here you can set the menu item vertical padding. The space top and bottom around the menu item text.
Item Horizontal Padding : in here you can set the menu item horizontal padding. The space left and right around the menu item text.
The Mobile Menu Background Color (2) setting is only available for the horizontal Menu Layout
Shortcuts Buttons (Horizontal Menu only)
If the horizontal menu is set then a new menu option appears to turn on / off the icons in the menu.
Styling Options Color Set 1 – 4
The RT-Theme 19 comes with 4 Color presets. Groups of color settings that can be applied to a row a section. These color presets can be selected in the visual composer and applied to a row. Each row can be set to one of these 4 presets besides the row background image or color settings. There are no individual color settings per row. You can only choose out of these 4 presets color groups.
Each preset group has 10 preset color settings.
Check out the numbers in above image. It indicates to what element the color apply.
Primary Color. Applies to highlight text and the button background color.
Row Background Color. Applies to the background of the row.
Text Color. Applies to the “normal”text color.
Secondary Text Color. Applies to punchlines, strike out elements.
Opposite Text Color. Applies to the text within the primary color that is used as a background.
Link Color. Applies to any link in the text of the row.
Heading Color. Applies to any H-Tag in the row or slider if it is part of that row.
Border Color. Applies to the border around the row (thickness can be set in the row element).
Form Button Background Color. Applies to any form button in the row.
Social Media Icons Background. Applies to the background of any social media icon in the row.
Note : Most of these settings are NOT available in the row settings on a individual base.
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 Preset scheme 1 into a Preset scheme 3 might not work as the Scheme 1 is loaded before scheme 3.
Styling Options Sidebar Elements
In the sidebar the colors can be set and the the icon location before or after the vertical menu.
The theme comes with icons that are visible in the sidebar (can also be turned off). These icons can show up below the logo or below the menu. Their location can be set here.
The sidebar area also has it’s own color settings for the background and the elements that can appear in a sidebar. The ones that are most visible are explained here.
Note : The (2) text color that is not a link is indicated twice in this image just for explainative reasons.
Styling Options Footer Area
Besides the color settings which apply to the various elements as explained in below image the footer has 4 settings that deserve more attention.
Footer Widgets Layout : In here you can set the column layout for the footer widget area.
Footer Background Width : The width of the footer area can be set to full width of the right side page area or to default which is the normal content width.
Footer Content Width : The width of the footer content can be set to full width (applies only if footer has been set to full width) or to default width, which is the normal content width.
Covered Footer : This is what some might call the Sticky Footer. Classic means the Covered (sticky) Footer is turned off. Covered means the Covered (sticky) Footer is turned on.
Note : The Covered Footer only works when there is enough content in the page. It then sticks while scrolling.
Note : When you set the bottom rows in a page to transparency it might very well be that you can see the footer below the text in the normal content. You should be aware of this and do not set any transparency in these rows when the Covered Footer is turned on.
In the image below the color settings are explained for the most common color settings and to which element they apply.
3.7 - Typography Options
RT-Theme 19 Customizer Typography Options.
In the Typography options the following settings can be adjusted.
Body default font-family and font-size
Headings default font-family and font-size
Main Menu default font-family and font-size
Sub Menu default font-family and font-size
Body Typography Settings
In the body typography settings the following settings can be adjusted
The font-family. Click on the select navigation to browse and select a font family
The Subsets. Hold CTRL while clicking to select or deselect one or more subsets
The font weight. Thin (200) Normal (400), Thick (600), Thicker (700), Bold (800/900), Italic.
The font-size in pixels
Note : Be aware the the available options in subsets and font-weight can vary per font family. So they might be different in another font.
Headings Typography Settings
In the headings typography settings the following settings can be adjusted
The font-family. Click on the select navigation to browse and select a font family
The Subsets. Hold CTRL while clicking to select or deselect one or more subsets
The font weight. Thin (200) Normal (400), Thick (600), Thicker (700), Bold (900), Italic.
The font-size in pixels per heading (H-Tag)
Note : Be aware the the available options in subsets and font-weight can vary per font family. So they might be different in another font.
Main menu Typography Settings
In the main menu typography settings the following settings can be adjusted for the top level menu items.
The font-family. Click on the select navigation to browse and select a font family
The Subsets. Hold CTRL while clicking to select or deselect one or more subsets
The font weight. Thin (300) Regular (400), Thicker (700), (300) Italic.
The font-size in pixels
Note : Be aware the the available options in subsets and font-weight can vary per font family. So they might be different in another font.
Sub menu Typography Settings
In the sub menu typography settings the following settings can be adjusted for the top level menu items.
The font-family. Click on the select navigation to browse and select a font family
The Subsets. Hold CTRL while clicking to select or deselect one or more subsets
The font weight. Thin (300) Regular (400), Thicker (700), (300) Italic.
The font-size in pixels
Note : Be aware the the available options in subsets and font-weight can vary per font family. So they might be different in another font.
Typography Miscellaneous Settings
In the Miscellaneous Settings the breadcrumbs font-size can be set.
3.8 - Portfolio Settings
RT-Theme 19 Customizer Portfolio Settings.
The portfolio settings menu looks like this:
Use the left arrow to get back to the upper parent settings menu item.
Use the Save and Publish button to save your changes made in the settings.
In the Portfolio settings the following settings can be adjusted:
Global Layout settings. Select and set a default column layout for the portfolio category & archive listing pages. Grid or Masonry layout.
Listing Parameters. Number of items per page & sorting order
Featured images. Show on/off cropping, size
Comments. turn on off comments in single portfolio item.
Portfolio Layout Settings
Adjust the default number of columns for the portfolio pages should present its portfolio items.
Set and select the Gid layout or the masonry layout
Set and select if the portfolio item information should appear below the featured image or within (on top) of the featured image
Note : Applies to the default category and archive pages. The portfolio shortcode or element in the visual composer has it’s own settings for this.
Portfolio Listing Settings
Adjust the number of items to show before pagination kicks in.
Set and select the sorting order.
Set and select the sorting order to either ASC or DESC (ascending or descending).
Portfolio Featured Image Settings
Enable or Disable the featured image to show on listing pages.
Set the maximum width in pixels.
Set the maximum height in pixels.
Enable or Disable cropping of the featured image.
Note : These settings can over adjusted also in the single portfolio item itself.
Portfolio Comments Settings
Enable or Disable comments on single portfolio item post pages.
Note : You can still override this setting within the page itself and turn off the comments. This setting only enables the comment ability.
3.9 - Product Settings
RT-Theme 19 Customizer Product Settings.
The product settings menu looks like this:
Use the left arrow to get back to the upper parent settings menu item.
Use the Save and Publish button to save your changes made in the settings.
In the Product settings the following settings can be adjusted:
Global Layout settings. Select and set a default column layout for the product category & archive listing pages. Grid or Masonry layout.
Listing Parameters. Number of items per page & sorting order
Currency Options. Symbol, location, visibility
Featured images. Show on/off cropping, size
Single Product Layout. Select and set the layout of the single product page.
Related Products Layout. Select and set the columns layout for related products
Global Product Options
The following settings can be adjusted:
Select and set a default column layout for the product category & archive listing pages for each of the post items listed within those pages.
Select and set a default layout style for the product category & archive listing pages. Grid or Masonry
Product Listing Parameters
In the Product Listing Parameters the following settings can be adjusted
The amount of product per listing page. Note : The higher the amount the slower pages can load.
The sorting order by parameter. Author, Date, Title, Modified (date), ID or Random
The Sorting order. Ascending or Descending.
Product Currency Settings
In the Product Currency the following settings can be adjusted
The Currency Symbol
The location of the currency symbol. Before or after the amount.
Display the price in product listing pages. Yes / No
Display the price in single products pages. yes / No
Product Featured Image Settings
In the Product Featured image the following settings can be adjusted:
Enable or Disable the featured image to show on listing pages.
Set the maximum width in pixels.
Set the maximum height in pixels.
Enable or Disable cropping of the featured image.
Note : These settings can over adjusted also in the single product item itself.
Single Product Layout Settings
Set and select the width of the content box that has the product short information, product title and product image(s)
Set and select the layout style of the single product. There are 4 preset styles.
Note : These settings can over adjusted also in the single product item itself.
Related Products Settings
Set and select the column layout for the related products attached to a single product. 2, 3, 4 or 6
Set and select the cropping of the related product images. On / Off.
Note : These settings are not available in the single products item and apply to all single products pages.
3.10 - Blog Options
RT-Theme 19 Customizer Blog options.
The product settings menu looks like this:
Use the left arrow to get back to the upper parent settings menu item.
Use the Save and Publish button to save your changes made in the settings.
In the Blog settings the following settings can be adjusted:
Global Layout settings. Select and set a default column layout for the blog category & archive listing pages. Grid or Masonry layout.
Featured images. Show on/off cropping, size
Excerpts. Enbale the use of excerpts or when disable the use of moretags.
Post meta. Enable or Disable meta settings for single blog post or blog listing pages.
Blog Name. Default Title for single blog pages in the header area.
Global Blog Layout Options
The following settings can be adjusted:
Select and set a default column layout for the blog category & archive listing pages for each of the post items listed within those pages.
Select and set a default layout style for the blog category & archive listing pages. Grid or Masonry
Blog Featured Image Settings
In the Blog Featured image the following settings can be adjusted:
Enable or Disable the featured image to show on listing pages.
Set the maximum width in pixels.
Set the maximum height in pixels.
Enable or Disable cropping of the featured image.
Note : These settings can be adjusted in the single blog post item itself.
Blog Excerpts
In the Blog Excerpt Settings you can enable the use of excerpts or use or more-tags:
Excerpts: On /Off.
Note : 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.
Note : You can use a function to change the excerpts length. Consult the wordpress.org codex for this.
Note : If you do not see the excerpt field in the single post then enable it in the screen options below the admin name.
Note : Each screen in the admin area has different screen options.
Blog Post Meta Options
In the Blog Meta Settings you can enable disable what meta information should show on :
the blog listing pages. Author name, Categories, Number of Comments, Post Date
the blog single blog pages. Author name, Categories, Post Date
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.
3.11 - Woocommerce Options
RT-Theme 19 Customizer Woocommerce options.
The woocommerce options menu looks like this:
Use the left arrow to get back to the upper parent settings menu item.
Use the Save and Publish button to save your changes made in the settings.
In the Woocommerce options the following settings can be adjusted:
Global Layout settings. Select and set a default column layout for the blog category & archive listing pages. Grid or Masonry layout.
Listing paramaters
Featured images. Show on/off cropping, size
Single Product Layout. Select and set the layout of the single product page.
Related Products Layout. Select and set the columns layout for related products
Woocommerce Global Layout settings
In the Woocommerce Global Layout settings the following setting can be adjusted: Select and set a default column layout for the product category & archive listing pages for each of the (single) post items listed within those pages.
Woocommerce Listing Parameters
In the Woocommerce Listing Parameters the following setting can be adjusted: n here you can set the amount of product items to show per page before pagination kicks in. You can drag the horizontal (scroll) bar to the left or right to decrease or increase the value or you can directly input the amount into the text field.
Woocommerce Featured Image Settings
In the Woocommerce Featured image the following settings can be adjusted:
Enable or Disable the featured image to show on listing pages.
Set the maximum width in pixels.
Set the maximum height in pixels.
Enable or Disable cropping of the featured image.
Note : These settings can NOT be adjusted in the woocommerce single product item.
Woocommerce Single Product Layout
In the Woocommerce Single Product Layout the following settings can be adjusted:
The width for the content block that contains product title, short info and the images.
The style for the tabular content.
Note : These settings can be adjusted in the single Woocommerce product item itself.
Woocommerce Related Products Settings
In the Woocommerce related products optionss the following settings can be adjusted:
Set and select the column layout for the related products attached to a single product. 2, 3, 4 or 6
Set and select the cropping of the related product images. On / Off.
Note : These settings are not available in the single products item and apply to all single products pages.
3.12 - Social Media
RT-Theme 19 Customizer Social Media.
The Social Media options menu looks like this:
Use the left arrow to get back to the upper parent settings menu item.
Use the Save and Publish button to save your changes made in the settings.
In the Social Media options the following settings can be adjusted:
The link, title and target per available social media option.
Settings per social icon
In the social media single item you can set :
The Url for the linking of the social icon. The page that should open once the icon is clicked upon.
The text that should show when the icon is hovered by the mouse
The link target. Current window or in a new browser tab
Note : Two icons deserve extra attention.
Email Icon. You can either enter a url or a emailaddress.
Skype Icon. The url field should contain vaild 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.
3.13 - Site Settings
RT-Theme 19 Customizer Site & Tagline Settings.
The Site and Tagline settings menu looks like this:
Save and publish the adjusted settings.
Change and set the Site Title.
Change and set the Tag line for the website (the website sub-title).
Note : They only show when no logo is set !
3.14 - Copyrights
RT-Theme 19 Customizer 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 : Valid html and javascripts are NOT allowed. You can use only pure text.
To use html in the copyrights field you can add a filter function to the theme following the instructions in this thread :
In the customizer one can select and set a precreated menu to the theme menu containers. The theme uses two menu containter.
Main navigation
Footer navigation
You can create a menu by using of the wordpress appearance menu system system. Note : You can also attach the menu in there to the theme menu containers.
Menu items are dragged and dropped into the menu containers Try some of the wordpress menu tutorials on youtube.com as they explain all.
Adding custom post types and categories to the menu
If you want to add single custom post types and or categories to the menu and you dont see them then enable them in the screen options below the admin name.
Once enabled you can drag and drop them from the available menu options on the left or (right in rtl websites).
Adding Icons and subtext to the menu
To add icons to a menu items make sure in the in the screen options you have enabled the css classes and the description fields for the menu items (see image).
Once you have these fields visible in the menu item you can
Click in the class field by the mouse. A list of available icons will appear and you can select and set your icon of choice to the menu item.
Add a sub text to the desctiption field to display below the Menu item Label text.
Note : You can also assign a menu to the theme menu containers in the appearance menu system itself at the bottom of each of your custom menu you created in the wordpress menu system.
Note : You can only set one custom menu to one container.
Mobile Navigation.
Note : Be aware that the mobile navigation is different then the one you see in your computer while resizing the browser window.
3.16 - Widgets
RT-Theme 19 Widgets.
The Widgets options menu looks like this:
Use the left arrow to get back to the upper parent settings menu item.
Use the Save and Publish button to save your changes made in the settings.
In the Widgets options you can add widgets to 4 of the default widgets container areas that are created by the theme.
Sidebar for Footer (Column 1)
Sidebar for Footer (Column 2)
Sidebar for Footer (Column 3)
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 rightside 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.
Where do we show our widget containers?
The theme has default Sidebar Container Area’s like “Sidebar for Pages”, “Sidebar for Portfolio”, “Common Sidebar” etc. They show below the menu on the left side. Where the common Sidebar is shown last.
Note : The Common sidebar will show in any page! (even when a sidebar is called by a visual composer widgetized sidebar element).
Note : The sidebars widgets container area’s can also be called in any column in a page using the visual composer and by adding the widgetized sidebar element module.
A page sidebar example.
The Sidebar for pages
The Common Sidebar
Create widgets containers and add widgets to it in the wordpress appearance widgets section.
For creating new widget containers / area’s you need a plugin:
Once you created a new container you can add your widgets by use of the wordpress appearance widgets settings. You can simply drag and drop the widgets into a container you created. Please visit youtube on how that works : Youtube WordPress Widgets tutorials
How To Create a Page with a Sidebar in the content Area?
To create a page with a sidebar you need to :
f.e. create a sidebar container in the widgets area by the use of one of the above plugins. Consult their documentation on how they work.
Drag widgets into the container so the sidebar area has content
Create a page and in the visual composer adjust the content area to a columns layout. f.e. 2.3 and 1.3
In the 2/3 column you insert a text block or whatever content you want to add
in the 1/3 column you insert a widgetized sidebar
3.17 - Static Front Page
RT-Theme 19 Static Front Page
The Static Front Page options menu looks like this:
In here you can set and select a page :
To act as your static homepage. The page where you land on when you visit your website.
To act as you default blog page. Note : The latter is not neccessary to set.
Note : These settings are the same as the wp reading settings. See image below.
In here you can also set and select a page :
To act as your static homepage. The page where you land on when you visit your website.
To act as you default blog page. Note : The latter is not neccessary to set.
Note : You can create any page to act as you home page.
Note : You don’t have to set a static blog page. You can create a page and insert the blog shortcode into the page either by usage of the theme shortcodes or if you work in the visual composer by use of the visual composer elements or modules. How to do this is explained in the How To create a Blog Listing Page
4 - Navigations
4.1 - Navigations
RT-Theme 19 has several menu locations;
Main Navigation: The main menu location for all designs of the theme.
Second Main Navigation: The left-side main menu for only “Layout 4: Centered Logo”
Mobile Navigation: A menu location for 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 next to 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
Go to Appearance ▸ Menus and select a menu that you want to edit.
Use the left panel of the page to add a new navigation item into the menu.
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;
Once you have these fields visible in the menu item you can
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.
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 items make sure in the in the screen options you have enabled the Description.
Select Multi-Column Menu option to split the sub menus into columns.
Mobile Navigation
Be aware that the mobile navigation is different then the one you see in your computer while resizing the browser window. 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 different menu than the main menu only for the mobile screens you can use the “Mobile Navigation” menu location.
4.2 - Multi Column Navigation (Mega Menu)
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 consider as a section title if it has a sub menu. Those multi column menus will be displayed as regular menus in the mobile menu.
Note: Mega menus are only available for Layout 3 and Layout 4.
5 - Side Panel
5.1 - Side Panel
Side Panel is a new feature that comes with version 2.0. It is only available for new design options (Layout 3, Layout 4)
Enable the side panel via Customize > Styling Options > Side Panel
Use Side Panel Navigation menu location to create the menu inside the panel. ( Appearance > Menus )
Go to Appearance > Widgets and add widgets into the Side Panel widget location
6 - Top Bar
6.1 - Top Bar
Top Bar is a new feature that comes with version 2.0. It is only available for new design options (Layout 3, Layout 4)
Go to Appearance > Widgets and add widgets into the Top Bar widget locations.
The top bar will be automatically appeared when you have a widget inside one of the top bar widget locations.
Use only Custom Menu, Text and RT-Social Media Icons widgets inside the top bar and leave blank their title’s.
Customize colors via WP-Admin > Customize > Styling Options > Top Bar
7 - Visual Composer
7.1 - About Visual Composer
RT-Theme 19 comes with a plugin called Visual Composer. The Visual Composer plugin can operate in two modes:
Classic Editor mode. Which is like the normal way WordPress presents its editor (In this “normal editor mode” one has two modes : visual mode and text mode. The latter is what we call html mode)
Backend Editor mode. The visual mode of the visual composer plugin in which you can add elements into a page and drag and drop them around where you want to have them. You can adjust each elements settings by the elements edit button.
Note : You can switch between the classic mode and backend mode without any problems. But be aware that once you start editing the shortcodes in classic mode that you do this correctly as unclosed shortcodes can cause issues in how you page will look in the front of your website.
Visual mode or Backend Mode of the Page
How to get into the visual mode of a page where you insert and drag around elements?
Open the page and switch to visual composer design mode by clicking the blue button with the text Backend Editor.
You will see something like this.
How to get into the classic mode of a page where you insert code like text?
Open the page and switch to visual composer design mode by clicking the blue button with the text Backend Editor.
You will see something like this.
Note : We have disabled some modules in the Visual Composer. They can be enabled by modifying the Visual Composer Settings php file that comes with the theme. The file is called visual_composer_config.php and is located rttheme19/rt-framework/admin/editor folder.
Note : Visual composer rows does not work as fullwidth when used in single product pages. Its by design that they cant work.
7.2 - Visual Composer Add Element
Visual Composer add a Element
In a clean page you have to start with adding a element to your page content. Below are the steps on how todo this:
Click on add element:
Then in the popup window choose f.e. the Rt Blog Post Element.
After Choosing That element a new window will popup with settings you can adjust for the chozen element.
Adjust the settings the way you want you blog list to be and save the settings.
You will return to the visual page mode editor and will see something that looks like this.
Note : After One Elements is added the Editor looks a bit different and you then can add new elements by use of the PLUS Signs.
7.3 - Visual Composer Screen
The Visual Composer Screen.
When you open a page and you have The Visual Composer plugin in visual mode there are a lot of elements and settings one needs to be aware off
The Visual composer Toggle button two switch between the normal wordpress editor and the Visual Composer Editor.
The Add New Element to the row. A dialog window will open in which on can select a new element. After which another dialog appears with all the settings that can be set for the new element.
The Template button. You can save or load a page design as a template by this button. This way you dont have to redesign all elements and its settings again, but you can recall it with one click.
Drag a Row into another place.
Change the Row Columns.
Add a new Column. A dialog window will open in which on can adjust the settings for the new column.
Add a new (different) Element (Module) before the selected. A dialog window will open in which on can select a new element. After which another dialog appears with all the settings that can be set for the new element.
Edit This Column. A dialog window will open with all the settings that can be changed / adjusted.
Delete this Column including all its elements.
Open or close (collapse) this Row.
Edit the settings of this row. A dialog window will open with all the settings that can be changed / adjusted.
Clone the current row into a new one.
Delete the current row and all of its content.
Custom Css Box to add your custom css for this page.
Move the element within the colund and / or row.
Add en new element (module) after the selected one. A dialog window will open in which on can select a new element. After which another dialog appears with all the settings that can be set for the new element.
Edit the selected element (module) settings. A dialog window will open with all the settings that can be changed / adjusted.
Clone / Duplicate the current element (module) within the row or column.
Delete the select element.
The Add New Element to the row. A dialog window will open in which on can select a new element. After which another dialog appears with all the settings that can be set for the new element.
Visual Composer activating creates a white screen of death
Depending on your hosting environment (e.g. shared, VPS, et cetera) and how big your database is, you might experience an issue when trying to access the Customizer. This is usually due to the Customizer timing out because of a memory limit in your server environment. The first thing you can do to remedy this is to enter the following lines in your wp-config.php file at the root of your installation:
define( ‘WP_MEMORY_LIMIT’, ‘128M’ );
Upon entering in this information everything should begin to work as expected unless your hosting provider has a limit on these parameters, which would keep them from taking effect. If your Customizer is still failing to load, the next step would be to open up a support ticket with your hosting provider and ask them to increase your PHP memory limit to a higher setting.
8 - Blog List / Post
8.1 - Creating a Blog
Creating a Blog with RT-Theme 19.
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.
Things you should know
Any Post can have a featured image, a gallery of images, a video file, a audio file. You can visually design the layout of the post and the content by use of the visual composer. This is done by adding, dragging and dropping the available modules into the visual page editor and setting the available options of each module. F.e. A slider module in which you can add the images to be shown in the slider, but also the transition and the timings, the titles and subtitles. Each module you add to the page or post content area has settings to control the behaviour of the module in the page.
Upload a featured image by clicking the “Set featured image” link under the “Featured Image” box.
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.
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.
RT-Theme Post Format Options
There are six post format available to select at the “Post Format” options :
Standard : The attached featured image is shown,
Gallery : Display Image(s) as gallery or slider,
Link : Tell something about a subject of choice and add a (outside) link to the post,
Video : Show and Play a Video,
Audio : Show and Play a Audio file,
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.
8.2 - Creating a Blog Listing page
Setting a Blog Listing Page in RT-Theme 19.
The RT-Theme 19 is a very porwerfull theme. One can set a static blog page, or one can create a page with a blog list module (and of course other modules).
1) Setting a Blog Listing Page with a static blog page.
This is easy.
Go to the wordpress pages sections and create a page called f.e. Blog.
Goto the wordpress Reading Settings and set that page as your blog page.
View the page and if all done correctly you will see this:
2) Creating A Page as your Blog Listing Page using the visual composer.
Any page can be set as your Blog Listing Page. You can create multiple Blog Listing Pages each showing a list of posts from different categories by the use of the visual composer and the blog list element.
This is more advanced and has different and more steps then the static blog listing page.
Create a page called blog.
Open the page and switch to visual composer design mode.
You will see something like this.
Click on add element:
Then in the popup window choose the Rt Blog Post Element.
After Choosing That element a new window will popup with settings you can adjust for the chozen element.
Adjust the settings the way you want you blog list to be and save the settings.
You will return to the visual page mode editor and will see something that looks like this.
Now Publish the page, add the page to your menu and view the result in the front of your website. It will look exactly as you designed it.
The result will be like this:
3) Creating a Page as a Blog Listing Page using the RT Blog Shortcode.
Any page can be set as your Blog Listing Page. You can create multiple Blog Listing Pages each showing a list of posts from different categories by the use of the RT-Theme 19 blog list shortcode.
This is a little bit more advanced and has different and more steps then the static blog listing page.
Create a page called blog.
Now instead of switching to the visual composer just click on the shortcodes button.
A Window wil popup with the available shortcodes and you need to select the blog shortcode
Note : There are more parameters to adjust then you can see in the above image.
Adjust the settings in the blog shortcode popup window and copy and paste the shortcode into the page (adjust the shortcode to you need following the explainative text in the shortcode dialog popup). It will more or less look like this after inserting the code.
Note : You can still manually adjust the settings for the shortcode in the texteditor.
Now Publish the page, add the page to your menu and view the result in the front of your website. It will look exactly as you designed it.
The result will be like this:
8.3 - Creating a Single Blog Post
Creating a Blog Post.
Creating a Blog Post is actually a straigh forward process.
In the wordpress Admin Area goto the Post area
Either click on Add New in the Menu or the Add New in the top of the Post List
The Single Post Screen
The Single Post Screen has a lot of options.
The Title of the Blog Post
The Content of the Blog Post
The Post format.
Standard : The attached featured image is shown,
Gallery : Display Image(s) as gallery or slider,
Link : Tell something about a subject of choice and add a (outside) link to the post,
Video : Show and Play a Video,
Audio : Show and Play a Audio file,
Aside : The Post item is listed in the blog list but cannot be opened in a single post.
Customize the Default feature image size and cropping settings
If you have enabled the use of excerpts in the customizer then this is where the excerpt or teaser should be added. If you dont see the excerpt editor then enable it in the screen options below the admin name while in the page/post item.
Add a featured image to the post.
Add more images to the post to display as a gallery.
Add tags to the post items. Note : Tags can have seo when the wordpress seo plugin is used.
Categorize the post item. Note : Categories can have seo when the wordpress seo plugin is used.
Publish the post. Make the post visible in the front of your website.
Save the post as draft or preview the post.
Adjust the Status, Visibility, Publish date of the post
In the screen options you can hide or show one or more elements in the single post admin area.
Design Options
In the customizer the settings can be set globally for all the theme elements in pages and posts. In Rt-Theme 19 the ability has been added to alter these global settings for a individual page or post. Each page or post has a section called “Design Options” with a lot of settings that can be changed for that page or post only. It gives one the ability to have a completely different look for one page or post as you can alter the background image for the body, left menu area or right side content area, a background color etc.
To create a portfolio you need to have portfolio items. Those can be grouped by categories and then presented that way in a overview page (a portfolio listing page).
Things you should know
If you want to show a list of portfolio items in a page you need to add either a portfolio post shortcode or a portfolio post element in the visual composer
You can create as many Portfolio listing pages as you want each using its own shortcode or visual composer portfolio element
The settings in the shortcode or visual composer element determin how the portfolio items are listed
You can attach a portfolio item to more then one category. A portfolio item needs to have at least one category.
Opening or calling a Portfolio category will list all portfolio items attached to that category following the default theme portfolio settings
Categories can be added to the default WordPress menu system
A Portfolio item can have more then one image attached to it. Default the attached images will be shown in a slider. It can be changed to type gallery in which case a image gallery is shown.
Upload a featured image by clicking the “Set featured image” link under the “Featured Image” box.
A similar way the Gallery images can be attached to the product by pressing the “Add New Images” link/button in the Product Image Gallery box.
The “Portfolio Item” has options added that apply only to that custom post type.
Note : These options change if you change the portfolio format (image, video or audio).
9.2 - Creating a Portfolio Item
Creating a Portfolio Item.
Creating a Portfolio Item is actually a straigh forward process. Use the “Portfolio” Custom Post Types to add your Portfolio Items.
In the wordpress Admin Area goto the Portfolio Post area
Either click on Add New in the Menu or the Add New in the top of the Post List
Things you should know
You can attach a portfolio item to more then one category. A portfolio item needs to have at least one category.
Categories can be added to the default WordPress menu system
A Portfolio item can have more then one image attached to it. Default the attached images will be shown in a slider. It can be changed to type gallery in which case a image gallery is shown.
Upload a featured image by clicking the “Set featured image” link under the “Featured Image” box.
A similar way the Gallery images can be attached to the product by pressing the “Add New Images” link/button in the Product Image Gallery box.
The added images can be shown as a gallery or as a slider. See portfolio options in the item.
Linking and lightbox ability of titles and images can be turnd off per item.
The “Portfolio Item” has options added that apply only to that custom post type.
Note : These options change if you change the portfolio format (image, video or audio).
The Global Theme design options like backgrounds and background colors for body, left or right side area of the theme can be altered in each single product page.
The Single Portfolio Item
The Single Portfolio item has a lot of options.
The Title of the Portfolio Item
The Content of the Portfolio Post
The Portfolio Options
Set it as Image, Video or Audio type
Hide the feature image in the single portfolio item
Display the Image, Video or Audio in a fullwidth row in the single item
Short description. The description that will show in the portfolio listing pages
Remove all the Links from the portfolio item in portfolio listing pages
Disable the lightbox popup of the image in the portfolio listing pages
External link. Have the portfolio item link externally in listing pages
Adjust the feature image settings, Height, width Cropping.
The Portfolio featured image for listing pages.
Add more images to the product to display them as a gallery.
Categorize the Portfolio Item:
Note : Categories can have seo when the wordpress seo plugin is used.
Note : A Portfolio item needs to have one category.
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.
Switch to visual composer mode to add visual composer elements or classic mode and add shortcodes or text to the portfolio item the normal wordpress way.
The Screen options. Enable / disable what you want to have visible in this custom posttype.
The Single Portfolio Type Image
In the portfolio type image these settings are available
Display the attached images as Slideshow or Image gallery
Cropping for Gallery images
Maximun height for the Images
The Single Portfolio Type Video
In the portfolio type video these settings are available
Url to a (self hosted) MP4 file
Url to a (self hosted) WEBM file
Url to a Vimeo or Youtube video
The Single Portfolio Type Audio
In the portfolio type video these settings are available
Url to a (self hosted) MP3 file
Url to a (self hosted) OGG file
Once all settings and content is added to the portfolio item you can publish the post and it will become visible in the portfolio list you created in a page either by adding the portfolio posts shortcode or visual composer portfolio posts element to that page at the location where you want the portfolio list to appear.
Design Options
In the customizer the settings can be set globally for all the theme elements in pages and posts. In Rt-Theme 19 the ability has been added to alter these global settings for a individual page or post. Each page or post has a section called “Design Options” with a lot of settings that can be changed for that page or post only. It gives one the ability to have a completely different look for one page or post as you can alter the background image for the body, left menu area or right side content area, a background color etc.
Setting up a portfolio listing page is pretty straigth forward.
Create your product(s)
Create a page
Insert the products posts shortcode or use the visual composer and add a products showcase element
2) Creating A Portfolio Page.
3) Inserting a Portfolio Post Element (visual composer).
Click on the add element (the + sign) in the visual composer and add a portfolio post module / element.
After select and inserting the element a popup window appear with all the available settings for that element.
Adjust the settings in that popup window (You can always later edit them if you dont like the result).
Note : Be aware that those visual composer settings popup screen have more then one tab with settings you can adjust. After adjusting the settings click the save changes button in the popup window and you will see something like this.
Adjust the settings in that popup window (you can always later edit them if you dont like the result).
Note : Be aware that those visual composer settings popup screen have more then one tab with settings you can adjust. After adjusting the settings click the save changes button in the popup window and you will see something like this.
3) Inserting a Portfolio by shortcode.
Click on the shortcode button in the admin bar or on the > icon above the editor and in the popup window select the Portfolio Shortcode, adjust the code to your need and copy and paste the shortcode into your page content at the location where you want this showcase to appear.
Note : There are more parameters and options then visible in the screenshot above.
The Shortcode button
The Portfolio Post shortcode
The Shortcode example. Adjust the shortcode and copy and paste the shortcode into the page body content and adjust the parameters.
The parameter options are explained in here. You can adjust those in the shortcode in step 3.
Note : The shortcode in the page could look like this.
Adjust the Page Design Options
Now you can adjust the Design options in that page if you want the page to have special or different design that is different from the default settings in the customizer. In the customizer the settings can be set globally for all the theme elements in pages and posts. In Rt-Theme 19 the ability has been added to alter these global settings for a individual page or post. Each page or post has a section called “Design Options” with a lot of settings that can be changed for that page or post only. It gives one the ability to have a completely different look for one page or post as you can alter the background image for the body, left menu area or right side content area, a background color etc.
Once you are done customizing the page you can publish it and view the result of that page in the front of yourwebsite. It might be looking like this.
Note : It all depends on your design and the elements you added into the page.
10 - Products List / Post
10.1 - Creating a Products Showcase
Creating a Products Showcase
To create a product showcase you need to have products. Those can be grouped by categories and then presented that way on an overview page (a products showcase).
Things you should know
A product can have a featured image and multiple other images attached to show as a product image gallery.
The Global set product layout can be changed in a single product item to give that item a different look.
A Product 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.
A similar way the Gallery images can be attached to the product by pressing the “Add New Images” link/button in the Product Image Gallery box.
The RT-Theme 19 “Product” has options added that apply only to that custom post type.
Product Information: SKU or article number, Price, Sale price, Short description.
4 Free Tabs. Each can have its own title, icon, and valid HTML text or shortcodes, or even contact form.
Related Products. You can select any number of related products and attach them to the single product
Attached Documents. You can add documents, spreadsheets, PDFs, manuals, etc to a single product.
10.2 - Products Listing Page
Setting up a Products Listing Page
Setting up a product listing page is pretty straigth forward.
Create your product(s)
Create a page
Insert the products posts shortcode or use the visual composer and add a products showcase element
2) Creating A Products Showcase Page.
3) Inserting a Products Showcase Element (visual composer).
Click on the add element (the + sign) in the visual composer and add a product showcase module / element.
After select and inserting the element a popup window appear with all the available settings for that element.
Adjust the settings in that popup window (you can always later edit them if you dont like the result).
Note : Be aware that those visual composer settings popup screen have more then one tab with settings you can adjust. After adjusting the settings click the save changes button in the popup window and you will see something like this.
3) Inserting a Products Showcase by shortcode.
Click on the shortcode button in the admin bar in the popup window select the Products Post Shortcode, adjust the code to your need and copy and paste the shortcode into your page content at the location where you want this showcase to appear.
Note : There are more parameters and options then visible in the screenshot above.
The Shortcode button
The Product post (showcase) shortcode
The Shortcode example. Adjust the shortcode and copy and paste the shortcode into the page body content and adjust the parameters.
The parameter options are explained in here. You can adjust those in the shortcode in step 3.
Note : The shortcode in the page could look like this.
Adjust the Page Design Options
Now you can adjust the Design options in that page if you want the page to have special or different design that is different from the default settings in the customizer. In the customizer the settings can be set globally for all the theme elements in pages and posts. In Rt-Theme 19 the ability has been added to alter these global settings for a individual page or post. Each page or post has a section called “Design Options” with a lot of settings that can be changed for that page or post only. It gives one the ability to have a completely different look for one page or post as you can alter the background image for the body, left menu area or right side content area, a background color etc.
Once you are done customizing the page you can publish it and view the result of that page in the front of yourwebsite. It might be looking like this.
Note : It all depends on your design and the elements you added into the page.
10.3 - Creating a Product Item
Creating a Product Item.
Creating a Product Item is actually a straigh forward process. Use the “Products Showcase” Custom Post Types to add your Products.
In the wordpress Admin Area goto the Post area
Either click on Add New in the Menu or the Add New in the top of the Post List
Things you should be aware of using Products
Make sure that all your products has been assigned at least a product category.
A Product can have more then one Gallery image attached to it. The moment more then one (1) image is added to the product they will be shown as a gallery in the single product page.
A Product can have a Short description. The short description will be shown in :
The Single Product page on the right side of the product image or slider below the product price.
The Product Listing Pages
Product Category Listing Pages
You can select and add products to be listed as related products to any product. They will appear below the single product content or in a tab when tabbed layout is activated.
To each product multiple attachments can be added. Per attachment one can set :
The Title or Filename,
The Url to the attachment,
The Target.
Products can have a normal layout, Tabbed layout Accordion. Each product can have one to four tabs with any information of choice. They are called Free Tabs. The moment one or more Free Tabs are used the complete single product page changes to a tabbed layout.
The normal product information content goes into a tab called “General Details”
The Attachments go into a tab called “Attachments”
The Related Products go into a Tab called “Related Products”
The Comments go into a tab called “Comments”
The Free Tabs of which each one is shown with its own title and (valid html) content.
Note : The titles of the default product tabs (not the free tabs) can be changed by the use of the default language file that comes with the theme.
The Global Theme design options like backgrounds and background colors for body, left or right side area of the theme can be altered in each single product page.
The Single Product Item
The Single Products Screen has a lot of options.
The Title of the Product
The Content of the Product Post
The Product Information
SKU, Price, Short Description
1-4 Free Tabs each with its own Title, Icon and Information,
A list of related products
A number of attached Documents
The Short description is listed in the product listing pages and in the single products page besides the product image(s)
The Products featured image for listing pages.
Add more images to the product to display them as a gallery.
The Single product layout. Normal layout, Tabbed or Accordion layout.
Note : Normal layout is when no tabs are entered with data.
Categorize the product.
Note : Categories can have seo when the wordpress seo plugin is used.
Note : A product needs to have one category.
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.
Switch to visual composer mode to add visual composer elements or classic mode and add shortcodes or text to the product the normal wordpress way.
Free Tabs
In each of the products free tabs the following information can be set:
The Tab Title.
The tab Icon. To pick a icon click with your mouse into the icon field input area.
The Tab conten or text. Any valid html or shortcodes are allowed
Related Products
Note : There has to be one product or more in order to select and set or add one or more related products to a product item.
Once all settings and content is added to the product you can publish the post and it will become visible in the product list you created in a page either by adding the product posts shortcode or visual composer products showcase element to that page at the location where you want the products list to appear.
Design Options
In the customizer the settings can be set globally for all the theme elements in pages and posts. In Rt-Theme 19 the ability has been added to alter these global settings for a individual page or post. Each page or post has a section called “Design Options” with a lot of settings that can be changed for that page or post only. It gives one the ability to have a completely different look for one page or post as you can alter the background image for the body, left menu area or right side content area, a background color etc.
Note : Visual composer rows do not work as fullwidth when used in single product pages. Its by design that they cant work and we disabled that ability.
11 - Team List / Post
11.1 - Creating a Team
Creating a team with RT-Theme 19.
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).
Things you should know
Team Staff Members don’t have categories.
Calling a Team / Staff members has do be done by it's 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 :
A Title – Position
A Short info box for the listing pages. A small excerpt.
40+ links to social pages all supported with a icon
A complete “story” about the person into the body content of the members item post. Any valid html, shortcode is allowed but also a complete design by visual composer elements
11.2 - Creating a Team Listing Page
Setting up a Team Member listing page is pretty straigth forward.
Create your product(s)
Create a page
Insert the products posts shortcode or use the visual composer and add a products showcase element
2) Creating A Team members Page.
3) Inserting a Team Element (visual composer).
Click on the add element (the + sign) in the visual composer and add a Team module / element.
After select and inserting the element a popup window appear with all the available settings for that element.
Adjust the settings in that popup window (you can always later edit them if you dont like the result).
Note : Be aware that those visual composer settings popup screens can have more then one tab with settings you can adjust. After adjusting the settings click the save changes button in the popup window and you will see something like this.
3) Inserting Team Members by shortcode.
Click on the shortcode button in the admin bar in the popup window select the Team Shortcode, adjust the code to your need and copy and paste the shortcode into your page content at the location where you want this showcase to appear.
Note : There are more parameters and options then visible in the screenshot above.
The Shortcode button
The Team / Staff Posts shortcode
The Shortcode example. Adjust the shortcode and copy and paste the shortcode into the page body content and adjust the parameters.
The parameter options are explained in here. You can adjust those in the shortcode in step 3.
Note : The shortcode in the page could look like this.
Adjust the Page Design Options
Now you can adjust the Design options in that page if you want the page to have special or different design that is different from the default settings in the customizer. In the customizer the settings can be set globally for all the theme elements in pages and posts. In Rt-Theme 19 the ability has been added to alter these global settings for a individual page or post. Each page or post has a section called “Design Options” with a lot of settings that can be changed for that page or post only. It gives one the ability to have a completely different look for one page or post as you can alter the background image for the body, left menu area or right side content area, a background color etc.
Once you are done customizing the page you can publish it and view the result of that page in the front of yourwebsite. It might be looking like this.
Note : It all depends on your design and the elements you added into the page.
11.3 - Creating a Team Member
Creating a Team Member.
Creating a Team Member is actually a straigh forward process. Use the “Team” Custom Post Type to add your Members.
In the wordpress Admin Area goto the member Post area
Either click on Add New Member in the Menu or the Add New Member in the top of the Post List
Things you should know
Team Staff Members don’t have categories.
Calling a Team / Staff members has do be done by it's 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 :
A Title – Position
A Short info box for the listing pages. A small excerpt.
40+ links to social pages all supported with a icon
A complete “story” about the person into the body content of the members item post. Any valid html, shortcode is 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.
The Title (Name) of the Team Member
The Content of the Team Member. The story you want to tell. This info will show in the single team members page.
The Position. His Job title.
The short info for listing pages
The social icons you want to attach to this team member.
Note : Not all are shown (50+)
Note : Two icons deserve extra attention.
Email Icon. You can either enter a url or a emailaddress.
Skype Icon. The url field should contain vaild skype formatting. Enter a skype address. Syntax : ‘skype:skypeid?call’ or ‘skype:phonenumber?call
Attach a featured image of your team member. How does he look like.
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.
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.
The Screen options. Enable / disable what you want to have visible in this custom posttype.
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.
Design Options
In the customizer the settings can be set globally for all the theme elements in pages and posts. In Rt-Theme 19 the ability has been added to alter these global settings for a individual page or post. Each page or post has a section called “Design Options” with a lot of settings that can be changed for that page or post only. It gives one the ability to have a completely different look for one page or post as you can alter the background image for the body, left menu area or right side content area, a background color etc.
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 a overview page (a testimonials listing or “What people say about us” page).
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 it’s id or category
the testimonial text allows valid HTML code (h-tags, a-tags, divs), but we advice to keep the formatting as simple as possible.
For each Testimonial Item one can add :
Name of the person who wrote the Testimonial
Job title of the person who wrote the Testimonial
URL to that persons website or social page
Text for the URL
Upload a featured image by clicking the “Set featured image” link under the “Featured Image” box.
12.2 - Creating Testimonials
Creating Testimonials with RT-Theme 19.
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 a overview page (a testimonials listing or “What people say about us” page).
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 it's id or category
the testimonial text allows valid HTML code (h-tags, a-tags, divs), but we advice to keep the formatting as simple as possible.
For each Testimonial Item one can add :
A Name of the person who wrote the Testimonial
A Jobtitle of the person who wrote the Testimonial
A (valid) URL to that persons website or social page
A Text for the url
Upload a featured image by clicking the “Set featured image” link under the “Featured Image” box.
12.3 - Creating a Testimonials Page
Setting up a Testimonials page is pretty straigth forward.
Create your product(s)
Create a page
Insert the products posts shortcode or use the visual composer and add a products showcase element
2) Creating A Team members Page.
3) Inserting a Testimonials Element (visual composer)
Click on the add element (the + sign) in the visual composer and add a Team module / element.
After select and inserting the element a popup window appear with all the available settings for that element.
Adjust the settings in that popup window (you can always later edit them if you dont like the result).
Note : Be aware that those visual composer settings popup screens can have more then one tab with settings you can adjust. After adjusting the settings click the save changes button in the popup window and you will see something like this.
3) Inserting Testimonials by shortcode.
Click on the shortcode button in the admin bar in the popup window select the Testimonials Shortcode, adjust the code to your need and copy and paste the shortcode into your page content at the location where you want this showcase to appear.
Note : There are more parameters and options then visible in the screenshot above.
The Shortcode button
The Testimonials Posts shortcode
The Shortcode example. Adjust the shortcode and copy and paste the shortcode into the page body content and adjust the parameters.
The parameter options are explained in here. You can adjust those in the shortcode in step 3.
Note : The shortcode in the page could look like this.
Adjust the Page Design Options
Now you can adjust the Design options in that page if you want the page to have special or different design that is different from the default settings in the customizer. In the customizer the settings can be set globally for all the theme elements in pages and posts. In Rt-Theme 19 the ability has been added to alter these global settings for a individual page or post. Each page or post has a section called “Design Options” with a lot of settings that can be changed for that page or post only. It gives one the ability to have a completely different look for one page or post as you can alter the background image for the body, left menu area or right side content area, a background color etc.
Once you are done customizing the page you can publish it and view the result of that page in the front of yourwebsite. It might be looking like this.
Note : It all depends on your design and the elements you added into the page.
12.4 - Creating a Testimonial
Creating a Testimonial
Creating a Testimonial is a pretty straigh forward process. Use the “Testimonials” Custom Post Type to add your Testimonials.
In the wordpress Admin Area goto the Testimonials Post area
Either click on Add New in the Menu or the Add New in the top of the Post List
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 it's id or category
the testimonial text allows valid HTML code (h-tags, a-tags, divs), but we advice to keep the formatting as simple as possible.
For each Testimonial Item one can add :
A Name of the person who wrote the Testimonial
A Jobtitle of the person who wrote the Testimonial
A (valid) URL to that persons website or social page
A Text for the url
Upload a featured image by clicking the “Set featured image” link under the “Featured Image” box.
The Single Testimonials Item
The Single Team Member item has not so much options as the other post types.
The Title (Name) of the Testimonial
The Testimonial Text
Clients Name
The Clients Job Title
The Clients Link Text (optional)
The Clients Link Url (optional)
The Client image or logo
The Testimonial category to group them
Publish the post. Make the post visible in the front of your website. Or change its date, visibility, set it draft.
The Screen options. Enable / disable what you want to have visible in this custom posttype.
Once all settings and content is 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 testimonials list to appear.
Note : Testimonials since they don’t have a single post view mode do not have design options.
13 - Individual Design Options
13.1 - Individual Design Options
Page / Post Design Options
In the customizer the settings can be set globally for all the theme elements in pages and posts. In Rt-Theme 19 the ability has been added to alter these global settings for a individual page or post. Each page or post has a section called “Design Options” with a lot of settings that can be changed for that page or post only. It gives one the ability to have a completely different look for one page or post as you can alter the background image for the body, left menu area or right side content area, a background color etc.
Design Options
The image below shows what you can find in the Design options :
Set the width for the header-area. Full width or content width.
Set the sidebar layout, as set default in the customizer, left, right or none
Set the width for the header-area. Full width or content width.
Note : In the visual composer the row woidth setting overrides this setting.
Alter the hiding of page title and breadcrumbs for this page/post item.
Alter the default header bar width settings for this post for this page/post item.
Alter the default Header background color image settings for this page/post item.
Alter the default breadcrumbs color settings for this post for this page/post item.
Alter the default body background color settings or image for this page/post item.
Alter the default left side background color settings or image and top padding for this page/post item.
Alter the default right side background color settings or image and top padding for this page/post item.
Alter the default Footer background width settings for this page/post item.
Alter the default Footer content width settings for this page/post item.
Note : As you can see a page / post item has a huge number of settings which allow you to control how that page or post item will look in the front of your website. Not many themes have such a amount of settings that can be altered in a page or post item.
14 - Google Maps
14.1 - Google Maps
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.
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
15 - Miscellaneous
15.1 - Special Class Names
RT-19 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.
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
15.2 - Creating a One Page Design
Creating a one page design needs the following elements
Visual composer rows that have a ID set (see image below).
A Custom Menu item type link that links to that element / ID (see image below).
Important Notes !!!
Note : Be aware to use the full url (http://yourwebsite.com/#the-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.
Note : You have to use the # (anchor link method) to link to those sections / rows within a page.
Note : When you scroll the page the menu items in the menu will get the focus state once a new section with the ID listed in the menu is reached. Of course, to notice this nice RT-Theme feature, the current menu item color setting has to be not the same as the normal menu item color. You can see it in action in our demo while scrolling the page : One Page Design Demo
15.3 - Creating a Contact Page
Creating a Contact Page.
Setting up a contact page is pretty straigth forward.
Goto the WordPress Pages section and add a new page
In the page goto visual composer mode and start adding the elements that you want to show in your contact page
Below is a example of a contact page content visualized as elements in the visual composer. The screenshot is taken from the demo content and is avialble in the demo content package that comes with the theme packaged downloaded from themeforest.
As you can see the elements added are :
Google Maps Elements
Rows set to column layout
Headings
Listed Items with icons that sum up a location, phone, email
A Contactform
15.4 - WordPress Widgets
WordPress Widgets and RT-Theme 19.
Widgets are predefined pieces of code which produce f.e. a recent post list with thumbnails, a searchbox or whatever the widget is designed for in a sidebar.
Widgets and Sidebars.
WordPress has widgets and sidebars. Widgets need to be added to sidebars. Sidebars are area's, containers, that contain widgets. Once a widget is in a sidebar container then when that sidebar is called within a page by the visual composer widgetized sidebar element the widget will show what it is designed for at that location in that sidebar at the location where the widgetized sidebar area is inserted into the page.
WordPress has a number of default widgets and the RT-Theme 19 also comes with a number of preset widgets. Any of those widgets can be dragged into any sidebar container / location / area of your choice. Each widget can have none or one or more settings which needs to be set in order to have the widget show the result you are looking for.
Note : The more plugins you add to the wordpress system the more widgets become available.
Note : Not all will work within the theme as there can be conflicts because of (adjusted or older used versions) javascript or css classes used by the plugin developer. If this happens the plugin developer will point to the theme author and vice versa. This we can not support or help. It is simply not possible to have a premium theme, which already has loads of extra features and abilities, to have it support the more then 500.000 available plugins which there are on the market. Most of them are not even supported anymore by its developer and have become obsolete. Please check the wordpress version a plugin requires before adding this to your wordpress environment as it can damage your install.
Note : A special widget is the text widget. It can contain theme shortcodes and any valid html code or even scripts. Keep in mind that adding html or scripts can have influence on the floating sidebar script the theme uses. It might require that you will have to turn off the floating sidebar ability. We can not help this or solve this issue. It is a result of your own content added.
WordPress Widgets : how to add them?
Go to Appearance Widgets.
Choose a Widget click on it and choose a sidebar container / location to add it to or drag it to the sidebar location where you wish it to appear.
There are default sidebars that are created by the theme. If you need more you have to create those by a plugin.
To arrange the Widgets within the sidebar, click drag and drop them into its place. You can even move them to another sidebar container area.
To customize the Widget features, click the down arrow in the upper right corner of the widget to expand the Widget's settings / options interface and adjust its settings (if available).
To save the Widget's settings / options click Save button below the widget. Do not forget this.
To remove the Widget, click the Delete link below the widget and confirm the removal.
Q : How can I add a list of menu links into a sidebar by a widget?
A : Create a custom menu and use the wordpress custom menu widget (see steps below)
Goto the wordpress Menus system and create a custom menu container. Add your menu-items to that menu container as explained in the how to Creating Navigation Menus section here in the setup assistant.
Save the menu but do not assign it to a theme menu location.
Go to Appearance → Widgets section
Click on the wordpress custom menu and add it to the sidebar container of your choice.
In the sidebar open the wordpress custom menu widget settings and select the custom menu you have just created. Save the settings !
Go to the template builder and add that sidebar to a template at the location you want the sidebar with that widget to appear
Note : If you add the widget to the common sidebar that widget will appear in every page which has been set to a sidebar layout
Note : If you add the widget to any of the default sidebars the theme uses, then when a left or right sidebar layout is set that widget will appear in those pages/post/products/categories/portfolios that uses that sidebar area by default.
Where do we show our widget containers?
The theme has default Sidebar Container Area’s like “Sidebar for Pages”, “Sidebar for Portfolio”, “Common Sidebar” etc. They show below the menu on the left side. Where the common Sidebar is shown last.
Note : The Common sidebar will show in any page! (even when a sidebar is called by a visual composer widgetized sidebar element).
Note : The sidebars widgets container area’s can also be called in any column in a page using the visual composer and by adding the widgetized sidebar element module.
Create a sidebar in the page content for the vertical theme layout.
Add a row and set it to a column layout
Add the normal text content to a column
Add a Widgetised Sidebar to a column
RT-Theme 19 predefined widgets.
The theme comes with 7 predefined widgets:
[RT-Theme 19] Contact Info widget
[RT-Theme 19] Flickr widget
[RT-Theme 19] Popular Posts widget
[RT-Theme 19] Recent Posts widget
[RT-Theme 19] Portfolio Categories
[RT-Theme 19] Products Categories
[RT-Theme 19] Social media
Note : For all other predefined abilities one has to use a default WordPress Text-widget and insert one of the many available RT-Theme 19 shortcodes into the Text-widget text-area. See more on shortcodes in the setup assistant “RT-Theme 19 Shortcodes & Icons” section
15.5 - RT-Theme 19 Shortcodes
Adding Shortcodes in to Content
RT-Theme 19 comes with a huge number of shortcodes that allow you to add predesigned content by shortcodes into the content area of any page. Shortcodes can also be added into text widget in a sidebar or into any text-area in any of the available modules in the template builder. When you insert a shortcode into a text-area you might be seeying something like this :
ERROR: This shortcode does not contain an email attribute!
Because it is not html code it looks a bit ackward. The shortcode gets processed once the page is viewed in the front of your website. In this example a contact form is shown 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 :
Above the editor text-area by clicking clicking on a button which looks like this : [</>].
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:
Shortcodes Explained
When you click on the shortcodes button a popup screen will appear with the following information :
A list of available shortcodes
One section, on the left explaining the shortcode and its parameters,
One section on the right showing a already pregenerated 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.
Each of the parameters and its options. This list can be very long depending on the shortcode chozen
The already pregenerated shortcode in the top right of that window can be altered by following the explaination on the left. It is wise to adjust the variables while having that window open before hitting the shortcode insert button (see also below the icon insert help text).
The moment you copy the shortcode and close the shortcode screen you need to paste it in to a textarea at the location where you want the shortcode to be executed.
Note : You can always view the shortcodes in the popup window by clicking </> Shortcodes menu item in the WordPress Admin Bar.
Note : We do not explain every shortcode in the documentation since the shortcodes explaines it’s options by itself in the shortcode generator.
Note : Each shortcode is also available as a visual composer. The options are then available in the element settings and can be edited and resave unlimited times. This is much easier then the shortcode generator text insert method.
15.6 - Theme Icons
Scalable Vector Icons
RT-Theme 19 supports scalable vector icons. Those icons are called by its css class name. In some shortcodes you will see a parameter like this : icon=””. Between these quotes “” you will have to insert the icon css class name.
In order to get the correct icon name, and to have a idea about how the icon looks before inserting,
there is a button (actually a menu item) on the WordPress Admin Bar that looks like a little rocket with the text “Icons” on the right side of that “rocket” icon.
When you click on that “Rocket-Icon” button (menu-item) in the WordPress Admin Bar you get a preview list of all available icons. You can narrow the list by using the search ability of that box. Once the icon of your choice has been found then you need to select the icon css class name and copy its css class name and paste that name between the quotes of the icon=”” parameter in the shortcode. So you get something like this: icon=”icon-rocket” as part of the complete shortcode.
Can i add my own Icons?
As you know, RT-Theme 19 has a nice icon feature and those icons are font based. I’ve hand-picked those icons and downloaded from a free service called http://fontello.com
By using this awesome service you can create your own icon set and use with RT-Theme 19. So, please follow these steps to get it done it in a right way;
1) Create a child theme first ( highly recommended ) Create a child-theme
2) Go to the website, and click the Import button
3) Select the “config.json” file where you can find inside /rttheme19/css/fontello/”
4) After imported the file, you’ll notice that some of the icons are highlighted. You can add more icons by clicking the other icons or add your own “SVG” files by using the “Custom Icons” bar of the website.
5) When you ready, download the generated package and export into your computer and upload the “fontello” folder into the /css/ folder of your child theme (create the /css/ folder if you don’t have one )
That’s it. After refreshed your admin panel, you should see the new icons.
15.7 - Social Icons
Adding Social information to your website
Social information can be added to the theme by the use of the global Social Media Options in the Customizer.
Per Social Media Icon the following options can be set :
The Social Icon Text which appears on hover,
The Social Icon Link to which the social icon will link when clicked upon,
The Social Icon Link Target. To be set to if the Icon should open the link a new browser tab (same window or new window)
You can make the (social media) icons appear in the top of the page and in the footer by turning on the 'position' toggles in the RT-Theme 18 Social media Settings.
You can also have the icons show anywhere in your website by inserting social icon shortcode anywhere in the content text-area's
Note : A valid URL to the Icon desitination has to be entered.
Note : For an email social icon one can either add a valid email address or a link (URL) to a contact page.
Note : For the Skype Icon the url field should contain vaild skype formatting. Enter a skype address. Syntax : ‘skype:skypeid?call’ or ‘skype:phonenumber?call
15.8 - Footer Content
Creating a Footer Navigation & setting the Footer Options
RT-Theme 19 Footer area is divided into three sections.
The Footer Area containing the footer Widgets
The Footer Bottom Area containing the copyrights
The Footer Bottom Area containing the footer custom menu
How can I create a footer navigation?
Goto the wordpress Menus system and create a custom menu container or use the default Footer Navigation container. Add your menu-items to that menu container as explained in the miscellaneous “Navigation Menus” section here in the documentation.
Save the menu and assign it to a theme menu footer location.
View your website. If all done correctly it will show the menu in the footer area
RT-Theme 19 Copyrights
The copyright can be set in the customizer Copyrights settings. See customizer documentation.
RT-Theme 19 Footer Widgets
The RT-Theme 19 footer Widgets can be found in the Customizer or in the wordpress -> appearance -> widgets section. The working of the widgets is explained here in the customizer documentation
RT-Theme 19 Footer Widgets
Any widgets added in the available footer widget containers will show in the theme footer area columns in the front of your website.
for advanced users : By using a plugin from wordpress.org which adds widget logic to your widgets you can make widgets in the footer area appear or disappear on a page id basis.
15.9 - Custom fields in search results
Search results and custom fields
By default wordpress has no knowledge of the custom fields in each of the custom post types. So if you issue a search it wont find any text you entered in those fields. You need to enable those fields by use of a plugin to include them into the search results. You can download those plugins from https://wordpress.org
One can decide to update the plugin either by the internal update function that comes with the theme or by manual upload and replacing all files by ftp upload:
Internal Update by the theme installer plugin
If a plugin needs updating you will see a update notification message.
You can click on the “begin updating plugins” link or go directly to the update screen by the admin appearance menu “install plugins” option.
In both cases you will get to the update screen where you can select and update the plugins all at once or one by one.
Update plugins one by one
Select the plugins and Update plugins all at once
Manual Update by FTP
Follow these steps to update the plugin.
1) Unzip the download package from Themeforest and within that package the rttheme19.zip on to your local harddive of your computer
2) Find the Revolution slider zip file that comes with your theme. You can find the latest version of the plugin inside the /rttheme19/rt-framework/plugins/packages/ folder as revslider.zip
3) Upload it by ftp replacing the revslider folder in the wp-content/plugins folder in your website.
Note : It is always wise to create a complete backup before updating anything (including the database).
15.11 - Update Visual Composer
How to Update the Visual Composer Plugin?
One can decide to update the plugin either by the internal update function that comes with the theme or by manual upload and replacing all files by ftp upload:
Internal Update by the theme installer plugin
If a plugin needs updating you will see a update notification message.
You can click on the “begin updating plugins” link or go directly to the update screen by the admin appearance menu “install plugins” option.
In both cases you will get to the update screen where you can select and update the plugins all at once or one by one.
Update plugins one by one
Select the plugins and Update plugins all at once
Manual Update by FTP
Follow these steps to update the plugin.
1) Unzip the download package from Themeforest and within that package the rttheme19.zip on to your local harddive of your computer
2) Find the Visual Composer zip file that comes with your theme. You can find the latest version of the plugin inside the /rttheme19/rt-framework/plugins/packages/ folder as js_composer.zip
3) Upload it by ftp replacing the js_composer folder in the wp-content/plugins folder in your website.
Note : It is always wise to create a complete backup before updating anything (including the database).
15.12 - What you should know
There are a couple things you should know as they might occur or you have a question on that:
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 Preset scheme 1 into a Preset scheme 3 might not work as the Scheme 1 is loaded before scheme 3. This is how css works and we have no control over that.
Note : The tables are using bootstrap css. They are not styled when the class'”table” is not used. You can grab example code here. Grab Bootstrap Table css Examples
Note : We have disabled some modules in the Visual Composer. They can be enabled by modifying the Visual Composer Settings php file that comes with the theme. The file is called visual_composer_config.php and is located rttheme19/rt-framework/admin/editor folder.
We disabled some parts of the bootstrap library, they can be enabled by modifying the SASS files that comes with the theme.
Note : Visual composer rows do not work as fullwidth when used in single product pages. Its by design that they cant work.
Note : Be aware that the mobile navigation is different then the one you see in your computer while resizing the browser window.
Note : When you set the bottom rows in a page to transparancy it might very well be that you can see the footer below the text in the normal content. You should be aware of this and do not set any transparency in these rows when the Covered Footer is turned on.
The Custom Post types that come with the theme can be disabled by a function call for each post type you want to disable. Add the code to the bottom theme rttheme19/functions.php just before the last ?>
Note : Be aware that if you copy and paste above code you need to change the quotes with correct ones otherwise the code will generate a fatal error.
Note : Visual Composer activating creates a white screen of death
Depending on your hosting environment (e.g. shared, VPS, et cetera) and how big your database is, you might experience an issue when trying to access the Customizer. This is usually due to the Customizer timing out because of a memory limit in your server environment. The first thing you can do to remedy this is to enter the following lines in your wp-config.php file at the root of your installation:
define( ‘WP_MEMORY_LIMIT’, ‘128M’ );
Upon entering in this information everything should begin to work as expected unless your hosting provider has a limit on these parameters, which would keep them from taking effect. If your Customizer is still failing to load, the next step would be to open up a support ticket with your hosting provider and ask them to increase your PHP memory limit to a higher setting.
Note : When you start working with child-themes you have to be aware of the following: Note : When your settings in the customizer wont save or apply in the frontend of your website you have to be aware of the following:
The child theme uses its own customizer settings. This means that after activating the child theme you either have to reset the settings in the customizer or import settings you saved before in the customizer parent theme or any other location you worked on the design of your install.
To have a ‘real web shop’ with products, stock registration, sales, coupons, customer registration and payment gateways, etc. in your website you have to install a plugin called WooCommerce.
Downloading WooCommerce Plugin
The WooCommerce plugin can be downloaded directly from http://wordpress.org
You can download WooCommerce plugin at Download →
also available on WooCommerce Official Website →
The WooCommerce Plugin is free and you can find free plugins for WooCommerce at http://wordpress.org. You can buy premium plugins from
Depending on what you want to do one has to buy one or more plugins. The WooCommerce Plugin by itself is however very well equipped to handle a default web shop.
We don’t support the working of any plugins within the theme. These plugins have extensive documentation of its own. We support our coding issues, mistakes and if any we fix those within a reasonable time if they are cause by our doing. WooCommerce has its own support forum where one can get help (paid or non-paid). For adjusting the layout of the shop or the order of items within a product page one has to follow the WooCommerce documentation and add/remove/adjust the action calls. Problems of any kind with that can be dropped at the WooCommerce support forum.
The WooCommerce Settings can be found here.
You can find “WooCommerce” on the left hand side menu in the WordPress theme customizer. This theme offers some global options for the WooCommerce Plugins such as “Layout”, “Amount of products per page” etc. You can adjust those settings within the theme options in the customizer.
Q : What is the differencies between Product Showcase and WooCommerce Products?
A : They are completely different systems. You can use default “Product Showcase” to create an organized product catalog. If you would like to
sell your products online via various payment gateway systems, we advice to use WooCommerce.
Q : Can i move my existing products from Product Showcase to WooCommerce?
A : No, this is not possible. You need to create new products, categories etc. by using the WooCommerce Product Post type.
Q : Can I get support on how the WooCommerce plugin works?
A : No, WooCommerce has its own support forum where one can get help (paid or non-paid). We only adjust our coding mistakes, if any and support those.
Updating WooCommerce
When WooCommerce Plugin Updates it is wise to visit the RT-Theme Support Forum to check our announcements or ask if it is OK to update. WooCommerce sometimes changes many of its code causing blindly installing of a update that your website does not look OK anymore. We usually quick and update our theme in the same time frame with the plugin. You can visit the support forum here: RT-Theme Support Forum
16.2 - Creating a Woocommerce Shop
Creating a Woocommerce Shop
Download the WooCommerce Plugin
To have a ‘real webshop’ with products, stock registration, sales, coupons, customer registration, and payment gateways, etc. on your website you have to install a plugin called WooCommerce. The WooCommerce plugin can be downloaded directly from http://wordpress.org.
You can download the WooCommerce plugin at Download →
Depending on what you want to do one has to buy one or more plugins. The WooCommerce Plugin by itself is however very well equipped to handle a default webshop.
Note: We don’t support the working of any plugins within the theme. These plugins have extensive documentation of their own.
Note: For adjusting the layout of the shop or the order of items within a product page one has to follow the WooCommerce documentation and add/remove/adjust the action calls. Problems of any kind with that can be dropped at the WooCommerce support forum.
Note: We support our coding issues, mistakes and if any we fix those within a reasonable time if they are caused by our doing.
Note: WooCommerce has its own support forum where one can get help (paid or non-paid).
The WooCommerce Settings can be found here.
You can find “WooCommerce” on the left-hand side menu in the WordPress theme customizer (or in the theme settings). This theme offers some global options for the WooCommerce Plugins such as “Layout”, “Amount of products per page” etc. You can adjust those settings within the theme options in the customizer.
Q : What is the difference between Product Showcase and WooCommerce Products?
A : They are completely different systems. You can use the default “Product Showcase” to create an organized product catalog. If you would like to
sell your products online via various payment gateway systems, we advise using WooCommerce.
Q : Can I move my existing products from Product Showcase to WooCommerce?
A : No, this is not possible. You need to create new products, categories, etc. by using the WooCommerce Product Post type.
Q : Can I get support on how the WooCommerce plugin works?
A : No, WooCommerce has its own support forum where one can get help (paid or non-paid). We only adjust our coding mistakes, if any and support those.
Note : When The WooCommerce Plugin Updates it is wise to visit the RTTheme Support Forum to see if we approve of the update. WooCommerce sometimes changes many of its code causing blindly installing of an update that your website does not look ok anymore.
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
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 →
17.2 - WPML Plugin
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 :
Create a page and finish the complete content with featured images and all other images, attachments etc. Once done publish the post.
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.
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.
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.
You now have two options…. :
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
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.
Don’t forget to publish the translated version!
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 :
Create a Post
Create a Category
Attach the Category to the Post
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.
There are 2 Sliders and 4/5 Carousel Sliders in RT-Theme 19
The RT-Theme 19 comes with 2 sliders which can be added as shortcode or as visual composer module. The 2 slider types are :
The Content Slider
The Revolution slider, integrated as a plugin
The RT-Theme 19 comes also with 4/5 carousel sliders which can be added by shortcode or within the visual composor as visual element / module The 4/5 carousel types are :
The Blog Carousel
The Product Carousel
The Portfolio Carousel
The Testimonial Carousel
The WooCommerce Product Carousel. This one is only available when WooCommerce is activated
By the use of a carousel slider it is possible to present a ‘rotating’ list of products, blog posts, testimonials or portfolio items, anywhere in the content or your page(s). The carousel slider pulls the items (posts) from the custom post types which are available by default in the theme (Posts, Products, Portfolios & Testimonials).
Note : It does not support any other custom posttypes added by 3rd party plugins.
The content slider
To add a content slider one needs to add the content element in the visual composer. Once the element is added one can adjust the settings for this slider like height, transition speed, auto start, parallax effect.
The Added Content Slider element has the ability to add individual slides.
Adjust the Slider Settings.
Add new slider element.
To Slider Revolution
The Slider 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:
Set and adjust all the available slider settings for that slider after creating the slider.
Once done adjusting the global slider settings add your slider items (the actual slides) to the slider.
After that you can open each of the individual slides and add items like layers of text, video's layers, layered images, buttons etc. to your slider. Set their positions by dragging dropping them in the design preview window adjust the layer's settings in the options window on the below left of the preview window..
Save the Slider
Note : You can add any slider that has been created with the Revolution Slider plugin to any page or post
by adding the Revolution Slider element by use of the visual composer in any page or post.
by inserting it's shortcode anywhere in the body content.
by adding its shortcode to any other element / module in the visual composer which supports shortcodes or even in text widgets.
Note : You can not insert a revolution slider element when there is no revolution slider created.
Add a new “Revolution Slider” module, and select the Revolution Slider of your choice from the pulldown select list within the element settings. Here are the steps :
Create a page and in the visual composer insert a Slider Revolution module.
In the popup screen that appears after inserting the slider select a slider from the dropdown list.
Q : Can I get support on the Revolution Slider plugin and its working?
A : No, the Revolution Slider is added as is. This means that if there are issue’s within the theme integration we will fix those. But it means that we do not support any issue’s you might be experiencing with the working (the how to) of the slider itself, multi language support etc.
Consider this please : We did not develop that plugin, we just added it to the theme as is. If modified or added css does not work correctly we will not support that. Any ‘real’ bug’s within the plugin we can drop at the plugin’s developers desk or if you own a revolution slider license yourselves you can do this by the use of your own license. We then will have to wait on a fix like any normal customer buying the plugin. It is not within our hands or control when it will be fixed.
The Carousel Slider
To insert a carousel slider you can insert a carousel shortcode or a carousel element using the visual composer in to a page content. Adjust the settings in the popup window and insert the code. The slider will show at the inserted location in the page.
Note : Example settings is from product carousel. The other carousels have similar settings.
Note : The popup window can have multiple tabs with settings.