TheLeader - Multi-Purpose WooCommerce Theme

Compatible with: WooCommerce 2.1.x


You may contact us on: support.8theme.com

Current documentation was created to help you with quick installation and configuration of  TheLeader theme. Please, read it carefully to avoid most of potential problems with incorrect configuration.

Once you will have activated the theme you will need to change some of the pages and settings for optimal performance. That's why, please, do not contact Support center beforehand. Read firstly the documentation, implement all the steps following the instructions and only after that, if the issues persist, contact us.

Before installing TheLeader theme, it is assumed that you have a working WordPress already installed. You should also install WooCommerce plugin for the correct work of our theme. The link for the plugin is provided below. 

For detailed Wordpress installation instructions visit http://codex.wordpress.org/Installing_WordPress

For detailed WooCommerce installation instructions or for more information visit http://www.woothemes.com/woocommerce/

Download the zipped package from ThemeForest and extract to your desktop. In the extracted package you will find TheLeader_WordPress_Theme.zip file which is the WordPress theme.

You can install the theme in two ways:

If you get error:

This usually occurs when either the PHP memory limit or max post size for WordPress has been reached.

The easiest workaround for this is to install theme through FTP (see below).

Alternatively you'll need to change a number of settings either on Wordpress or on your web host. 

Our theme is fully compatible with WooCommerce plugin, but it's not included in theme package. You should install WooCommerce plugin before theme installation:

 

Our theme uses the built-in page builder, that provides the composition of your page easy and handy. You may find the main documentation from plugin developers with detailed information about features and functions in Visual_Composer_documentation folder, and also by watching video tutorial.

In this item we will show only some effects, which were implemented in our theme and most of those you are interested in. They are:

Parallax effect

Create page (Pages > Add New). Ensure the Visual Composer is enabled and Add Section.

Edit the Section you wish to add the parallax background to.

  1. Add a background color if required.
  2. Select a background image from your media library.
  3. Enable border for section if required.
  4. Enable Parallax if you wish to apply the parallax effect.

Video background for page

Ensure the Visual Composer is enabled and add Sections and edit the Section you wish to add the video background to.

  1. Select a poster image from your media library.
  2. Add link to your video.

The next step gives the opportunity to install automatically the Home Page with banners and product sliders, the page Contact Us with contact form shortcode, Blog page and products. But do this at once after installation Wordpress and TheLeader theme, as this function works with database and it can break your settings.

You can make this installation manually as well

Follow the steps below and you will be adding content in no time.


Home page

Our theme uses the built-in page builder, that provides the composition of your page easy and handy. You may find the detailed information about features and functions and author documentation in the folder Visual_Composer_documentation or watch video tutorial. We will provide below the code that are used on our Demo pages.

  1. Create a page called "Homepage".
  2. Set the Sidebar Position (in Page Layout section) to Without Sidebar, Show Page Heading > Disable, Show revolution slider instead of breadcrumbs and page title > select your slider.
  3. Press Visual Composer button and add necessary content

  4. Or add following code in Classic Editor mode and switch to Visual Composer to see blocks and elements that were used.

    Home

    [vc_row][vc_column width="1/1"][vc_column_text]
    [etheme_featured title="Featured Products" limit="15"]
    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_posts_slider slides_date="1" slides_title="1" link="link_post" order="DESC" title="Latest Posts" count="12" posttypes="post" thumb_size="275x170" slides_content="teaser"][/vc_column][/vc_row]		

    Home 2

    [vc_row][vc_column width="1/4"][vc_column_text]
    <p class="a-center">[icon name="refresh" size="68" color="454545" hover="1"]</p>
    <h3 class="a-center">Unique design</h3>
    <p class="a-center">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete.</p>
    [/vc_column_text][/vc_column][vc_column width="1/4"][vc_column_text]
    <p class="a-center">[icon name="shopping-cart" size="68" color="454545" hover="1"]</p>
    <h3 class="a-center">Unique design</h3>
    <p class="a-center">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete.</p>
    [/vc_column_text][/vc_column][vc_column width="1/4"][vc_column_text]
    <p class="a-center">[icon name="star-half-empty" size="68" color="454545" hover="1"]</p>
    
    <h3 class="a-center">Unique design</h3>
    <p class="a-center">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete.</p>
    [/vc_column_text][/vc_column][vc_column width="1/4"][vc_column_text]
    <p class="a-center">[icon name="suitcase" size="68" color="454545" hover="1"]</p>
    <h3 class="a-center">Unique design</h3>
    <p class="a-center">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete.</p>
    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_raw_html]JTNDYnIlM0U=[/vc_raw_html][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_column_text]
    [etheme_featured title="Featured Products" limit="15"]
    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_posts_slider slides_date="1" slides_content="teaser" slides_title="1" link="link_post" order="DESC" title="Latest Posts" count="12" posttypes="post" thumb_size="270x170"][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_raw_html]JTNDYnIlM0U=[/vc_raw_html][vc_column_text]
    <h3 style="text-align: center;">Our clients</h3>
    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/4"][vc_column_text]
    <p class="a-center"><a href="#"><img class="brand" alt="" src="[template_url]/images/assets/client1.png" /></a></p>
    [/vc_column_text][/vc_column][vc_column width="1/4"][vc_column_text]
    <p class="a-center"><a href="#"><img class="brand" alt="" src="[template_url]/images/assets/client2.png" /></a></p>
    [/vc_column_text][vc_single_image img_link_target="_self"][/vc_column][vc_column width="1/4"][vc_column_text]
    <p class="a-center"><a href="#"><img class="brand" alt="" src="[template_url]/images/assets/client3.png" /></a></p>
    [/vc_column_text][/vc_column][vc_column width="1/4"][vc_column_text]
    <p class="a-center"><a href="#"><img class="brand" alt="" src="[template_url]/images/assets/client4.png" /></a></p>
    [/vc_column_text][/vc_column][/vc_row]

    Home 3

    [vc_row][vc_column width="1/3"][vc_column_text]
    <p class="a-center"><img alt="" src="[template_url]/images/assets/banner1.jpg" /></p>
    <h3 class="a-center">Unique design</h3>
    <p class="a-center">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete.</p>
    [/vc_column_text][/vc_column][vc_column width="1/3"][vc_column_text]
    <p class="a-center"><img alt="" src="[template_url]/images/assets/banner2.jpg" /></p>
    <h3 class="a-center">WP Development</h3>
    <p class="a-center">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete.</p>
    [/vc_column_text][/vc_column][vc_column width="1/3"][vc_column_text]
    <p class="a-center"><img alt="" src="[template_url]/images/assets/banner3.jpg" /></p>
    <h3 class="a-center">Video tutorials</h3>
    <p class="a-center">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete.</p>
    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_raw_html]JTNDYnIlM0U=[/vc_raw_html][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_column_text] [etheme_featured title="Featured Products" limit="15"] [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/3"][vc_column_text]
    <h3 class="a-center">HTML widget</h3>
    Born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
    <h5>Contact informations</h5>
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
    [/vc_column_text][/vc_column][vc_column width="1/3"][vc_column_text]
    <h3 class="a-center">Recent Comments</h3>
    [/vc_column_text][et_recent_comments number="3"][/vc_column][vc_column width="1/3"][vc_column_text]
    <h3 class="a-center">Tab widget</h3>
    [/vc_column_text][vc_toggle title="Through weakness of will" open="true" el_class="border-top"]
    But I must explain to you how all this mistaken idea of denouncing pleasure
    
    [/vc_toggle][vc_toggle title="We denounce with righteous indignation." open="false"]
    
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual.
    
    [/vc_toggle][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_raw_html]JTNDYnIlM0U=[/vc_raw_html][vc_column_text]
    <h3 style="text-align: center;">Our clients</h3>
    [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/6"][vc_column_text]
    <p class="a-center"><a href="#"><img class="brand" alt="" src="[template_url]/images/assets/client1.png" /></a></p>
    [/vc_column_text][/vc_column][vc_column width="1/6"][vc_column_text]
    <p class="a-center"><a href="#"><img class="brand" alt="" src="[template_url]/images/assets/client2.png" /></a></p>
    [/vc_column_text][/vc_column][vc_column width="1/6"][vc_column_text]
    <p class="a-center"><a href="#"><img class="brand" alt="" src="[template_url]/images/assets/client4.png" /></a></p>
    [/vc_column_text][/vc_column][vc_column width="1/6"][vc_column_text]
    <p class="a-center"><a href="#"><img class="brand" alt="" src="[template_url]/images/assets/client1.png" /></a></p>
    [/vc_column_text][/vc_column][vc_column width="1/6"][vc_column_text]
    <p class="a-center"><a href="#"><img class="brand" alt="" src="[template_url]/images/assets/client2.png" /></a></p>
    [/vc_column_text][/vc_column][vc_column width="1/6"][vc_column_text]
    <p class="a-center"><a href="#"><img class="brand" alt="" src="[template_url]/images/assets/client3.png" /></a></p>
    [/vc_column_text][/vc_column][/vc_row]
    
  5. Go to Settings -> Reading, and change the "Front page displays" setting to "A static page", set the front page to your homepage.

Blog

Create a page called "Latest News" (or whatever you want your blog called) and leave the page template as default.

Go to Settings -> Reading, set the Posts page to your just created blog page.

You can adjust Blog page layout in Theme Options > Blog Layout).

Products and categories import

You may import XML file, where some demo data from our site are, which can facilitate your work with theme. XML file (theleader.woo_commerce.xml) you can find in the archive.

For this you need:

  • Navigate to Tools -> Import and install WordPress import plugin.
  • Select the XML file and upload it.

Do not forget: 
- Folder wp-content/uploads should have permissions 777. 
Download and import file attachments should be checked. 

 

Before you begin the TheLeader updating process, we recommend to do the backup of all your files!

You can update theme through FTP:
  1. Download the zipped package from ThemeForest and extract to your desktop.
  2. In the extracted package you will find archive TheLeader_theme.zip, which is the WordPress theme.
  3. Extract zip file and upload the extracted folder to /wp-content/themes/ folder on your server with overwriting.

Important!

Do not forget to re-save your TheLeader options after upgrading the theme. Navigate to admin panel -> Theme Options and hit Save changes.

TheLeader supports custom WordPress menu. Navigate to WP Admin -> Appearance -> Menus page and create menu.

There is possibility to use different menu for desktop (Main menu) and mobile (Mobile menu) versions. Select the newly created menus on the Manage Locations tab as it mentioned on screenshot and press Save button.

Also you can use image in menu.

To add Image add Links subitem to your item. Fill in fields:

URL - destination url of your image;

CSS Classes - should be image-item ; 

Description - insert path to your image.

Image always should be the last subitem!

To activate CSS Classes and Description, open Screen Options and select these items.

 

The theme supports Revolution Slider, the installation of which would be provided for you after theme activation.

After that you may create the sliders and use them on the site according to the plugin documentation. We have included folder called "documentation_Revolution_Slider" that contains the documentation from the authors of the slider. Please, refer to it for further information about slider settings. Slider can be added to any page.

Revolution Slider

To setup Revolution Slider follow the next steps:

Pay attention for the slider to be full width on the home page, you need to select necessary slider from Show revolution slider instead of breadcrumbs and page title drop-down list during creating home page. Also you may insert slider instead of breadcrumbs on any other page.

General

Color Scheme

Typography

Header

Shop

Products Page Layout

Single Product Page

Blog Layout

Portfolio

Contact Form

Responsive

Custom CSS

All the CSS styles placed in this file will not be lost after upgrading the theme in the future!

Import/Export

First of all allow the registration. Navigate to Settings -> General -> Membership and mark Anyone can register. Then create Register Page and set the page template (under page attributes) to Custom Registration Page.

If you want to receive feedback from your visitors, having a Contact Us page on your site is an easy way to achieve that.

Go to Pages > Add new and create a page called "Contact Us" (or whatever you want your contacts page called) and set the page template (under page attributes) to Contact Page. It inserts form for feedback on page. Add other content for page. We have used the following:

<h3>Place for nice title</h3>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
<h6>Contact informations</h6>
30 South Park Avenue
San Francisco, CA 94108
USA
<strong>Phone:</strong> (123) 456-7890
<strong>Fax:</strong> +08 (123) 456-7890
<strong>Email:</strong> <a href="#">contact@companyname.com</a>
<strong>Web:</strong> <a href="#">companyname.com</a>

To choose contact page layout, add your email for contact form, navigate to Theme Options > Contact Form.

You may also use our theme as a Portfolio. It is the perfect way to share your artwork, photography, or anything visual you want to show off.

Create Portfolio Page and set the page template (under page attributes) to Portfolio. It will be the main page where will be displayed all your projects.

Then go to Theme Options -> Portfolio and set necessary options.

You may create New Projects at Portfolio -> Add New.

There are several shortcodes which can be used in TheLeader theme inside posts and pages. You can look at examples, grab the code and learn more on each shortcode’s individual page of our demo here.

You can create additional sidebars to add your own content and functionality and to use different sidebars on different pages (posts). Navigate to Appearance > Widgets. Fill in Custom Sidebar title and press Add Sidebar button. See screenshot.

Place necessary widgets into newly created sidebar. Then create page (Pages > Add New) and on the right side of the Page Layout area choose Sidebar Position, necessary Sidebar Width and desired Widget Area.

There are 15 default widget areas, which you can use to add your own content and functionality. There are 8 widgets in the sidebars, 10 in the footer areas.

Main sidebar:

- Text widget with content
- Categories
- 8theme - Recent Posts

Shop sidebar:

- WooCommerce product categories
- Text widget with content
- WooCommerce - Price filter
- WooCommerce Layered Nav (Attribute: size; Display Type: List)
- 8theme - Featured Products
- 8theme - Recent Posts

Single Product Page sidebar:

- WooCommerce product categories
- WooCommerce Random products

Right Side Panel area:

- 8theme Flickr photos
- Text widget with content
- 8theme - Recent Posts
- Meta

Footer 1 Widget Area:

- WooCommerce On-Sale widget

Footer 2 Widget Area:

- WooCommerce Recent Comments

Footer 3 Widget Area:

- WooCommerce Top Rated Products

Footer 4 Widget Area:

- Testimonials

Footer 5 Widget Area:

- Text widget "ABOUT COMPANY" with following code:

<div class="with-map">
 <p>Mauris adipiscing mauris fringilla turpis interdum sed pulvinar nisi malesuad.</p>
 <p>30 South Avenue, San Francisco, CA 94108<br>
  <span class="phone">(+48) 798 798 798</span>
 </p>
</div>

How to add Twitter and Facebook like buttons read here:

- Twitter
- Facebook

Footer 6 Widget Area:

- Text widget "ABOUT OUR SHOP" with content

Footer 7 Widget Area:

- 8theme - Recent Posts

Footer 8 Widget Area:

-8theme - Flickr Photos

Footer Copyrights:

- Text widget with following code:

<p><img src="YOUR_PATH/wp-content/themes/theleader/images/logo-small.png" class="logo-small">Wordpress DEMO Store. All Rights Reserved.</p>
Footer Links:

- Text widget with following code:

<ul class="links">
 <li><a href="#">SITE MAP</a></li>
 <li><a href="#">SEARCH TERMS</a></li>
 <li><a href="#">ADVANCED SEARCH</a></li>
 <li><a href="#">CONTACT US</a></li>
</ul>
Twitter Feed widget

You may display your Twitter feed in the sidebar to bring more dynamic content into site, promote your Twitter feed and get new followers by using "8theme - Twitter Feed" widget.

The translation file you can find in languages folder (/wp-content/themes/theleader/languages). Edit the .pot file using POEdit, use the translation field to make replacements. Read here how to do it right.

From the file menu, save file with your language name e.g de_DE.po into languages folder. It will generate both a .po and .mo file for your translation.

Next edit wp-config.php located in the root folder of wordpress and define the WPLANG prefix with your language name which should be similar to the translation file name.

TheLeader fully supports Child Theme. 

A WordPress child theme is a theme that inherits the functionality of the parent theme. With child theme you can make modification or add additiona functionality to parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes.

You may read how to create child theme here http://codex.wordpress.org/Child_Themes