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 the theme

1.1. Upload the theme

You can upload the theme via:

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

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

After uploading the theme, hover the thumbnail image and click 'Activate'. Activating The Landscaper 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
  • 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.

1.4. Import Essential Grids

You can find the Essential Grid file inside the installable theme folder. Click the 'demo-files' folder there you will see the 'essential-grid.json' file.

Full path to find the file: thelandscaper/demo-files/essential-grid.json

  1. Go to Ess. Grid -> Import/Export
  2. Click on the Import panel
  3. Upload the essential-grid.json file
  4. Click on Read File (see screenshot below)
  5. When the read file is done, click on Import Selected Data

Essential Grid Demo Import
Import Selected Dats

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

If you scale your own logo recommend height is 90pixels. Please leave this retina logo empty if you don't have a logo that is twice the size of the default, else this will result in a to small logo on retina screens.


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

Topbar left text
On the left side of the topbar you can type a tagline or description.
Go to Appearace -> Customize -> Site Identity to change it.

Topbar right contact information
To edit the contact details in the topbar please navigate to Appearance -> Widgets and click on the 'Header' panel on the right side of the screen. In this panel you will find the Icon Box and Social widget.


To edit the main navigation of the htmee please navigate to Appearance -> Menu's and select the 'Primary Navigation' from the select field.

3. Theme Customizer

Theme Customizer

In the theme customizer you can change the colors and settings of the theme. You can find the customizer options via Appearance > Customize > Theme Options.

In this panel there are sections where you can change:

  • Logo
  • Header
  • Navigation
  • Slider
  • Page Header
  • Breadcrumbs
  • Layout & Colors
  • Blog
  • Single Gallery
  • Shop
  • Footer
  • Typography
  • Other
  • Custom

4. Pages

4.1. Page Templates

Page Templates

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

Front Page Fullwidth Slider
This template include the full width slider, seen on the homepage of the theme demo. To add/edit the slides please scroll below the page builder grid where you will find the 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

Page Builder Tab

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

If you're looking for some additional information about the page builder please visit the plugin website


In the Gallery tab you can upload your gallery / projects per post. With the Essential Grid we display the featured image of each post. Each thumbnail will lead you to the post itself. You can upload your images, as many as you want with a couple of clicks.

  1. Go to the Gallery tab in the WordPress admin area and click on Add New Gallery
  2. Enter a title, add some text if you want, set the featured image and select a category for the post
  3. If you scroll a bit down you will notice the 'Gallery Image' optionbox.
  4. Set the layout to Split or Full width, and set the image columns
  5. And as last, drag and drop your images into the gallery images field
  6. Publish your gallery

If you imported the demo content the summary will automatically show your newest gallery post. If dont used the demo content you need to create a new grid. Follow these steps below:

  1. Go to Ess. Grid in the WordPress admin area
  2. Click the blue 'Create New Ess. Grid' button
  3. Fill in a Name and Alias for your grid
  4. Then click the Source Tab on the top
  5. Set Post Type to Gallery
  6. Select the gallery Categoriesyou want to show
  7. If you would like to set some custom grid options click the Grid Settings tab.
  8. When you're done click the green floppy disk button on the right top of your screen (Save Grid)
  9. Now you can use the Essential Grid Widget on a page and select your grid.

If you dont want to use the single gallery pages and rather show your images from the grid (seen on the 'gallery lightbox' page in the theme demo) you create a gallery post with only a featued images, and use the Gallery Lightbox Essential Grid. This skin will pop up the images in a lightbox instead it will take you to the detail page.


4.4. Blog

You can choose from two blog layouts. The default: List Layout and Grid Layout. If you go to Pages -> and click on the Blog page you will notice a metabox where you can set the layout. The Grid layout can be set in 1 to 4 columns.

5. Slider

When you choose the Front Page Fullwidth Slider there will be a new option box at the bottom of the page where you can add your images and text for each slide.

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

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. A button will be visible to add your own.

To add a new slide click on the 'Add Slide' button in the bottom corner of the metabox

Front Page Slider

6. Widgets

6.1.Visual Editor Widget

With the Visual Editor you can easily write some content, set some basic typography styles to it, or just add some images.


This is a great widget to feature a page, we used it for displaying the service pages.

Change the image and text
The image of the 'featured page' is just the normal Featured Image of that specific page.

You can change that image if you go to Pages -> Edit Specific Page on the right side of the screen.
The text is written in the Excerpt field at the bottom of the page.

Featured Page Widget

6.3. Clients / Partners

This is a little bit of HTML code, change the src="image.jpg" to your image URL.

<div class="client-logos">
    <div class="row">
        <div class="col-xs-12 col-sm-4">
            <img src="http://qreativethemes.com/tf-images/client1.jpg">
        </div>
        <div class="col-xs-12 col-sm-4">
            <img src="http://qreativethemes.com/tf-images/client2.jpg">;
        </div>
        <div class="col-xs-12 col-sm-4">
            <img src="http://qreativethemes.com/tf-images/client3.jpg">
        </div>
        <div class="col-xs-12 col-sm-4">
            <img src="http://qreativethemes.com/tf-images/client4.jpg">
        </div>
        <div class="col-xs-12 col-sm-4">
            <img src="http://qreativethemes.com/tf-images/client5.jpg">
        </div>
        <div class="col-xs-12 col-sm-4">
            <img src="http://qreativethemes.com/tf-images/client6.jpg">
        </div>
    </div>
</div>

If you want to add the tooltips you can use data-toggle
<img src="http://qreativethemes.com/tf-images/client2.jpg" data-toggle="tooltip" data-original-title="Text in Tooltip">


6.4. Google Maps

With the Google Map widget you can easily display your location on a customizable maps. Set the lattitube and longtitude of the location and your done. You can find the lat and long of your location on this website.

Google Maps requires an API key. Create your API key here and use the key via Appearance > Customize > Theme Options > Custom > Google Maps API Key

Please follow this guide to create the maps API key.


6.5. Call to Action Banner

With this widget you can create a Call to Action banner with text and buttons. To create a call to action banner like in the theme demo follow these simple steps:

  1. Add a single column row
  2. Go to Edit Row -> Layout and set row layout to Full Width Stretched
  3. Then go to Design panel and upload the background imageo 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

There are 2 type of icon boxes; Big Icon and Smaller Icon. You can easily choose them by a select option


6.7. Widget Styles

Some content elements (used in theme demo) require a extra class inside the widgets attribute field.

  • Text Box left from services (homepage)

    Use the class: border-box

  • Project Galleries title (homepage)

    Use the classes: text-center no-border white

  • Request A Free Quote box (homepage)

    Use the class: content-box text-center

  • Landscaping Awards title (homepage)

    Use the class: text-center no-border

See the screenshots below where to enter these classes

7. Plugins

The Landscaper comes with some plugins. Here we describe some who (maby) needs some explanation.

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. Essential Grid

The Essential Grid plugin is used for displaying the gallery posts in a grid. Essential Grid is an all-purpose grid building solution for WordPress that allows you to display various content formats in a highly customizable grid. For a deeper look into Essential Grid please take a look in to the official 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.

If you deleted the default forms here are the snippets you can copy/paste to recreate them:

Contact Page form:

<div class="row">
    <div class="col-xs-12 col-md-4">
        [text* your-name placeholder "Name"]
        [email* your-email placeholder "E-mail Address"]
        [text your-subject placeholder "Subject"]
    </div>
    <div class="col-xs-12 col-md-8">
        [textarea your-message placeholder "Message"]
        [submit class:btn class:btn-primary placeholder "Send Message"]
    </div>
</div>

Request A Free Estimate form:

<div class="request-quote-form">
    <div class="row">
        <div class="col-xs-12 col-md-6">
            [text* your-name placeholder "Your Name"]
            [email* your-email placeholder "Your Email"]
            [select menu-490 "Landscape Maintenance" "Enhancements Services" "Irrigation Service" "Snow Removal" "Other Services"]
        </div>
        <div class="col-xs-12 col-md-6">
            [textarea your-message placeholder "Your Message"]
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            [submit "Request Quote"]
        </div>
    </div>
</div>

Make an Appointment form:

<div class="row">
    <div class="col-xs-12 col-md-6">
        [text* first-name placeholder "First Name"]
    </div>
    <div class="col-xs-12 col-md-6">
        [text* last-name placeholder "Last Name"]
    </div>
    <div class="col-xs-12 col-md-6">
        [text* your-address placeholder "Address"]
    </div>
    <div class="col-xs-12 col-md-6">
        [tel* your-phone placeholder "Phone Number"]
    </div>
    <div class="col-xs-12 col-md-6">
        <p>Date of Appointment * [text* the-date placeholder "MM-DD-YY"]</p>
    </div>
    <div class="col-xs-12 col-md-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>
<div class="row">
    <div class="col-xs-12 col-md-6">
        <p>I am interested in:<p>
        <p>[checkbox services use_label_element "Lawn & Garden Care" "Planting & Removal" "Irrigation & Drainage" "Snow & Ice Removal" "Spring & Fall Cleanup" "Stone & Hardscaping"]</p>
    </div>
    <div class="col-xs-12 col-md-6">
        <p>Additional Message<p>[textarea extra-message placeholder "Write your message"][submit class:btn class:btn-primary placeholder "Make Appointment"]
    </div>
</div>

Ask a Question form:

<div class="ask-a-question-form">
    <div class="row">
        <div class="col-xs-12 col-md-6">
            [text* your-name placeholder "Full Name"]
        </div>
        <div class="col-xs-12 col-md-6">
            [email* your-email placeholder "E-mail Address"]
        </div>
        <div class="col-xs-12">
            [textarea* your-message placeholder "Message"]
        </div>
        <div class="col-xs-12">
            [submit class:btn class:btn-primary class:center-block placeholder "Send Us Your Question"]
        </div>
    </div>
</div>
                        

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 screenlink 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

The Landscaper supports WooCommerce. If the WooCommerce plugin is installed and activated on a fresh WordPress installation you will see the WooCommerce installer. Go through it if you want to use WooCommerce else skip all the steps or go back to the Admin Area through the browsers address bar

If you want to configurate the WooCommerce pages go toWooCommerce -> 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.


7.7. TwentyTwenty

This plugin is used for the before and after image slider. Add the visual editor widget (or use it in the default editor from WordPress) and type the following shortcode: [twentytwenty] [/twentytwenty] place your cursor between the shortcode and upload 2 images with both the same size.


7.8. Max Mega Menu (Compatible)

From theme version 1.3 we made the theme compatible with the Max Mega Menu plugin due customer requests. The plugin does not come as default in the list of required and recommend plugins but need to be installed separately.

7.8.1. Import Menu Themes

We created a Max Mega Menu skin for each of these layouts. After installing and activating the Max Mega Menu plugin go to: Mega Menu > Tools

Then open up the installable theme folder and navigate to the demo-files -> max-mega-menu folder where you will see 3 files.

Open the menu theme you want to use with a text editor (such as notepad) and copy the code you will see. Go back to the open WordPress page and paste the code in to the 'Import Theme' textarea:

Max Mega Menu Theme Import

7.8.2. Enable the Mega Menu

The Max Mega Menu only works with a single header layout through the theme. Please make sure the mega menu theme isset to the correct header layout in the theme customizer

The following step is to enable the mega menu so you can use it in the theme. Please navigate to: Appearance > Menu's. Click the checkbox of 'Enable' and hit the 'Save' button.

Enable Max Mega Menu

If you hover over your menu links you will notice the small blue 'Mega Menu' button, when you click on it a modal will open where you can create your mega menu for each specific menu link.

If you want more information about the Max Mega Menu plugin please see the plugin documentation.

8. Shortcodes

8.1. Buttons

To add a button with the shortcode add [button href="#link"] Text [/button]

The shortcode has 7 parameters you can use:

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]

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]

Edges: Makes the edges of the buttons rounded Example: [button edges="rounded"]Text[/button]

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

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

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


See the above attributes working on our theme demo


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 librabry


8.3. Dropcap

Their are 4 dropcap styles.

Style 1: [dropcap style="style1"]T[/dropcap]his will make the letter T a dropcap.

Style 2: [dropcap style="style2"]T[/dropcap]his will make the letter T a dropcap.

Style 3: [dropcap style="style3"]T[/dropcap]his will make the letter T a dropcap.

Style 4: [dropcap style="style1" titlte="This is the title next to the dropcap"]T[/dropcap]his will make the letter T a dropcap.


8.4. 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.5. Tables

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

Table Style Default

[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 Style Boxed

[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"]

These table shortcodes can only contain plain text. If you want to use icons or links in it you'll need to use the regular HTML tables, see the snippet below:

<table class="qt-table default">
    <thead>
        <tr>
            <td> Subdivision/Town</td>
            <td> Zip Code</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> Abbott Glen</td>
            <td> 40014</td>
        </tr>
        <tr>
            <td> Academy Ridge</td>
            <td> 40245</td>
        </tr>
        <tr>
            <td> Aikenshire</td>
            <td> 40245</td>
        </tr>
    </tbody>
</table>

8.6. Embed Videos

To embed a YouTube or Vimeo video into your website please use:
[embed]http://youtube.com/link-to-video[/embed]

Footer Widget Amount

The Top Footer contains a widget area. Go to Apearance -> Widgets to edit the Footer Widgets.

If you go to Appearance -> Customize -> Theme Options -> Footer you can select how many widgets you want to display.

So for example if you set Number of Columns in the Live Customizer to 4 you can place 4 widgets in the Footer area. If you want to hide this section select 0.


Bottom Footer Text

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

The Landscaper supports WPML. If you bought WPML install and activate the following plugins:

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

If you activated the plugins WPML guide you through the installation to configure your multilingual website.


10.2. Manual Translation

There is a .pot file included with the Theme. You can find the file here: thelandscaper/language/thelandscaper.pot

See this tutorial by WPZOOm for translating the .pot file

11. Extra

11.1. Demo Images

The images on the theme demo are not included in the download package because of copyrights. All the images are replaced with placeholders.

We created a collection where you can easily find all the used images here.

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 Landscaper?

  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 Landscaper theme, move your mouse over the stars and click.
  5. Rate The Landscaper