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. Install Theme

1.1. Upload the theme

Please make sure you have downloaded the "Installable Files only" from ThemeForest.

  1. Admin Dashboard
    • Go to Appearance -> Themes
    • Click on Add New, then on Upload
    • Upload the physio-qt.zip which you downloaded from Themeforest
    • Click the Install Now button

  2. FTP Client
    • Unzip the file you've downloaded from ThemeForest and upload the folder name physio-qt to wp-content/themes/ on your server by using a FTP client.

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
  • If all plugins are installed check all checkboxes again, click the select field and click Activate then click Apply again.
  • 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 !
  1. Go to Appearance -> Install Demo Data
  2. Click the blue Import button, and Wait till you see the finished notice.

The theme is now fully installed and ready to be edited. Enjoy the theme!

You can change the logo and favicon through Appearance -> Customize -> Theme Options -> Logo

Best way to change the logo into your own:
  1. Use the theme logo images (logo.png and logo_2x.png)
  2. Drop and scale your logo in each container
  3. Upload the regular logo
  4. Upload the retina logo (regular logo size 2x)

If you scale your own logo recommend height is not taller than 90pixels


2.2. Favicon

You can upload the favicon in the Site Identity panel of the customizer. Site Identity is the panel below the Theme Options panel.


2.3. Topbar

By default the site tagline and topbar menu will be displayed in the topbar. You can change these details or you can add widgets to it.

Topbar left side
You can add widgets to the left side of the topbar via Appearance -> Widgets -> Topbar - Left Side.

Topbar right side
You can add widgets to the right side of the topbar via Appearance -> Widgets -> Topbar - Right Side.


All navigation or menu's can be edited via Appearance -> Menu's.

To change the main navigation of the theme please select the Primary Navigation from the select field.

To change the services menu on the services pages please select the Services Navigation from the select field.


2.5. Header Widgets

Below the main navigation you can add widgets to display the contact details of your business for example. You can find this widget panel via Appearance -> Widgets -> Header.

3. Theme Customizer Options

Theme Customizer

We created a live customizer options panel in the WordPress Customizer. Go to Appearance -> Customize -> Theme Options

In this panel there are sections where you can change:

  • Logo
  • Topbar
  • Header
  • Navigation
  • Mobile Navigation
  • Slider
  • Page Header
  • Breadcrumbs
  • Layout & Colors
  • Blog
  • Shop
  • Footer
  • Typography
  • 404 Page
  • Custom CSS

4. Pages

4.1. Page Templates

Page Templates

Default Template
If you want to create a regular page always use this template.

Front Page Slider
This template will add the option to add a slider to your page, like the theme demo homepage. After selecting this template you will find the slider below the page builder grid in the "Page slider" metabox.

Front Page Alt Slider
If you rather use Revolution Slider or Layer Slider for WordPress use this template. Enter the slider ID in the metabox at the top of the page and your done.

Please Note: Revolution Slider and Layer Slider are not included with this theme, you'll have to buy them. We only created the possibility to use them with this theme.


4.2. Page Builder

The page builder allows you to create pages the way you want. Within the columns of the page builder you can add the widgets you want to show on the page. If the page builder plugin is activated you will see a new tab, next to the default tabs of the WordPress texteditor, called 'Page Builder'.

Enable page builder

1. Install and activate the SiteOrigin Page Builder plugin
2. Click the "Page Builder" tab to use the page builder on your page:

Page Builder Tab

3. Click "Add Row" to add your first page builder row to the grid

Page Builder Row

4. Click "Add Widget" to add your first widget to the grid

Page Builder Widget If you have used the page builder please don't switch between the tabs. It will break the page builder grid !

Page Builder

1. Add Row
First you need to add a row. When you click the Add Row button a modal will pop up where you can set the columns in that row. (You can drag the columns to set the width)

2. Add Widget
When you add a row, then it's time to add a widget. Click on a column and then on the Add Widget button. A modal will pop up with all the available widgets.
If you want to add some text or a image use the Visual Editor Widget or the default Text Widget

3. Edit Row
There are some row styles: Attributes, Layout and Design which you can edit.

  • Attributes
    Here you can add a row class, cell class and CSS styles
  • Layout
    Set margins and paddings to the row and choose between standard, fullwidth and fullwidth stretched row layouts
  • Design
    Set a row background color or image


4.4. Blog

Setup the blog page:

  1. Navigate to Settings -> Reading
  2. Select "A static page"
  3. Set the "Post Page" option to your blog page
  4. Save the settings

Change blog layout:

  1. Navigate to Appearance -> Customize -> Theme Options -> Blog
  2. Select the layout at the Blog Layout settings
  3. Save the settings

5. Slider

When you choose the Front Page Slider template there will be a new box below the page builder grid where you can add your image slides.

The Slides tab is where you can add your image slides. Hover the place holders and click the 'X' icon to remove the default images. The "Add Media" button will appear to add your own image.

In the Settings tab you can edit some settings of the slider, like captions, auto cycle and slide animation.

1. Click Add Row to add a new image slide

  • 2. Add your image (1920 x 750 pixel)
  • 3. Add a small top heading
  • 4. Add the main heading
  • 5. Add a text paragraph (optional)
  • 6. Click "Add Slide Button" to add a button
  • 7. Enter the button details
  • 8. Repeat step 1 till 7 for a new slide

6. Widgets

6.1. SiteOrigin Editor

The SiteOrigin Editor allows you to write textual content, set some basic typography styles to it, or just add some images.


With the QT: Featured Page widget you can create a summary of your server pages. The page will display the featured image, page title and excerpt text of the specific page you're featuring.

Change the image and excerpt text

The text and image can't be edited inside this widget but on the specific page you've selected to feature. Edit this page via the Pages tab and follow these steps:

  1. Click on Pages in the menu
  2. Edit the page that you want to display with the Featured Page widget
  3. On this page add the 'Featured Image' and change the 'Excerpt'
  4. Now save this page

Featured Page Widget

6.3. Clients / Partners / Insurances

The insurance logos at the bottom of the homepage can be displayed with a small bit of HTML code. If you prefer not to use HTML code you can use the default Image widget.

Please copy the code below and paste it in a Custom HTML widget in the page builder. Change the default link to the link of your image

<div class="client-logos">
    <div class="logo">
        <img src="http://qreativethemes.net/tf-images/client1.jpg">
    </div>
    <div class="logo">
        <img src="http://qreativethemes.net/tf-images/client2.jpg">;
    </div>
    <div class="logo">
        <img src="http://qreativethemes.net/tf-images/client3.jpg">
    </div>
    <div class="logo">
        <img src="http://qreativethemes.net/tf-images/client4.jpg">
    </div>
</div>

6.4. SiteOrigin Google Maps

Google changed the requirements for the Google Maps usage on your website. You need to enter your credit card details at Google and create an API key. You get $200 free usage a month (≈ 28.500 map connections) and if you exceed this they start billing you. Unfortunately these changes are made by Google and not by us, we can't do anything about this. On this link you can read more about these changes.

1. The free Google Maps
The HTML iframe embedded map remain free (no billing account and API key needed). To add this map to your website follow these steps:

  1. Navigate to Google Maps
  2. Search for your location
  3. Press the menu icon inside the search field
  4. Navigate to Share or embed map
  5. Click on the embed tab
  6. Copy the html code
  7. Add a "Custom HTML" widget to the page builder in the theme
  8. Paste the html code

2. The billed Google Maps
Make sure you have setup your billing account at Google. After you have setup this account you need to create an API key for Google Maps.

Please follow this guide to create your API key.

The style we used is Pastel Tones for the Homepage and Ultra Light with Labels for the contact page. If you add the SiteOrigin Google Map you can fill in a predefined style under the 'Styles' tab of the widget.

Pastel Tones JSON code:

[{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":60}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"lightness":30}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ef8c25"},{"lightness":40}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#b6c54c"},{"lightness":40},{"saturation":-40}]},{}]

Ultra Light with Labels JSON code:

[{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]

6.5. Call to Action

With this widget you can create a Call to Action banner with text and buttons.

How to create the theme demo Call to Action banner

  1. Add a page builder row with one column
  2. Go to Edit Row -> Layout and set row layout to Full Width Stretched
  3. Then go to Design panel and upload the background image for the banner
  4. Set background size to Cover
  5. Now edit the widget and enter the text and buttons (see buttons shortcode)

6.6. Icon Boxes

The icon box widget is simple to use. Add an icon, title and texts, that's all.

Please add the full url in the link input field (e.g. http://yourdomain.com). Also you can use skype:, tel: or mailto: for different link purposes.


6.7. Widget Design Options

There are some small custom design options inside the Design Panel of a widget. Here you can change the Widget title size and set the featured boxes around the widgets. You only need to check the checkbox and save the widget.

Widget Design Options

7. Plugins

7.1. Advanced Custom Fields Pro

Advanced Custom Fields PRO is bundled with the theme. However, the ACF PRO files are not to be used or distributed outside of the theme.


7.2. Booked - Appointment Booking for WordPress

Booked is a powerful and easy-to-use appointment booking plugin for WordPress. You can display the booking calendar on your page by adding the Booking Calendar widget to the page builder.

The plugin files are not to be used or distributed outside of the theme.

Booked Documentation

7.3. Contact Form 7

As the name of this plugin says. The Contact Form 7 plugin is used for the contact forms in the theme. If you create your own form you can display it on your website by adding the form shortcode (that is visible on the Contact tab) in the Visual Editor widget.

Contact Page form:

<div class="row">
<div class="col-xs-12 col-md-6">
    <p>Name <span>(required)</span></p>[text* your-name placeholder "Full Name *"]<p>Email <span>(required)</span></p>[email* your-email placeholder "Email Address *"]<p>Phone Number <span>(required)</span></p>[tel* your-phone placeholder "Phone Number *"]
</div>
<div class="col-xs-12 col-md-6">
    <p>Subject</p>[text your-subject placeholder "Subject"]<p>Message <span>(required)</span></p>[textarea your-message placeholder "Type your message.."][submit class:btn class:btn-primary "Send Message"]<input type="reset" class="btn" value="Clear All" /></span>
</div>
</div>

Ask a Question form:

<div class="questionform white-featured-box">
<div class="row">
<div class="col-xs-12 col-md-6">
    [text* your-name placeholder "Full Name *"][email* your-email placeholder "Email Address *"][tel* your-phone placeholder "Phone Number *"][select* answer first_as_label "Receive Answer By:" "Phone" "By Email"]
</div>
<div class="col-xs-12 col-md-6">
    [text* your-subject placeholder "The Subject"][textarea* your-message placeholder "Type your question.."][submit class:btn class:btn-primary class:pull-right class:fullwidth "Send Question"]
</div>
</div>
</div>

If you want to edit the email body message of the email go to Contact -> 'Edit a Form' -> And click the Mail tab on top. Here you can edit the fields which will show in your mail.


7.3.1 Configure sender email address

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

7.3.2 The forms are not working, they're 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


7.4. Simple Page Sidebars

With this plugin you can create as many as page sidebars as you want. While editing a page you see a metabox on the right side of the screen:

Simple Page Sidebars Widget

Open the Reading settings screen link in a new browser tab, set the default page sidebar and save. Close the window and click on Add New. Fill in the name of the sidebar and click Update

Simple Page Sidebars Name

When you go to Appearance -> Widgets you will notice your new sidebar.

Simple Page Sidebars New Area

7.5. WooCommerce

Physio is compatible with WooCommerce. After installing and activating WooCommerce on a fresh WordPress installation the install window of WooCommerce will popup. If you want to install WooCommerce go through the installer else click the "Skip" steps.

To configure the WooCommerce pages go to WooCommerce -> Settings -> Products -> Display and set the Shop Page to Shop, and save the changes.

On the Checkout and Account tabs you can set the Cart, Checkout and Account pages.

WooCommerce Set Shop Page

If you want to change the breadcrumbs of the projects or the shop page go to Settings -> Breadcrumbs NavXT -> Post Types there you can set the root page.

How do I remove the angles between the breadcrumb links?
Go to the admin dashboard -> Settings -> Breadcrumbs NavXT. If you see the message 'Your settings are out of date' click on Migare now. Then in the first input field (Breadcrumb Seperator) you see > remove this, scroll to the bottom and save changes.

8. Shortcodes

8.1. Buttons

To add a button with the shortcode add:

[button href="your-link-here"] Text [/button]

The shortcode has 7 more parameters you can use:

Text: Change the button text
Example: [button]Text[/button]

Style: Change the look of the button; use primary or outline
Example: [button style="primary"]Text[/button]

Icon: Add a FontAwesome icon to the button
Example: [button icon="fa-angle-right"]Text[/button]

Href: Set the link of the button, add an URL
Example: [button href="URL"]Text[/button]

Target: Link the button to a new window, or not. To link in the same use _self or new _blank window
Example: [button target="_self"]Text[/button]

Fullwidth: Makes the button fullwidth Example: [button fullwidth="true"]Text[/button]

Background color: Chage the background color Example: [button background="red"]Text[/button]

Text color: Change the text color Example: [button color="white"]Text[/button]


Physio Button Shortcode Visual

8.2. Font Awesome Icons

The Font Awesome icon shortcode has 3 options:

Icon: Choose the icon
Example: [fa icon="fa-cogs"]

Href: Add a URL to the icon
Example: [fa href="URL"]

Target: Link the button to a new window, or not. To link in the same use _self or new _blank window
Example: [fa target="_self"]


See the full list of available icons at the FontAwesome library


8.3. Accordion

Just edit the title="" attributes and 'content' to your own. If you want to set panel open use the attribute state="active" after the title.

[collapsibles]
    [collapse title="Title 1" state="active"]
        content
    [/collapse]
    [collapse title="Title 2"]
        content
    [/collapse]
    [collapse title="Title 3"]
        content
    [/collapse]
[/collapsibles]


8.4. Tables

Because the table shortcode is a more complicated shortcode and doesn't allow everything what many people try to achieve inside a table we decided to go for the regular HTML table, also because it is not harder to use than the table shortcode. Copy the code below and paste it inside the 'Text' tab of the visual editor.

<table class="custom-table">
    <thead>
        <tr>
            <td>Type</td>
            <td>Session</td>
            <td>Price</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Evaluation</td>
            <td>60 minutes</td>
            <td>$180</td>
        </tr>
        <tr>
            <td>Follow-up Visit</td>
            <td>45-60 minutes</td>
            <td>$110 per visit</td>
        </tr>
        <tr>
            <td>Extended Follow-up Visit</td>
            <td>60-75 minutes</td>
            <td>$180 per visit</td>
        </tr>
    </tbody>
</table>

To edit the widgets in the top footer go to Apearance -> Widgets and click on the "Footer - Top" panel.

If you go to Appearance -> Customize -> Theme Options -> Top Footer you can select how many widgets you want to display. For example if you set Number of Columns to 4 you can place 4 widgets in the Footer area.

To hide the entire top footer please select 0.


The middle part of the footer is a main footer widget area. Widgets can be added via Apearance -> Widgets -> Footer - Main

The amount of columns can be set via Appearance -> Customize -> Theme Options -> Footer -> Main Footer Columns.


In the bottom footer you can place some text or copyrights. You can edit this text through Appearance -> Customize -> Theme Options -> Footer

10. Translations

10.1. WPML

With WPML you can make create a website for multiple languages. If you purchased the WPML plugin please install the following WPML Add-on plugins:

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

After you've activated WPML the plugin will guide you through the installation wizard.


10.2. Loco Translate

With the Loco Translate plugin you can translate the theme inside your WordPress installation.

Please install and activate the Loco Translate plugin, and follow the steps below:

  1. Please navigate to Loco Translate -> Themes (to translate a plugin go to Loco Translate -> Plugins)
  2. Click on the correct theme name in the list (or plugin name if the texts is coming from a plugin)
  3. Click on the "New Language" link
  4. Set your language from the dropdown field
  5. Set "Choose a location" to Custom and press the Start Translating button
  6. Type the word you want to translate in the search box and click on it when it appear in the list below
  7. Write your translation in the most bottom textarea (do not change the default text)
  8. Save the settings
  9. Navigate to Settings -> General and set the "Site Language" option to the translation language.


10.3. Manual Translation

You can translate the theme by editing the included .pot language file with a program like PoEdit. After translating please export the .po and .mo files which you need to upload in the language folder of the theme (theme-folder/language/).

For more information to manually translate the theme please see this link.

11. Extra

11.1. Demo Images

The images on the theme demo doesn't come with the download package because of copyrights. We created a collection where you can easily find all the used images (existing account required).

See used Demo Images


11.2. Child Theme

A child theme is included with the parent theme. A WordPress child theme is a WordPress theme that inherits its functionality from the parent theme. Child themes are often used when you want to customize or tweak an existing WordPress theme without losing the ability to upgrade that theme.

If you want to use the child theme upload it through the WordPress dashboard or FTP.
See 1.2. Installation and Updates


11.3. Changelog

The changelog of the theme is available on the bottom of the item page on Themeforest.


11.4. Support

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


11.5. Rate the Theme

If you like this theme please rate it 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. At the Physio WordPress Theme, move your mouse over the stars and click.
  5. Rate Theme