Contents

1. How to use the call to action widget

2. How-to: Create Google Maps API key

3. Contact form doesn't send message

4. Theme demo images

5. How-to: Transfer Theme to Live Server

6. Import the Essential Grid file

7. Set up the WP Mail SMTP plugin

8. Change fonts of Physio theme

9. Theme demo images

10. Change fonts of The Landscaper

11. Increase the page speed of my WordPress website

12. Theme demo images

13. WPML translate customizer fields

14. Enable lightbox navigation arrows

15. Allowed memory size of # bytes exhausted

16. Translating the theme

17. Change the featured page widget image and text

18. Adding social icons to the bottom footer

19. Remove double lightbox window

20. Homepage slider is not visible

21. Navigation font doesn't change with Easy Google font plugin

22. Configure the theme on HTTPS (SSL certificate)

23. How-to: Update the theme

24. Create a gallery grid with Essential Grid

1. How to use the call to action widget

Add the heading and button(s)

1. Click "Edit" to edit the widget
2. Add a title
3. Add a button with the button shortcode

Button shortcode is [button href="http://yourdomain.com"] Text on the button [/button]


Add a background image

4. Hover the wrench icon of the page builder row (not from the widget)
5. Click "Edit Row"
6. Click the "Design" panel
7. Add your background image
8. Set the "Background Image Display" option to "Cover"
9. Click the "Layout' panel
10. Set "Row Layout" option to "Full width stretched"


Click to enlarge the image

2. How-to: Create Google Maps API key


1.  Go to this link and click the "Continue" button (this could take a minute)

2. Enter a name for your key, click "HTTP Referrers", add the URL of your website and click the 'Create' button 

Please use the examples below to add your website. Replace yourdomain.com with your domain name. Each in a new input field.

*.yourdomain.com/*
http://yourdomain.com/*
www.yourdomain.com/*
yourdomain.com/*

3. Copy the API key you see in the modal.

4. Go to the API Manager and click the "Google Maps JavaScript API"

5. Make sure you click the 'Enable' button. If you only see 'Disable' you can leave the page

If you're using the Physio WordPress theme make sure you also enable the:

- Geolocation API
- Geocoding API

6. Adding the API key to the theme

- The Landscaper
Go to Appearance -> Customize -> Theme Options -> Custom and add the API key to the "Google Maps API" input field

- Physio
Edit the SiteOrigin Google Maps widget and add your API key to the "API Key" input field

- The Kleaner
Go to Appearance -> Customize -> Google Mapi API key and add your key there

3. Contact form doesn't send message

If the contact form doesn't send your message (you see a read warning below the form) please check the following steps:

1. Edit your contact form under the "Contact" tab

2. Add your email address in the "To" and "From" settings. At the "From" setting please wrap your email address in < > symbols like in the image below:



3. Save the settings

Now if the contact form still doesn't send the message there is most likely an issue with the mail server of your domain. Don't worry, this is a common issue with contact forms and WordPress and can be fixed by installing the WP Mail SMTP plugin.

Please see this article how to set up the WP Mail SMTP plugin to fix issue with the contact forms:

Set up the WP Mail SMTP plugin

4. Theme demo images

Due copyrights of the images used in our theme demo we can't distribute them with the theme. Below you find the collection link of all the images used in the theme, you can buy them from 123RF:

https://123rf.com/lightbox_public.php?publiclightid=d02ec82c7f2817aacd0769031fcfa5ee

5. How-to: Transfer Theme to Live Server

Please install the Duplicator plugin when you're moving the theme to a live server. 

The plugin will generate a zip file of the entire WordPress installation (WordPress, theme, plugins, settings etc.) and installer file. Both files need to be uploaded to the new location on your server.

You can run the install procedure via http://yourdomain.com/installer.php. Please make sure before you're going through the installer you have created a new MySQL user and database. These details need to be entered half way through the install procedure.

When the installer is completed you will see the login link on your screen and the theme is up and running.

6. Import the Essential Grid file

The "essential-grid" file is located inside in installable theme folder the-landscaper/demo-files/essential-grid.json

Importing the File

1. Please navigate to Ess. Grid -> Import/Export
2. Click on the 'Import' panel
3. Upload the essential-grid.json file
4. Click the small 'Read File' button
5. Click 'Import Selected Data' button (please do not click the full demo data button)


Step 1 to 4:

Importing Essential Grid


Please make sure you click the "Read File" button and not the full demo data button to import the essential-grid file successfully.


Step 5:

Importing Essential Grid


The essential-grid file has been uploaded successfully. If the grid is not showing up on your website please follow the steps in this article.

7. Set up the WP Mail SMTP plugin

Make sure you have installed and activated the WP Mail SMTP plugin, and have the following details:

- SMTP Host
- SMTP Port
- SMTP Username (the email address that is used in the contact forms on your website)
- SMTP Password (password of above email address)

These details can be found in the email you have received from your hosting provider.

Configure the plugin (step by step)

1. Navigate to the "WP Mail SMTP" tab in the admin menu

2.  At the "From Email" setting enter the email address that you're using in your forms

3. At the "From Name" setting enter the name which emails are sent from

4. Select the "Other SMTP" option

5. Enter the SMTP Host (can be found in an email from your hosting provider)

6. At the "Ecryption" setting select "SSL"

7. Enter the SMTP Port (can be found in an email from your hosting provider)

8. Set the "Auto TLS" setting set to "On"

9. Set the "Authentication" setting to "On"

10. Enter the SMTP Username (the email address you're using in your contact forms)

11. Enter the SMTP Password (the password of the email address)

12. Save the settings.

Click to enlarge image

At this point your contact forms should be working. Please note that there could be a delay in sending and receiving a message. This depends on the mail server of your domain.

If you still experience issues please open a support ticket and we're happy to help you.

8. Change fonts of Physio theme

In the theme customizer you can change the fonts of the theme. The options can be found via Appearance > Customize > Theme Options > Typography


If you want to target elements specifically or need more advanced typographic controls please install the Easy Google Fonts plugin.

The plugin will add a Typography panel to the root of the customizer (Appearance > Customize). Here you can change the font for headings and content of the theme.

To change the font for specific elements in the theme you need to setup 'custom font controls'. To do this please follow the steps below:

1. Navigate to Settings -> Google Fonts
2. Create a font control. For each font control please enter a reference name, CSS class and click the 'force style' overwrite checkbox. Below you can find the CSS classes for custom elements:


    Navigation
    - Enter the name 'Navigation'
    - Add CSS class .main-navigation li a


    Call to action title
    - Enter the name 'Call to action title'
    - Add CSS class .call-to-action .call-to-action--content .call-to-action--title


    Icon box title
    - Enter the name 'Icon box title'
    - Add CSS class .content-area .icon-box--title


    Testimonial author name
   - Enter the name 'Testimonial author title'
    - Add CSS class .testimonials .testimonial--author


    Page header title
   - Enter the name 'Page header title'
    - Add CSS class .page-header--title


    Page header subtitle
   - Enter the name 'Page header subtitle'
    - Add CSS class .page-header--subtitle


3. Please navigate to Appearance > Customize > Typograpghy. You will see 2 panels. In the 'Default Typography' panel you can change the content headings and fonts. In the 'Theme Typography' you will find your custom font controls.

9. Theme demo images

Due copyrights of the images used in our theme demo we can't distribute them with the theme. Below you find the list of all the images used in the theme, you can buy them from Adobe Stock.

https://stock.adobe.com/stock-photo/physiotherapist-doing-foot-massage/81907889
https://stock.adobe.com/stock-photo/trainer-helping-woman-on-exercise-ball/81849898
https://stock.adobe.com/stock-photo/doctor-stretching-a-young-woman-arm/92575161
https://stock.adobe.com/stock-photo/patientin-bei-der-physiotherapie/30820279
https://stock.adobe.com/stock-photo/male-physiotherapist-training-with-patient/87941502
https://stock.adobe.com/stock-photo/doctor-examining-his-patient-back/80282147
https://stock.adobe.com/stock-photo/patientin-bei-der-physiotherapie/50248078
https://stock.adobe.com/stock-photo/gruppe-trainiert-zusammen-im-fitness-raum/76480906
https://stock.adobe.com/stock-photo/physiotherapist-smiling-at-camera-arms-crossed/82093402
https://stock.adobe.com/stock-photo/accident-at-work/78635512
https://stock.adobe.com/stock-photo/ankle-injury-athlete/42008914
https://stock.adobe.com/stock-photo/knee-injury/67722990
https://stock.adobe.com/stock-photo/running-injury-knee-pain/54252669
https://stock.adobe.com/stock-photo/man-suffering-from-backache/43581352
https://stock.adobe.com/stock-photo/woman-having-back-pain-while-sitting-at-desk-in-office/71130339
https://stock.adobe.com/stock-photo/physiotherapist-stretching-woman-s-arm/107439116
https://stock.adobe.com/stock-photo/woman-training-with-exercise-band/83023570
https://stock.adobe.com/stock-photo/masseur-stretching-woman-s-arm/35128948
https://stock.adobe.com/stock-photo/patient-at-the-physiotherapy/30820236


10. Change fonts of The Landscaper

In the theme customizer you can change the fonts of the theme. The options can be found via Appearance > Customize > Theme Options > Typography


If you want to target elements specifically or need more advanced typographic controls please install the Easy Google Fonts plugin.

The plugin will add a Typography panel to the root of the customizer (Appearance > Customize). Here you can change the font for headings and content of the theme.

To change the font for specific elements in the theme you need to setup 'custom font controls'. To do this please follow the steps below:

1. Navigate to Settings -> Google Fonts 
2. Create a font control. For each font control please enter a reference name, CSS class and click the 'force style' overwrite checkbox. Below you can find the CSS classes for custom elements:


    Navigation
    - Enter the name 'Navigation'
    - Add CSS class .main-navigation li a


    Call to action title
    - Enter the name 'Call to action title'
    - Add CSS class .cta-banner.cta-block .cta-banner-text .cta-banner-title


    Testimonial author title
    - Enter the name 'Tesimonial author'
    - Add CSS class .testimonials .testimonial-person .testimonial-author


3. Please navigate to Appearance > Customize > Typograpghy. You will see 2 panels. In the 'Default Typography' panel you can change the content headings and fonts. In the 'Theme Typography' you will find your custom font controls.

11. Increase the page speed of my WordPress website

To increase the page speed of your WordPress website there are some standard things you can do.

1. Hosting

Hosting is a really important key in the page speed of your website. If you run WordPress on a small shared hosting package it's fine and the theme will fully work but it won't be blazing fast, simply because the resources of shared hosting are limited. If you want a good and fast hosting package we recommend to purchase (managed) VPS hosting.

2. Caching plugin

It's recommend to install a caching plugin for your website. The WP Fastest Cache plugin give the best result for our themes.

After installing navigate to the WP Fastest Cache tab in the admin menu and enable the following settings:

- Caching
- Gzip
- Browser caching
- Delete cache on update post/page

Please activate this plugin only if you finished building your website, not while building your website.

3. Scale and compress images

Please make sure you scale and compress images to reduce the size which will result in a faster loading time. You can scale image with an image editor program or with online tools like Pictureresize

To compress images please use the online Compressor.io tool or install a plugin like Smush Image.

4. Limit the amount of content

Please consider the amount and type of content you add to your website. If you add a lot of large and heavy images (see point 3 for this) your page speed and Google Insights score will drop drastically.

Also adding things like a YouTube video or a Google Maps will also slow down the page speed because a lot of extra scripts from these services will be loaded on your website.

5. Limit the amount of plugins

Only use the plugins you really need on your website and don't install too many plugins. If you don't need a plugin simple deactivate and delete it from your website. Please note that the Advanced Custom Fields PRO plugin is required in our themes. 

If you have plugins activated but you're not using them it is still possible that files from these plugins are loaded to your website which will slow down the page speed of your website.

12. Theme demo images

Due copyrights of the images used in our theme demo we can't distribute them with the theme. Below you find the list of all the images used in the theme, you can buy them from Adobe Stock.

https://stock.adobe.com/stock-photo/hedge-trimmer-works/85133347
https://stock.adobe.com/stock-photo/single-armchair-with-a-red-pedestal-table/84734139
https://stock.adobe.com/stock-photo/gardening-tools-and-seedling-on-garden-table/83937973
https://stock.adobe.com/stock-photo/lawn-mower/83928187
https://stock.adobe.com/stock-photo/manual-weed-conrol/82775115
https://stock.adobe.com/stock-photo/horticulturist-checking-his-appletrees-on-his-farm/80839700
https://stock.adobe.com/stock-photo/backyard-cozy-patio-area-with-wicker-furniture-set/78418523
https://stock.adobe.com/stock-photo/backyard-cozy-patio-area-with-wicker-furniture-set/77662770
https://stock.adobe.com/stock-photo/backyard-cozy-patio-area-with-wicker-furniture-set/77662727
https://stock.adobe.com/stock-photo/snowplow-is-cleaning-a-road/76894223
https://stock.adobe.com/stock-photo/rollrasen/76507139
https://stock.adobe.com/stock-photo/villa/73791722
https://stock.adobe.com/stock-photo/worker-with-a-leaf-blower/73453473
https://stock.adobe.com/stock-photo/walkout-patio-with-concrete-tile-floor-and-landscape-design/70872429
https://stock.adobe.com/stock-photo/nobler-garten-einer-wohnung/72107249
https://stock.adobe.com/stock-photo/cascade-waterfall-in-japanese-garden-in-bonn/70530798
https://stock.adobe.com/stock-photo/hedge-trimming/70569449
https://stock.adobe.com/stock-photo/gardener-pruning-a-tree/70492704
https://stock.adobe.com/stock-photo/gartner-bei-unkrautjaten/68575931
https://stock.adobe.com/stock-photo/fruhlingshafter-garten/67692811
https://stock.adobe.com/stock-photo/nice-water-lily-flower/66966906
https://stock.adobe.com/stock-photo/pacific-northwest-living/66631121
https://stock.adobe.com/stock-photo/pavior/64740698
https://stock.adobe.com/stock-photo/jardin-et-fleur-sauvage/66018283
https://stock.adobe.com/stock-photo/happy-man-shearing-shrub/64667777
https://stock.adobe.com/stock-photo/female-nursery-owner-with-pot-of-flowers/64278557
https://stock.adobe.com/stock-photo/gardener-with-boxwood-posing-at-nursery-or-garden-center/63115925
https://stock.adobe.com/stock-photo/garden-cafe-terrace-with-wicker-chairs-greece/60887406
https://stock.adobe.com/stock-photo/smiling-blonde-woman-phoning-in-a-green-house/57183398
https://stock.adobe.com/stock-photo/portrait-of-man-gardening/55315588
https://stock.adobe.com/stock-photo/summer-restaurant-terrace/54999963
https://stock.adobe.com/stock-photo/kleiner-stadt-garten/54635690
https://stock.adobe.com/stock-photo/gardener-pruning-an-hedge/52918446
https://stock.adobe.com/stock-photo/pose-de-paves-sur-lit-de-sable/51479301
https://stock.adobe.com/stock-photo/employee-watering-plants-with-hose/47141544
https://stock.adobe.com/stock-photo/mother-and-two-children-running-through-garden-sprinkler/43936323
https://stock.adobe.com/stock-photo/rasenroboter-im-garten/41348799
https://stock.adobe.com/stock-photo/elaguer/41347385
https://stock.adobe.com/stock-photo/%E3%82%AC%E3%83%BC%E3%83%87%E3%83%8B%E3%83%B3%E3%82%B0/39781403
https://stock.adobe.com/stock-photo/outdoor/35604235
https://stock.adobe.com/stock-photo/snow-blower/28570632
https://stock.adobe.com/stock-photo/clearing-autumn-leaves-from-gutter-with-trowel/26960918
https://stock.adobe.com/stock-photo/garten/24135660
https://stock.adobe.com/stock-photo/springbrunnen/22730587
https://stock.adobe.com/stock-photo/gartenarbeit-mann-schneidet-hecke/21387921
https://stock.adobe.com/stock-photo/sprinkler-of-water-with-drops/12887868

13. WPML translate customizer fields

Fields from the theme customizer need to be selected from the admin string translation page to enable translations for WPML. 

First please make sure you've got the WPML plugin and the WPML String Translation plugins installed and activated. 

In the steps below we are going to make the 'featured button' translatable for WPML. If you need other fields from the Theme Options panel in the customizer translatable only change step 3 to the specific field.


1. Navigate to WPML -> String Translations and click "Translate texts in admin screens" text link at the very bottom of the page

2. Scroll to the '+ theme_mods_physio-qt' link and click on it

3. Check the checkboxes of featured_button_text and featured_button_url and scroll to the bottom of the page and click the Apply button (please wait till you see the success message)

4. Navigate back to WPML -> String Translations

5. You will find 2 new rows in the table named admin_texts_theme_mods_physio-qt. If you don't see them in the list click on the 'All Domains' select field and select  them from there

6. If you click on the translations link of each the translation fields will appear where you can add your translations.

14. Enable lightbox navigation arrows

To enable the navigation arrows for images inside the lightbox window please follow these steps:

-  Go to Settings -> Media
-  Make sure you enable images for Fancybox (first setting)
-  Scroll a bit down to the 'Gallery' section
-  Switch 'Autogallery' to 'All in one Gallery'
-  Check the box 'Show the gallery navigation arrows'
-  Save the settings

15. Allowed memory size of # bytes exhausted

Do you see an 'allowed memory size exhausted' error? This is one of the most common WordPress errors, and can easily be fixed by increasing the PHP memory limit in WordPress.

Please follow these steps to increase the PHP memory. If you're not familiar with this please ask your hosting provider to increase the PHP memory

16. Translating the theme

You can translate theme text strings (for example the weekdays) on two different ways:

1. Translate theme language file

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 please see this link


2. Translate with the Loco Translate plugin

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 or plugin in the list (this depends if you want to translate a text string from the theme or 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
5. Type the word you want to translate in the search box and click on it when it appear in the list below
6. Write your translation in the most bottom textarea (do not change the default text)
7. Save the settings
8. Navigate to Settings -> General and set the "Site Language" option to the translation language.

You can read this tutorial for more information how to set-up a new translation (screenshots included)

17. Change the featured page widget image and text

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


The Landscaper excerpt text

18. Adding social icons to the bottom footer

The social media icons in the footer (like the theme demo) can be added with some HTML. To add an the icon please navigate to Appearance > Customize > Theme Options > Footer and choose one of the following to add in the 'middle footer text' input field

To add a normal icon:

<i class="fa fa-facebook"></i>

To add a linkable icon:

<a href="http://yourlink.com"><i class="fa fa-facebook"></i></a>

The 'fa-facebook' can be changed to another social media name to display the icon. All available icons can be found here

19. Remove double lightbox window

Because Essential Grid is coming with lightbox functionality you will notice 2 lightbox windows when you click on an image to open inside the grid. To remove the duplicated lightbox window please follow these steps:

1. Navigate to Ess. Grid -> Global Settings
2. Set the "Select Lightbox Type" option to "Disable Lightbox"
3. Save the settings


20. Homepage slider is not visible

If the slider on the homepage is not visible please check the following points:

- Advanced Custom Fields PRO plugin is installed and activated under the Plugin tab.
- The 'Frontpage Fullwidth Slider' (or Jumbotron for Physio) is selected as page template

If all points correctly set but the slider is still not visible please navigate to the theme folder on your server:

wordpress-folder/wp-content/themes/theme-folder/

Please check inside the theme folder if there is duplicated theme folder and delete it.

21. Navigation font doesn't change with Easy Google font plugin

The navigation font need to be adjusted via custom CSS. If you navigate to Appearance -> Customize -> Theme Options -> Custom CSS you can paste the following line(s) in to the textarea:

The parent links:

.main-navigation li a { font-family: Open Sans; }

For the submenu links:

.main-navigation .sub-menu li a { font-family: Open Sans; }

You can change the font-family to your custom one, without using the '' or "" around the names.

22. Configure the theme on HTTPS (SSL certificate)

To use the theme on HTTPS instead of HTTP a SSL certificate need to be installed on your server. The best is to get in touch with your hosting company if you're not familiar with this.

After the SSL certificate is running on your server there are a few steps to take to make WordPress and the theme work correctly.

The first things is to change the Home URL and Site URL under Settings -> General. 

Please make sure before changing this your website is accessible through HTTPS, if this is not the case your website will not be working anymore and these settings need to be restored through FTP.

Please install and activate the Really Simple SSL plugin and active the SSL option via Settings -> SSL.

The last step is to navigate to your website and check if all images are loading correctly. It could be possible that the logo doesn't display. In this case please delete the logo from the customizer Logo panel and select the logo again. The correct path will be used and your logo will show up again.

23. How-to: Update the theme

Please download the latest installable theme version from your account download page on ThemeForest. Click the "Download" button and select "Installable WordPress files only" for the submenu.


* Before you update the theme it is recommend to create a backup of your website with a plugin like UpdraftPlus.


The theme can be updated on three different ways:

1. Envato Market Plugin

    - Download and install the Envato Market plugin
    - Follow the steps in this article to setup the plugin (one time setup)

2. FTP Client

    - 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 folder of the theme you're currently using (e.g. theme-name1 or theme-name2)
    - Unzip the downloaded zip file and upload the folder to the themes folder on your server
    - Investigate if everything 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

3. WordPress Dashboard

It's possible to update the theme on this way but it is not recommend. Because you need to switch themes your widgets and menu's could be assigned to other positions and you need to reorder them. Unfortunately this is a WordPress thing and happens randomly.

    - Please navigate to Appearance > Themes
    - Activate the default WordPress theme (like TwentySeventeen)
    - Click on the thumbnail of the theme you want to update and click 'delete' in the bottom right corner
    - Click on 'Add New' in the top
    - Click on 'Upload File'
    - Upload the freshly downloaded theme zip file
    - Activate the theme


24. Create a gallery grid with Essential Grid

Adding your own posts to the grid

1. Navigate to the Gallery tab and add at least one post

2. Make sure the post have at least one category (not tags) and contain a featured image.

3. Navigate to the Ess. Grid tab and click on the green "Settings" button at the grid you want to use on your page.

Click to enlarge


4. Click the Source tab
5. Set "Post Types" to Gallery
6. Select the categories you would like to show
7. Save the grid

The post is now added to the grid. To dispay the grid on your website add the "Essential Grid" widget to the page builder and inside the widget select the grid you just configured.