1. Getting Started

1.1. Intro

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.2. Upload the theme

You can upload the theme on 3 ways.

  1. Envato Toolkit Plugin
    You can download the Envato Market plugin from this link (will start downloading after click). Upload and install the plugin via Appearance > Plugins > Add New > Upload. After activating the plugin you will notice a new tab in the admin menu. Follow the steps on that page.

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

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

If you uploaded your theme activate it by clicking the Activate button below the theme preview image. Activating The Landscaper Theme

1.3. 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.4. 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.5. 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 installation and import is done. 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 your own logo in that frame's
  3. Upload your logo's

If you scale your own logo recommend height is 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. Top Bar

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

Contact Information
On the right side of the topbar you can add your contact information, such like address, phonenumber, email address, opening hours.

Go to Appearance -> Widgets and open the Header Widgets box. Recommend is to only use the Icon Box, Social Media or Custom Menu widget.

Hide the topbar
If you want to hide the topbar on your site go to Appearance -> Theme Options -> Header and set the topbar to Hide. Click Save in the right top corner.


If you want list your pages in the navigation go to Appearance -> Menu's and select the Primary Navigation

The navigation has also a wide version. Here is a bit more space for more links. If you want to use the wide layout go to Appearance -> Customizr -> Navigation and select the Wide layout.

3. Theme Customizer

Theme Customizer

We created a live customizer options panel in the WordPress Customizer. In this panel you can change the layout colors and some layout settings of the theme.

Go to Appearance -> Customize -> Theme Options

In this panel there are sections where you can change:

  • Logo
  • Header
  • Navigation
  • Main Title Area
  • Breadcrumbs
  • Layout & Colors
  • Blog
  • Gallery
  • Shop
  • Footer
  • 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 Fullwidth Slider
This template has the options for the slider. If you need a slider on a new page you can use this template too. The slider metabox is below the page after selecting this template.

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

With the Page Builder you can easily create pages. Set rows, columns, text and widgets is done in a couple of seconds!

If the Page Builder plugin is active there is a new tab on the page editor, select the Page Builder tab.

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


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 detail pages and show your images from a grid on the same page (like 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 Template there will be a new option box at the bottom of the page where you can add your images and text for each slide.

You can toggle the captions to on or off and set the auto cycle. Below you see the slider with a single slide. Click on Add Slide below the slider and a new row appears.

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.

Since June 2016 Google Maps requires an API key to display the map on new domains. Create your API key on their website and paste the key via Appearance > Customize > Theme Options > Custom > Google Maps API Key


6.5. CTA Banner

With this widget you can create a Call to Action banner with text and buttons. To create a CTA 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 Call to Action Banner 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

We use the Essential Grid by Themepunch for displaying the projects on the Front Page and Project Page. 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

Contact Form 7 Shortcode

We use Contact Form 7 on the contact page. If you create your own form just copy the shortcode and paste them in your page, and create your sidebar

This is the code of the form on our Contact Page:

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

This is the code for the '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>

This is the code of the form on our Appointment Page:

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

This is the code of the 'Ask us A Question' form on our FAQ Page:

<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.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 use the shortcode, the button shortcode has 5 options:

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]

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]


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>
                        
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 doesn't come with 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.

View image collection

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