Physio - WP Theme Documentation

# Physio
WordPress Theme Documentation

Physio is a premium WordPress theme built for Physical Therapy, Rehabilitation, Physiotherapist, Medical Clinic, Chiropractor, Private Hospital, Sports Therapy Clinic, Massage Therapist and others that offer Medical or Therapy related services.

ThemeForest Page →

### 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.

- Author: QreativeThemes
- Theme: Physio
- Type: WordPress

## 1. Getting Started

### 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
- Select all checkboxes, click the select field at the top and select Install click on the Apply button
- When all plugins are installed select 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 installation process (can be done later)

### 1.3 Import Demo Content

Please install and activate all required plugins before importing the demo content !

1. Go to Appearance → Import Demo Data
2. Choose if you want to use SiteOrigin Page Builder or Elementor Page Builder with the theme
3. Hover the item and click the "Import Demo Data" button

4. Click the "Continue & Import" button and Wait till you see the finished notice
   (You don't have to install the recommended plugins on this screen)

5. Only if you have installed Elementor Page Builder you can delete the following plugins, and dismiss the plugin notice:
   - Page Builder by SiteOrigin
   - Black Studio TinyMCE Widget
   - Easy Fancybox

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

### 1.4 Update Theme

Updates for the theme will be released on ThemeForest and can be installed on two different ways. We recommend to use the Envato Market plugin, it is a one time setup but after you can update future theme updates with a single click from your WordPress dashboard.

1. Envato Market plugin

- Download and install the Envato Market plugin
- Click the Envato Market tab in the admin menu
- Generate a token - by clicking the link of step 1 on the page
- Give your token a name and make sure you enable the following settings:
  - View and search Envato sites
  - Download your purchases items
  - List purchases you've made
- Click on "Create Token"
- Copy your token from the screen and (important) save it somewhere on your computer
- Go back to your website and add the token to the "Token" input field
- After saving the settings the "Theme" tab should be available where you can update the theme

Envato Market guide with screenshots

2. FTP

- Go to the download page of your ThemeForest account that purchased the theme
- Click the download button and select "Installable WordPress files only"
- Login to your server with a FTP client
- Navigate to the theme folder in your WordPress installation (e.g. wordpress/wp-content/themes/)
- Rename the physio-qt folder (e.g. physio-qt-1 or physio-qt-old)
- Unzip the downloaded zip file and upload the physio-qt folder to your server
- Check if your website is working correctly
- If you have any translation files in the old theme folder copy them over to the new theme folder
- Remove the old theme folder from your server

## 2. Header

### 2.1 Logo

You can change the logo via Appearance → Customize → Theme Options → Logo

In this panel you find 2 logo options Logo and Logo Retina (2x). If you uplaod a retina logo make sure this image is exactly two times the size of the normal logo, do not upload the normal logo in the retina logo option. Example; If the normal logo is 180 x 90 pixels in size the retina logo should be 360 x 180 pixels.

Recommended height for the normal logo is around 90 pixels

### 2.2 Favicon

The favicon icon can be changed via Appearance → Customize → Site Identity

### 2.3 Topbar

By default the site tagline and topbar menu will be displayed in the topbar. To change this please navigate to Appearance → Widgets.

There you will find the Topbar - Left Side and Topbar - Right Side widget panels. In both of these panels you can add a widget like SiteOrigin Editor, QT: Icon Box or the Navigation widget.

### 2.4 Navigation

All navigations/menu's can be edited via Appearance → Menu's, from the select field on this page you can edit one of the following theme menu's:

Topbar Menu: Select the Topbar Navigation from the select field

Primary Menu: Select the Primary Navigation from the select field

Services Menu: Select the Services Navigation from the select field

Footer Menu: Select the Footer Navigation from the select field

### 2.5 Bottom Header / Contact Details

Below the logo and navigation you can show the contact details of your business. Go to Appearance → Widgets and click on the Header panel on the right side of the screen.

Add 4 QT: Icon Box widgets to this panel were you can add your contact details in each of this icon box

## 3. Theme Customizer

In the theme customizer you can change the colors of the theme directly in your browser. To access the customizer navigate to Appearance → Customize → Theme Options

The following option panels are available

- Logo
- Topbar
- Header
- Navigation
- Mobile Navigation
- Slider
- Page Header
- Breadcrumbs
- Layout & Colors
- Blog
- Shop
- Footer
- Typography
- 404 Page
- Opening Hours & Translation
- Font Awesome

## 4. Pages

### 4.1 Page Templates

Default Template
If you want to create a regular page, 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:

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

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

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

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.3 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 Brand / Logo Image

The insurance images at the bottom of the homepage can be added or changed inside
the QT: Brand / Logo Image< widget

### 6.2 Brochure

If you want to link to a brochure, PDF or any other file you can use the QT: Brochure widget.

### 6.3 Button

The QT: Button widget will add a default styled button to your website. Please do not use the button widget in the footer area, use the button shortcode instead.

### 6.4 Call to Action

To add a full width call to action banner (with background image) to your website please follow these steps:

1. Add a new page builder row with one column
2. Go to Edit Row → Layout and set row layout to Full Width Stretched
3. Click on the Design panel and add the background image for the banner
4. Set background size to Cover
5. Edit the QT: Call to Action widget and enter the text and buttons (see buttons shortcode)

### 6.5 Counter

The QT: Counter widget will add a numberic counter to your website.

### 6.6 Facebook

The QT: Facebook widget will add the Facebook Page Box to your website. Make sure you add the full url of a Facebook page (not a person profile) to the URL field.

### 6.7 Featured Page

With this widget you can feature a page on your website, for example to create a summary of your individual service pages. The widget will display the featured image, page title and excerpt text from the selected page you're featuring.

#### Change the image and excerpt text

The image and text can't be edited inside the widget but only on the page you selected to feature by following these steps:

1. Click on Pages in the menu
2. Edit the page that you selected inside the QT: Featured Page widget
3. Change the "Featured Image" and "Excerpt"
4. Save the page

### 6.8 Google Maps (Free)

To add a simple Google Map to your website the QT: Google Maps (Free) is the perfect widget for it. Simply add your address change some basic settings if you want and the map will appear on your website.

### 6.8 Google Maps (Paid)

If you're looking for a more advanced Google Map the SiteOrigin Google Maps is the widget you need. Please note that you need an Google billing account and Google Maps API key to use this widget.

Google (billing) account

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.

Google Maps API key

Please click on this link and follow the steps there to create your Maps API key.

### 6.9 Icon Box

The icon box widget is very straightforward to use, simply add the icon, title and text

If you want to link the icon box to a page add the full url at the link option
(e.g. https://yourdomain.com). You can also use skype:, tel: or mailto: for different link purposes

### 6.10 Latest Blog Posts

This widget is built to add a small summary of your latest blog posts to the frontpage of your website.

Please do not use this widget to create your actual blog page, use the default WordPress settings for that, described in step 4.3

### 6.11 Opening Hours

To add opening hours or translate the weekdays go to Appearance > Customize > Theme Options > Opening Hours & Translation.

To display the opening hours on your website you can use the "QT: Opening Hours" widget. This widget will show the opening hours added to the customizer by default. There are cases to you need to show different opening hours (e.g. multiple locations). Remove the opening hours form the customizer and add them to the widget fields instead:

### 6.12 Social Icons

The QT: Social Icons will add social icons to your website that will link to the provided URL's.

### 6.13 Team Member

The QT: Team Member makes it easy to add your team members to your website.

### 6.14 Testimonials

The QT: Testimonial widget will display the added testimonials in a carousel. You can add more testimonials by clicking the "Add New Testimonial" button

### 6.15 SiteOrigin Editor

The SiteOrigin Editor widget allows you to add textual content to your website. The text editor comes with some typographical styling options in the toolbar above the textarea. Also it is possible to add images to the textarea.

## 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.

How to update?

Updates for the Advanced Custom Fields PRO plugin will be shipped within theme updates. To update this plugin to the latest version make sure you have updated the theme to the latest version first.

1. Make sure you're running the latest theme version
2. Go to the "Plugins" tab
3. Deactivate and delete the Advanced Custom Fields PRO plugin
4. Go to "Appearance → Install Plugins"
5. Click the "Install" link at the Advanced Custom Fields PRO plugin
6. Click the "Activate" plugin button
7. Done !

### 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="white-featured-box">
    <div class="row">
        <div class="col-xs-12 col-md-6"><span>Name *</span>[text* your-name placeholder "Full Name"]<span>Email *</span>[email* your-email placeholder "Email Address"]<span>Phone Number *</span>[tel* your-phone placeholder "Phone Number"]
        </div>
        <div class="col-xs-12 col-md-6"><span>The Subject</span>[text your-subject placeholder "Subject"]<span>Your Message *</span>[textarea your-message placeholder "Type your message.."][submit class:btn class:btn-primary" Send Message"]<input type="reset" class="btn btn-outline" value="Clear Form" /></span>
        </div>
    </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:

#### 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:

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

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

### 7.5 WooCommerce

WooCommerce is compatible with the Physio theme. After activating the plugin the installation wizard will pop up, you can go directly go through it or skip it and configure it later.

If you skipped the WooCommerce installation and now want to setup the WooCommerce plugin you need to create 4 new individual pages: Shop, Cart, Checkout and My Account.

Select Shop page

Navigate to WooCommerce → Settings → Products and select the Shop page at the "Shop page" select field, save the settings

Select other pages

Then go to WooCommerce → Settings → Advanced and select the pages for Cart, Checkout and My Account

### 7.6 Breadcrumbs NavXT

The breadcrumbs are dislayed under the page title area by the Breadcrumbs NavXT plugin. If this plugin is not installed and activated the breadcrumbs are not visible

Technical Settings

Navigate to Settings → Breadcrumbs NavXT

Color Settings

Navigate to Appearance → Customize → Theme Options → Breadcrumbs

Remove the duplicated breadcrumb separator?
Navigate to Settings → Breadcrumbs NavXT and remove the angle symbol from the breadcrumb separator setting

If you see the message "Your settings are out of date" click on Migare now button

## 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]`

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

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

Border color: Chage the border color, useful for the outline button
Example: `[button border_color="red"]Text[/button]`

Custom class: Add a custom class to the button
Example: `[button custom_class="class-here"]Text[/button]`

### 8.2 Font Awesome Icons

The Font Awesome icon shortcode has 3 options:

Icon: Choose the icon
Example: `[fa icon="fas 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>

## 9. Footer

### 9.1 Top Footer

To change the contact details in the top footer navigate to Apearance → Widgets and click on the Footer - Top panel on the right side of the screen.

To change the amount of column in the top footer navigate to Appearance → Customize → Theme Options → Top Footer and change the amount at the Top footer columns setting

### 9.2 Main Footer

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

To change the amount of column in the main footer navigate to Appearance → Customize → Theme Options → Top Footer and change the amount at the Main footer columns setting

### 9.2 Bottom Footer

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 theme you're currently using (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.

### 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 any questions that are beyond the scopr of this documentation, feel free to open a ticket on our support desk

### 11.5 Modula Image Gallery

If you're looking for a plugin to add a gallery to your website we recommend to install the Modula Image Gallery plugin. This is a freemium plugin with a ton of options to create any kind of image gallery.

Download Modula

### 11.6 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.