Introduction

Thank you for purchasing the theme! If you have any questions that goes beyond the scope of the theme documentation, feel free to contact support.

1. Getting Started

Please make sure you have downloaded the "Installable WordPress files only" zip file from the download page on ThemeForest.

  1. Hover you account name
  2. Select downloads from the submenu
  3. Click the green Download button of the theme
  4. Select Installable WordPress files only
download WordPress theme from ThemeForest If you download "All files & documentation" unzip the package to use the "the-kleaner-qt" zip to upload

1.1 Upload the theme

You can upload the theme on two ways:

  1. Admin Dashboard
    • Go to Appearance -> Themes
    • Click on Add New, then on Upload
    • Upload the the-kleaner-qt.zip file
    • Click the Install Now button

  2. FTP Client
    • Unzip the the-kleaner-qt.zip file and upload the unzipped folder to
      wordpress/wp-content/themes/ on your server by using a FTP client

After uploading the theme, hover the thumbnail image and click 'Activate'.

Activate The Kleaner - WP Theme
Click the activate button to active the theme

1.2 Install Plugins

  • Go to Appearance -> Install Plugins
  • Check all checkboxes, click the select field at the top and select Install click on the Apply button
  • Again, check all checkboxes, click the select field and click Activate then click Apply
  • Go back to the dashboard
  • A WooCommerce modal will popup. Choose to Skip it or run the wizard with Let's Go!

1.3 Import Demo Content

Please install and activate all required plugins before you import the demo content !
  • Go to Appearance -> Install Demo Data
  • Click the blue Import button from one of the demo's you would like to use
  • Wait till you see the finished notice at the bottom of the page
  • Demo import is finished

One click Demo Install
Choose your demo and click the import button once and wait till the import is finished

The theme installation and demo import is done. You're ready to edit the theme! Enjoy!


1.4 Update the theme

You can update the theme on three different ways. Please pick the option that suit you the most or you're the most familiar with.

It's recommended to install a backup plugin (UpdraftPlus) and create a backup before updating the theme!
Envato Market plugin

The most easiest way to update the theme is by installing the Envato Market plugin.
The plugin need to be configured once and after you can update each theme update with a single click.

If you're looking for more information about this plugin please see this article

  1. Download the Envato Market plugin from this link
  2. Navigate to Plugins -> Add New -> Upload Plugin and upload the zip file
  3. Activate the plugin
  4. Navigate to the new Envato Market tab in the admin menu
  5. Click the "Generate personal token" text link
  6. Enter a name for your token (e.g. The Kleaner WP Theme)
  7. Read and accept the terms by clicking the checkbox
  8. Click "Create Token" button
  9. Copy and store your token and press the button (we don't store this token so please be sure to save it)
  10. Enter the token in the input field and click the "Save Changes" button

FTP Client
  1. Login to your server with an FTP client (or login through cPanel or Plesk)
  2. Navigate to the theme folder (e.g. wordpress/wp-content/themes)
  3. Rename the folder of the theme you're currently using (e.g. theme-name-1 or theme-name-2)
  4. Unzip the downloaded zip file and upload the folder to the themes folder on your server
  5. Investigate if everything is working correctly
  6. Remove the old theme folder from your server

WordPress Dashboard (not recommend)
  1. Navigate to Appearance > Themes
  2. Activate the default WordPress theme (like TwentySeventeen)
  3. Click on the screenshot of The Kleaner and select 'delete' in the bottom corner
  4. Click on "Add New" at the top
  5. Click on "Upload File" at the top
  6. Upload the freshly downloaded theme zip file
  7. Hover theme screenshot and press "Activate"
It's recommended to install a backup plugin (UpdraftPlus) and create a backup before updating the theme!

2. Header

The logo can be uploaded to the theme customizer via Appearance -> Customize -> Site Identity. It is recommended to upload a logo that's already scaled in size.

Please do not upload the default logo in the retina logo option. The retina logo option need to contain a logo that is exactly double the size of the default logo. For example; if you default logo is 150x90 pixels in size, your retina logo image should be uploaded as 300x180 pixels.

If you don't have such logo leave the retina logo option empty.

upload logo to the theme

2.2. Favicon

The favicon can be uploaded to the theme customizer via Appearance -> Customize -> Site Identity. Please make sure you upload the image in the correct size of 512x512 pixels.


2.3 Topbar

2.3.1 Change topbar content

The topbar of the theme is a widgetized area. Please navigate to Appearance -> Widgets, on the right side of the screen you will see the "Topbar - Left Side" and "Topbar - Right Side" panels where you can add widgets to.

Please limit your topbar widgets to text widget, navigation menu widget, social icons widget or icon box widget

theme topbar widget area 2.3.2 Change topbar colors

To change the colors of the topbar (background color, text & link color) please navigate to Appearance -> Customize -> Topbar, there you will find the color controls

2.3.3 Hide the topbar

To hide the topbar please navigate to Appearance -> Customize -> Topbar and set the topbar dropdown field to Hide.


The theme has different header layouts to choose from. Some header layouts are using a widgetized area for contact details, or links to your social media platforms.

2.4.1 Change header content

Header layout 1, 3 and 4 have a widgetized area which contain contact details. To change or add widgets please navigate to Appearance -> Widgets and click on the Header widget panel on the right side of the screen.

Please limit your header widgets to text widget, icon box widget and social icon widget only

2.4.2 Change header colors

To change the colors of the header please navigate to Appearance -> Customize -> Header -> Settings. Here you will find all the color controls in this panel.

2.4.3 Change header layout

To change the layout of the header please navigate to Appearance -> Customize -> Header -> Settings and select your layout from the Header Layout option select field.


The theme has multiple menu's, each of these menu's can be edited via Appearance -> Menu's. From the dropfield field select which menu you want to edit. To edit the parent theme menu please select the Primary Navigation.

edit theme menu

Please make sure you have assigned the menu to to correct location by clicking one of the checkboxes at the bottom.

theme menu location

The footer is a widgetized area. To change or add widgets please navigate to Apearance -> Widgets. On the right side of the screen you will see the "Footer Column" widget panels where each panel represent a column in the footer.

To change the amount of columns, or hide the footer please navigate to Appearance -> Customize -> Footer.

Footer widget panels
Footer & bottom footer widget panels

To change the colors of the header please navigate to Appearance -> Customize -> Footer. Here you will find all the color controls in this panel.


The bar at the bottom of the footer is called the bottom footer and have it's own widget area and color controls. The widget panels can also be found under Appearance -> Widgets and is called "Bottom Footer" (left & right column).

4. Theme Customizer

With the theme customizer you can change the colors and settings of the theme, all options are grouped in sections. Please navigate to Appearance > Customizer to enter the theme customizer.

theme menu location

The theme customizer contain the following sections, each section have it's own color and layout options:

  • Logo / Site Identity
  • Topbar
  • Header
    • Settings
    • Buttons
  • Slider
  • Navigation
  • Page Header
  • Breadcrumbs
  • Layout & Colors
  • Blog
  • Shop
  • Typography
    • Body
    • Navigation
    • Headings
  • Post Types
    • Projects
    • Staff
    • Archives
  • Footer
  • 404 Page
  • Visual Composer
  • Google Maps API key
  • Additional CSS

5. Pages

5.1 Homepage

The homepage is using the "Front Page" template. If you build a homepage from scratch please select this template in the "Page Attributes" metabox on the right side of the page builder.

homepage settings
Select "Front Page" template

Please also set the static page option under Settings -> Reading to the homepage you're building.

static pages option
Select pages for homepage and blog page

5.2 Default / Regular pages

To add a default page there are no additional steps. Just navigate to the Pages tab and click on the Add New button at the top of the page.


5.3 Project pages

Please make sure you have installed and activated the The Kleaner Toolkit plugin via Appearance -> Install Plugins

Projects can be added to the "Projects" tab in the admin menu. You can use the default WordPress texteditor or WPBakery Page Builder to build up your single project page.

projects posttype
Project Post Type
single project post
Single Project Post

To display the summary of these projects you can add the "Projects" page builder element through WPBakery Page Builder on any page.


5.4 Staff pages

Please make sure you have installed and activated the The Kleaner Toolkit plugin via Appearance -> Install Plugins

Staff / Team members can be added to the "Staff" tab in the admin menu. You can use the default WordPress texteditor or WPBakery Page Builder to build up your single staff page.

If you don't want or need a single staff page you can only add the Title, Featured Image and Staff Details. To display the summary of these projects you can add the "Staff" page builder element through WPBakery Page Builder on any page.

staff posttype
Staff Post Type
single staff post
Single Staff Post

5.5 Blog & Blog post pages

The blog page with a summary of posts is using the default WordPress loop. To configure this page please make sure you have at least 1 post added under the Blog tab in the admin menu. Navigate to Settings -> Reading and set the blog page at the Post Page option.

Blog Layout

You can choose from two layouts for the blog page, the default list layout and the grid layout. You can change the layout via Appearance -> Customize -> Blog -> Blog Layout.

6. Page Builder Elements

The theme is using the WPBakery Page Builder plugin as page builder. This page builder has some amazing elements you can use straight away. Still we have created 20+ custom elements. Why you will ask yourself. Our custom elements are specifically designed and build for this theme. To use our custom element please click the "by QreativeThemes" tab inside the Element window of the page builder.

QreativeTheme page builder elements

We will highlight some of these custom elements because they need some additional information. Most of the elements don't and are easy to use.


Post Type Elements

The Projects, Staff, Testimonials and VC Sidebars page builder elements requires the installation and acitvation of the The Kleaner Toolkit plugin. With these element you can display the content that has been added to these post types.


Container Elements

Some of our custom elements like Accordion, Slider, History, Opening Hours, Google Maps are container shortcodes. These are container elements and each have their own child shortcode element which you can add by clicking the + icon inside the container.

container element 1
Add the parent element to the page builder and press the + icon to add the child element
container element 2
Select the shortcode inside the window
container element 3
The window of the child shortcode will appear

VC Sidebars

The VC Sidebar element might come in handy if you want to create complex sidebar layouts, but can also be used for repeatable content blocks. Create a new post under the VC Sidebar tab in the admin menu and start building your sidebar/block with the WPBakery Page Builder.

Add the VC Sidebar element to a post/page and select your sidebar/block which you want to display.

This element is also available as native WordPress widget under Appearance -> Widgets


This element will display the title, excerpt text and featured image of the page you're feautering. To change the content please navigate to the Pages tab and edit the specific page you're featuring.

QreativeTheme page builder elements

Call to Action

This is a straight forward to use and element and you can display a great call to action area on your website. If you want to use a background image for your cta area please add the image to the page builder row instead of this widget.


Google Maps


Paid Google Maps

The API embedded Google Maps requires a billing account and API key to display the map on your website. Please follow the steps in the following article closely to create a valid API key. Also make sure you have enabled the JavaScript API manually.

https://qreativethemes.ticksy.com/article/7787/

If you have enabled your billing account and created your API key please navigate to Appearance -> Customize -> Custom and paste your key into the input field and save the settings. Please wait a few minutes and your map should display on your website.

Each map marker requires an latitude and longtitude. Please see this link to find out these details of the location you want to display.


Free Google Maps

The alternative is the iframe embedded Google Map. Please navigate to https://www.google.com/maps and follow the steps in the screenshot below:

Free Google Map Alternative

After step 4 please navigate to your website, add a "Custom HTML" widget to the page builder and paste the copied code to the textarea inside the widget.

The Google Map should be visible on your website. Please note that this map doesn't have any other settings than changing the width and hight of the map.


Icon Box

The icon box widget allows you to create an element with an icon, title and description text. The element has 3 different layouts:

The Kleaner Icon Box Layouts

The position of the icon and alignment of the entire icon box can be changed with the same named settings inside the icon box element


Testimonials

The Kleaner Create Testimonial

The testimonial element will pull the posts from the Testimonial tab in the admin menu. You can show the testimials in a carousel of grid format. This element comes with 4 different layouts:

The Kleaner Testimonials Layouts

Projects

The project element will pull the posts from the Projects tab in the admin menu. You can show the projects in a carousel of grid format. This element comes with 4 different layouts:

The Kleaner Project Layouts

Latest News

The latest news element will pull the posts from the Posts tab in the admin menu. You can show the news in a carousel of grid format. This element comes with 2 different layouts:

The Kleaner News Layouts

7. Plugins

All required and recommend plugins can be installed and activated via Appearance -> Install Plugins.


7.1 Advanced Custom Fields PRO

The Advanced Custom Fields PRO plugin is bundled with the theme. This means this plugin don't have to be purchased seperately and can be installed via Appearance -> Install Plugins. The plugin is not to be used or distributed outside of this theme. This plugin is required to use the theme.

How to update ACF PRO

Because the plugin is bundled with the theme, updates of this plugin will be shipped within theme updates. After you have updated the theme to the latest version you can update the plugin by deleting this plugin from the Plugins tab and then re-install via Appearance -> Install Plugins


7.2 WPBakery Page Builder

The theme is using WPBakery Page Builder for WordPress as page builder. This is a required plugin if you want to use the elements from our theme demo. The plugin is bundled with the theme and you don't have to purchase it seperately.

Looking for more information about the WPBakery Page Builder please visit their documentation.


7.2.1 Enable page builder mode

To use the page builder please click the "Backend Editor" button above the texteditor.

enable page builder mode
Enable page builder mode
add first page builder element
Enable page builder mode

7.2.2 Adding theme demo page templates

If you have used the demo data importer all pre-built pages will be imported. But if you would like to use some of the demo pages outside if the imported data you can add them through the template section.

Each of our theme demo pages are added as page template which you can use without having to build it from scratch. Please click on the Add Template button.

A modal will popup where you can select the page template inside the "My Templates" tab.

open page template library
Open page template library
select page template
Select page template from the list

7.2.3 Enable front-end editor

We disabled the front-end editor by default. If you still want to use the front-end editor please navigate to Appearance -> Customize -> Visual Composer where you can enable the front-end editor mode. Now when you edit a post/page the "Frontend Editor" button will display.


7.3 Booked - Appoinment Booking for WordPress

Booked is a powerful and easy-to-use appointment booking plugin for WordPress. The plugin is bundled and coming with the theme for free. You don't have to purchase this plugin seperately. You can install the plugin via Appearane -> Install Plugin.

Adding time slots to your calendar

To add bookable timeslots to your calendar please see the following link: https://boxystudio.ticksy.com/article/3238/

Display calendar on your website
The appointment calendar can be displayed by adding the "Default" shortcode below:


If you're looking for more information about the Booked plugin please see the Booked documentation: https://boxystudio.ticksy.com/articles/7827/


This plugin generates locational breadcrumb trails in the theme. The breadcrumbs are very customizable with colors and settings.

Changing the breadcrumbs colors

The colors for the breadcrumb element can be changed via Appearance -> Customize -> Breadcrumbs

Changing the breadcrumbs settings

The display settings for the breadcrumbs can be edited via Settings -> Breadcrumbs NavXT


7.5 Contact Form 7

The Contact Form 7 plugin is used for the contact forms in the theme. It's one of the most popular free contact form plugins available for WordPress.

You can create a form under the Contact tab in the admin menu. You can add form input field by clicking the type buttons above the form editor textarea. After creating your form you can display it with the unique shortcode anywhere in the theme.

To find more information or guides please visit the documentation of Contact Form 7.

7.5.1 Demo contact form layouts

If you have used the demo data importer on your fresh WordPress installation the layouts will be located under the Contact tab in the admin menu.
Please do not use the importer anymore if you started building your website.

If you did not used the importer, or lost the form layouts you can copy/paste the following code snippets into the textarea of the form editor.

<div class="row">
    <div class="col-sm-12 col-lg-6">
        <p>Your Name (required)<br />[text* first-name placeholder "First Name *"]</p>
    </div>
    <div class="col-sm-12 col-lg-6">
        <p>Email Address (required)<br />[email* your-email placeholder "Email Address *"]</p>
    </div>
    <div class="col-sm-12 col-lg-6">
        <p>Phone Number (required)<br />[tel phone-number placeholder "Phone Number *"]</p>
    </div>
    <div class="col-sm-12 col-lg-6">
        <p>The Subject<br />[text your-subject]</p>
    </div>
    <div class="col-sm-12">
        <p>Write your message<br />[textarea* your-message placeholder "Type your message..."][submit class:btn class:btn-primary placeholder "Send Message"]</p>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 col-lg-6"><p>Your Name *[text* your-name placeholder "Full Name"]</p></div>
    <div class="col-sm-12 col-lg-6"><p>Your Address *[text* your-address placeholder "Address"]</p></div>
    <div class="col-sm-12 col-lg-6"><p>Your Email address *[email* your-email placeholder "Email address"]</p></div>
    <div class="col-sm-12 col-lg-6"><p>Your Phone Number *[tel* your-phone placeholder "Phone Number"]</p></div>
    <div class="col-sm-12 col-lg-6"><p>Date of Appointment * [date the-date]</p></div>
    <div class="col-sm-12 col-lg-6"><p>Time of Appointment * [select* the-time "08:00 AM" "09:00 AM" "10:00 AM" "11:00 AM" "12:00 AM" "01:00 PM" "02:00 PM" "03:00 PM" "04:00 PM" "05:00 PM" "06:00 PM"]</p></div>
    <div class="col-sm-12 col-lg-6"><p>I am interested in</p>[checkbox services use_label_element "Industrial Cleaning" "Warehouse Cleaning" "Construction Cleaning" "Office Cleaning" "Hospitality Cleaning" "High Window Cleaning"]</div>
    <div class="col-sm-12 col-lg-6"><p>Additional Information[textarea extra-message 40x10 placeholder "Write your message here.."][submit class:btn class:btn-primary placeholder "Make Appointment"]</p></div>
</div>
<div class="row">
    <div class="col-sm-12 col-lg-6"><p>Your Name *[text* your-name placeholder "Full Name"]</p></div>
    <div class="col-sm-12 col-lg-6"><p>Your Address *[text* your-address placeholder "Address"]</p></div>
    <div class="col-sm-12 col-lg-6"><p>Your Email address *[email* your-email placeholder "Email address"]</p></div>
    <div class="col-sm-12 col-lg-6"><p>Your Phone Number *[tel* your-phone placeholder "Phone Number"]</p></div>
    <div class="col-sm-12 col-lg-6"><p>Square footage * [select* square-footage "700" "800" "900" "1000" "1100" "1200" "1300" "1400" "1500" "1600" "1700" "1800" "1900" "2000" "Over 2000"]</p></div>
    <div class="col-sm-12 col-lg-6"><p>Frequency of service * [select* frequency "None" "One time" "Daily / Contract" "Weekly" "Weekends only" "Monthly" "On call"]</p></div>
    <div class="col-sm-12 col-lg-6"><p>Select type of cleaning:</p>[checkbox services use_label_element "Industrial Cleaning" "Warehouse Cleaning" "Construction Cleaning" "Office Cleaning" "Hospitality Cleaning" "High Window Cleaning"]</div>
    <div class="col-sm-12 col-lg-6"><p>Additional Information[textarea extra-message 40x10 placeholder "Write your message here.."][submit class:btn class:btn-primary placeholder "Make Appointment"]</p></div>
</div>
<div class="row">
    <div class="col-sm-12 col-lg-6">
        <p>[text* first-name placeholder "First Name *"]</p>
    </div>
    <div class="col-sm-12 col-lg-6">
        <p>[email* your-email placeholder "Email Address *"]</p>
    </div>
    <div class="col-sm-12 text-center">
        <p>[textarea* your-message placeholder "Type your question..."]</p>
        <p>[submit class:btn class:btn-primary placeholder "Send Question"]</p>
    </div>
</div>
<div class="call-back">
    <div class="row">
        <div class="col-sm-12 col-lg-6">[text* first-name placeholder "Your Name"]</div>
        <div class="col-sm-12 col-lg-6">[select* service "Industrial Cleaning" "Contract Cleaning" "Office Cleaning" "Builders Cleaning" "Hotel Cleaning" "Other.."]</div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-lg-6">[tel your-phone placeholder "Your Phone Number"]</div>
        <div class="col-sm-12 col-lg-6">[submit "Call me Back"]</div>
    </div>
</div>

7.5.2 Setting up the sending & receiver details

If you want to edit the email body message of the email go to Contact -> 'Edit form' -> Click the Mail tab. Here you can edit the fields which will show in your mail:

Contact Form 7 Sender Email
Please use the same symbol for your email address. E.g. [your-name] <info@yourdomain.com>

7.5.3 The form is not working / not sending the message

This is a common issue with contact forms and WordPress. To fix this issue please install the WP Mail SMTP plugin and enter all details under Settings -> Mail. Select "Default (none)" at the Mailer option and enter the details. Most of these details can be found in the e-mail you have received from your hosting provider when the domain/hosting was registered.


7.6 Easy Fancybox

This plugin is used for as lightbox solution in the theme for images and videos, but can be used for all types of content.

Changing the fancybox settings

The settings for the fancybox can be edited via Settings -> Media

Enable lightbox for images

To enable the lightbox mode for images please navigate to Settings -> Media.

Enable lightbox for images
Enable lightbox for images
Enable clickable navigation

To enable the navigation arrows inside the lightbox window please navigate to Settings -> Media.

Enable lightbox navigation
Enable lightbox navigation arrows


7.7 MailChimp for WordPress

This plugin helps you to get more subscribers to your MailChimp list(s). Please note that you need a active MailChimp list and a MailChimp API key to make the plugin work.

Creating a MailChimp list
Please see this article from MailChimp how to create a new list: https://kb.mailchimp.com/lists/growth/create-a-new-list

Get your MailChimp API key
Please see this article from MailChimp how to get your API key: https://kb.mailchimp.com/integrations/api-integrations/about-api-keys. Add your API key under MailChimp -> API Key.

Subscribe field layout
The form we're using in our theme demo is nothing more than an input field and button. To use this layout copy the code below and add it in the textarea under MailChimp for WP -> Form

<input type="email" name="EMAIL" placeholder="Typ email address.." required />
<input type="submit" value="Submit"/>

7.8 One Click Demo Import

This plugin is required if you want to import the theme demo. Please make sure you have installed and activated this plugin.

Navigate to Appearance -> Import Demo Data and choose which demo you would like to import. Please use the import only on a clean WordPress installation. If you have existing content or already started building your website it is recommend not to use the demo data importer.

Please do not change pages or close the window while the importer is running

7.9 The Kleaner Toolkit

This is a required plugin for this theme which contain the custom post types, custom fields and page settings, custom page builder elements and some shortcodes.

Change custom post type url
If you want to change the url structure for the projects or staff pages please navigate to Appearance -> Customize -> Post Types -> Project (or Staff) -> Custom url slug

If you have changed the url please navigate to Settings -> Permalinks and click the button at the bottom of the page. This step is required to see the url changes.


7.10 Simple Page Sidebars

The Simple Page Sidebars plugin allows you to create a unique widgetized sidebar on each page. While editing a page the Sidebar metabox is located on the right side of the screen.

Please make sure you have set the default sidebar to page sidebar via Appearance -> Reading -> Sidebar

Contact Form 7 Sender Email
1. Edit a page and click 'Enter New' at the Sidebar metabox
Simple Page Sidebars Name
2. Enter logical name for the custom sidebar and press Update
Simple Page Sidebars New Area
3. Under Appearance -> Widgets your custom sidebar is added

7.11 WooCommerce

The theme is (basic) WooCommerce compatible. This means that all default options of WooCommerce are working and that there are no custom options for WooCommerce.

6.6.1 Setting up the shop page

To setup the shop page please create a new default page named "Shop" for example. Then navigate to WooCommerce -> Settings -> Products -> Display and select the created page at the "Shop Page" option.

To setup the Cart, Checkout and Account pages please click the Checkout and Account horizontal tabs

WooCommerce Set Shop Page

8. Shortcodes

8.1 Button

The default shortcode to display a the button is:
[button href="your-link-here"] Text [/button]

There are 7 more parameters you can use inside the shortcode:

Style
Change the look of the button; use primary, outline lighter or outline darker
style="outline lighter"

Icon
Add a FontAwesome or Themeify icon to the button
icon="fa-angle-right"

Link target
Link the button to a new window, or not. To link in the same use _self or new _blank window
target="_blank"

Edges
The edges of the buttons are rounded
edges="round"

Fullwidth
The button goes fullwidth
fullwidth="true"

Background color
Change the background color of the button
background="red"

Text color
Change the text color of the button
color="white"


8.2 Icons (FontAwesome)

The default shortcode to display an icon is:
[icon type="fa-home"]

There are 2 more parameters:

Link icon
Make the icon link to another url
href="your-link-here"

Link target
Link the button to a new window, or not. To link in the same use _self or new _blank window
target="_blank"


See the full list of available icons at the FontAwesome library


8.3 Table

There are 2 styles of tables, which you can use for example a price list

Table default style
[table cols="Service,Price Per Hour, Project Based Hour Price" data="
Design & Build, $60, $50,
Plastering, $45, $40,
Electrical, $55, $50,
Plumbing, $45, $40"]

Table boxed style
[table style="boxed" cols="Service,Price Per Hour, Project Based Hour Price" data="
Design & Build, $60, $50,
Plastering, $45, $40,
Electrical, $55, $50,
Plumbing, $45, $40"]

The table shortcode can only contain plain text. If you want to use html in your table please add the tables but with html inside the "Custom HTML" widget:

<table class="qt-table default">
    <thead>
        <tr>
            <td> Item </td>
            <td> Detail</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> Item 1 </td>
            <td> Detail 1 </td>
        </tr>
        <tr>
            <td> Item 2 </td>
            <td> Detail 2</td>
        </tr>
        <tr>
            <td> Item 3 </td>
            <td> Detail 3 </td>
        </tr>
    </tbody>
</table>

9. Translations

9.1 WPML - The WordPress Multilingual Plugin

The theme is fully compatible for the WPML plugin. If you have purchased this plugin please install and activate the following WPML plugins:

  • WPML Multilingual CMS
  • WPML String Translation
  • WPML Translation Management

After installing and activating the WPML plugins it will guide you through the installation wizard to configure your multilingual website.


9.2 Polylang

Although the theme is not made compatible with this plugin it will still do a really great job for making a multilingual website. Polylang is a great free alternative instead of WPML. We do need to say that Polylang is not working for custom widgets, which are 3 elements in the theme,


9.3 Manual Translation

There is a .pot file included with the Theme. You can find the file here: the-kleaner-qt/language/thekleaner.pot

You can create translation .po and .mo files by editing the .pot file with a program like PoEdit.

Please see this tutorial by WPZOOm for translating the .pot file

10. Extra

10.1 Demo Images

The images used in our theme demo are not included with the theme because of licensing and copyright of the images. All images are replaced with grey placeholders. This is described on the item page on ThemeForest.

We have created a collection of the images we've used for the theme demo. If you need them please see this link where you can buy them.


10.2 Child Theme

A child theme is a theme that inherits the functionality from the parent theme and are often used when you want to make changes to the theme that goes beyond the default options. Changing code directly to the theme files is not possible because you will loose them when you update the theme. This is why installing a child theme will help you.

The child theme is included inside the "All files & documentation" package from ThemeForest. If you want to use the child theme upload it through the WordPress dashboard (zip file) or ftp (unzipped folder). Please see Upload Theme how to upload and activate the child theme


10.3 Changelog

Each theme update we will provide the list of changes at the bottom of the item page on ThemeForest.


10.4 Support

If you have questions that are beyond the scope of this documentation, please contact support.


10.5 Rate the Theme

If you like this theme please give it rating on Themeforest. It means alot for us!

How to rate the theme?

  1. Login into your Themeforest account
  2. When logged in, move your mouse over your username (in the top)
  3. Navigate to Downloads
  4. Search for the theme and hover your mouse over the stars
  5. Rate The Kleaner WordPress theme