The Landscaper
WordPress Theme Documentation

1. Getting Started

1.0. Theme Data

1.1. Intro

If you purchased this theme, thank you! If you have any questions that goes beyond the scope of the theme documentation, feel free to contact support.

1.2. Installation and Updates

1. Envato Toolkit Plugin
   The easiest way to install and update the theme is via the WP Envato Market plugin. With the plugin you can install any theme you've purchased on Themeforest through the WordPress dashboard. You can download the plugin from this link (will start downloading immediately). Install the plugin via Appearance -> Plugins -> Add New -> Upload Plugin.


2. Admin Dashboard
   • Go to Appearance -> Themes
   • Click on Add New at the top
   • Click on Upload Theme at the top
   • 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.

After activating The Landscaper you need to install and activate the required and recommend plugins.
Go to Appearance -> Install Plugins.

If you installed and activating all the required and recommend plugins (WooCommerce to) you will see the following screen:

If you want to install and use WooCommerce just run the installer through press the Let's Go! button.

If you don't need WooCommerce press Not right now button, if an error appear you can ignore this and return to: http://yourwebsite.com/wp-admin/ through your browser address bar.

2. Import Demo Content

The theme comes with a demo content importer which will import the content and widgets with a single click. Follow step 2.1 till 2.3 to set up your website just like the theme demo. Please install and activate all required plugins before you import the demo content !

2.1. One Click Demo Install

You can import our theme demo content with a single click. Go to Appearance -> Import Demo Data and click on the Import Demo Data button. Click the button and just wait a couple of seconds till you see 'All done. Have fun!' message.

2.2. Import Projects

The Essential Grid export file from the theme demo is located inside the theme folder:
thelandscaper/demo-files/essential-grid.json

1. Go to Import/Export
2. Click on the Import element
3. Upload the essential-grid.json file
4. Click on Read File
5. When the read file is done, click on Import Selected Data

2.3. Widget Settings

Now that the content and essential grid are imported we only need to set a couple widgets to the appropriate settings. Please go to Appearance -> Widgets open the Page Sidebar, click on the Custom Menu widget, set the menu to Service Menu and save the widget.

Now open the Footer Widget tab and set the 'Extra Navigation' to Footer Menu and 'Our Serives' to Service Menu.

3. Header

3.1. Logo

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

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

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

3.3. Top Bar

Site Description
On the left side of the topbar you can type a tagline or description. Go to Appearace -> Customize -> Site Title & Tagline 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.

3.4. Navigation

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.

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

5. Pages

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

5.2. Page Builder

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.

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

5.3. Gallery

In the Gallery custom post type you can upload your gallery / projects per post. We used Essential Grid to display the summary of the posts and each thumbnail will lead you to the post itself. You can upload your images, as many as you want, with only a couple clicks.

5.3.1. How to Create a Gallery Post

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

5.3.2. How to Display the Gallery Summary

We used Essential Grid to show the gallery summary (on the Homepage and Gallery page). 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.

5.3.3. "I Don't Want Gallery Detail Pages"

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.

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

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

7. Widgets

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

7.2. Featured Page

This is a great widget to feature a page, with a screenshot and some excerpt text, 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.

7.3. Clients / Partners

This is a little bit of HTML code, change thesrc="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 like in the demo add data-toggle="tooltip" data-original-title="Text in Tooltip" after the src=""

Full Example: <img src="http://qreativethemes.com/tf-images/client2.jpg" data-toggle="tooltip" data-original-title="Text in Tooltip">

7.4. Google Maps

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

7.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 one-column row with the page builder.
2. Go to: Edit Row -> Layout and set row layout to Full Width Stretched.
3. Then go to Design (below the layout tab) and set the background color of the banner and hit the save button
4. Now you need to click Edit on the CTA Widget and fill in your text and buttons (see buttons shortcode)

7.6. Icon Boxes

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

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

8. Plugins

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

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

8.2. Essential Grid

We use the Essential Grid by Themepunch for displaying the projects on the Front Page and Project Page. For a deeper look into Essential Grid we reffer to the official documentation.

8.3. Contact Form 7

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>
                        

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.

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

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

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

8.6. Breadcrumbs NavXT

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

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

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

9. Shortcodes

9.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]

9.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"]

9.3. Dropcap

Their are 4 dropcap styles.

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

[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" cols="Service,Price Per Hour, Project Based Hour Price" data="
Design & Build, $60, $50,
Plastering, $45, $40,
Electrical, $55, $50,
Plumbing, $45, $40"]
                        

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

10. Footer

10.1. Footer Widgets

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.

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

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

10. Extra

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

See collection

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

10.3. Changelog

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

10.4. Support

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

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