benco Documentation

benco WooCommerce Responsive Theme Documentation

benco responsive theme documentation by RoadThemes

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Getting Started

Guide Video

What these video before you start with this theme, they provide basic steps to make everything easier.

***Install theme:

Installing Theme

Once you've downloaded the installation file on ThemeForest, extract it and locate a file called benco.zip. You can install the theme by using one of two installation methods:

  1. WordPress upload - This is probably the simplest way for most users. Here are the steps you need to take:
    1. Login to WordPress admin
    2. Go to Dashboard> Appearance > Themes > Add New > Upload Theme
    3. Click on "Choose File" and select benco.zip
    4. Click on "Install Now"
  2. FTP upload - If you wish to install via FTP, here are the steps you need to take:
    1. Using FTP client, login to the server where your WordPress website is hosted
    2. Using FTP client, navigate to the /wp-content/themes/ directory under your WordPress website's root directory
    3. Using FTP client, upload the Theme directory to themes directory on remote server

Once installation is complete, your Theme theme will be ready to use. You should now see "benco" appears in the WordPress themes manager panel.

Installing Plugins

We need to install some plugins from WordPress plugins repository

Install 3 premium plugins: WPBakery Page Builder, Mega Main Menu, Revolution Slider.

*** Note: If 3 these plugins are installed, you don't need to install them.

For premium plugins, please open the "plugins" folder in the theme package to see plugins file. Extract the zip file for each plugin to get the installable file. Go to Plugins=>Add New to upload & install plugins.

Watch the intro video above to see in details.

Importing Demo Content

We can import content for pages, posts, menu, projects, contact form, testimonials...

=> Login to your WordPress dashboard, Click Import Roadthemes => Click on Click here to import demo => Wait some minutes => See The data have imported succesfully => Finish

Updating Theme

Auto-Update Feature

You can now enable the Auto-Updating feature for Theme. To do this, please first make sure that you have the Envato WordPress Toolkit plugin installed.

After you have installed and activated the Envato WordPress Toolkit, please go to Envato Toolkit from your dashboard and enter your Marketplace Username and API Key. You can find your API Key by logging into your profile on Themeforest and navigating to Profile > Settings > API Keys

When you have entered your Marketplace Username and API Key and clicked Save Settings, a new tab will appear at the top of the screen named "Themes". Click on this tab to see all the themes you have purchased. If there is an update available for a theme, you will be notified here. To update your theme, just click on the "Update Automatically" link. 

Please note that each time you use the Auto-Update feature to update the theme, a backup file of the old version of the theme will be stored on your server in ".../wp-content/envato-backups".

Manual Update

You can update your theme manually by performing the following steps:

  1. Download the latest theme zip file from ThemeForest
  2. Extract it and locate benco.zip
  3. Extract benco.zip and open the benco/readme.txt file
  4. Replace files which listed in the readme.txt file

Using Theme

Once you've installed Theme, you can start building your site.

Setting Up the Header

One of the first things you might want to do is to set up the header area. This section contains the header layout, welcome message, top bar, mobile menu, vertical menu, sticky header and other options.

=> To set it up, go to WPBakery Page Builder=>Templates => Header 1 (Header 2/Header 3..) -> Edit.

=> Go to Theme Options - Header to select a header layout.

***Logo: Now let's add a logo. In WPBakery Page Builder=>Templates=>Header 1 (Header 2/ Header 3..) you click to Single Image at logo to edit, then select image from library or upload new logo. You should now have a visible logo in your header area.

***Sticky Logo: In WPBakery Page Builder=>Templates=>Header 1 (Header 2/..) you click to Main Menu to edit, then select image from library or upload new logo. You should now have a sticky logo in your header area when scrolling page.

Menu Creation

To create a menu, go to Appearance - Menus from the admin panel. Click on Create a new menu. Enter a name for your menu, and then click on Create Menu.

Every page that you've created up until now will be listed in the section on the left called Pages. Simply check the ones that you want added to the menu, and then click on the "Add to Menu" button. Once added, you can click and drag the menu items to rearrange them, or nest them one under the other.

Config locations of menus like demo:

Go to Appearance -> Menus -> Manage Locations:

=> To set it up, go to WPBakery Page Builder=>Templates=> Footer 1 (Footer 2/..) to edit.

=> Go to Theme Options - Footer to select a footer layout.

Building Pages

To create a new page, go to Pages - Add New from the admin panel. Enter a title for your page in the text field near the top of your screen. Then choose the "Full Width" template for your page in the section on the right called Page Attributes. This will allow you to have sections on your page that go across full width of the screen.

Now let's start adding elements to your page. Make sure that you're in the backend editor. If the blue button on the top left says BACKEND EDITOR, click it to enable the WPBakery Page Builder. Once you're in backend, the button will say CLASSIC MODE. You can now click on "Add Element" and start building your page.

Finally, click the "Publish" button in the upper right section of the page. (If you made some changes on already published page, "Update" button will appear.

Set a page as home page

To set a page as home page:

=> Go to Settings - Reading -> Select A static page : At Homepage : Select home page.

****Example: To set Home6 to become your homepage:

=> Login admin -> go to Settings - Reading :

=> Click Save Changes to save your changes

 

Additional Notes

Font Icon Pack

Please note that Theme comes with font icon pack: Font Awesome. You can see an overview of all the available icons in this icon packs at the following link:

  1. Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/

 

 

 

 

Theme Options

You can access Theme Options from the WordPress admin panel. The settings found here are applied globally and will affect all pages of the site.

General

This section allows you to set up general settings for your site. We can change body background, content background and show/hide the back to top button.

Colors

This is where you can change colors for your website. We can change the primary color, sale label background color & text color, link color, text selected color and background. Some elements in special area has different color from this panel, we can use custom css to change colors.

Header

This section allows you to set up the header area. The first choice to change the header layout. Change the header text and link color, background of dropdown menu.

Sticky header:

We can turn on or off the sticky header. Change background for the sticky header, it supports transparent background color.

Top bar:

In this area, we can change text color and link color for top bar.

Menu:

We can change menu label. The submenu background is applied for the main menu (horizontal menu) in desktop view.

Categories Menu:

We can change categories menu label. The sub categories menu background, number of items is applied for the categories menu (categories menu) in desktop view.

Fonts

In this area, we can change font for text, heading, menu, price. There are some options to select for each font like font-family,font weight and style, font size, line-height, color. We can use default options or change any font like you need.

If we want to use default options, click on "Reset Section" button. Watch the video below, we change some options then rpresiden default.

Layouts

In this tab, we can select page banner, select page layout is full width or box, select theme preset and turn off the style switcher.

Preset: There are many presets to select, if we select a presets (example: Preset 2) the theme uses pre-defined fonts and colors in that preset. If we select "Use Options" then the theme uses fonts and colors from "Colors" and "Fonts" tab.

Brands Logos

This section allows you to upload brands log and configure the options for the brands slider. Click on "Add Slide" to add more logos.

Sidebar

This section allows you to change position of sidebars to left or right side. We can creat unlimitted sidebars for pages and posts. Go to edit page/post to select custom sidebar.

Product

This section allows you to change the layout for the shop page. We can change how the products appear in grid view or list view. We have products per page, product columns. We can upload banner image of shop page.

Product page:

This area allows you to change options for the product page. We can change number of related products.

Note: If your website has a line in the top, you have to remove this.

For social sharing code, go to http://www.sharethis.com or http://www.addthis.com/ then follow guide on website to create sharing button and get code. Remember to select "website", not "WordPress".

Quick View:

This area allows you to change the text link on the quick view window.

Blog

This section allows you to change the text on header of blog page "Blog", select blog layout, change read more text and the excerpt length.

Latest posts carousel:

This area allows you to change options for the latest posts carousel on home page.

Testimonials

This area allows you to change options for the testimonials carousel on home page.

Error 404 page

This section allows you to upload image, background for the error 404 page.

Less Compiler

This section allows you to turn on/off the less compiler. In the theme, I used .less files in the "less" folder to generate .css files. Turn off the compiler after you finished changing colors, fonts to save server resources.

Blog

Blog Posts

To create a new blog post, go to Posts - Add New from the admin panel.

  1. Enter a title for your post in the text field near the top.
  2. Next, at the right side of your screen, in the section called Format, choose a format for your blog post.

Let's go over the possible options:

  • Standard - This is the default blog format. You can start adding content with the WPBakery Page Builder.
  • Image - This is same as the default format, but it uses the content-image.php to display post. You can edit file to change layout of this post type.
  • Gallery - This post type has a gallery, you can add shortcode to show a slider at Post featured content.
  • Video - This post type has a video player, you can add shortcode to show YouTube or Vidmeo at Post featured content
  • Audio - This post types has a audio player, you can add shortcode to show a player at Post featured content
Now it's time to categorize this post.
  1. Under Format, in the section called Categories, select the categories that you wish to add this post to. Alternatively, if you'd like to create a new category, click on "+ Add New Category." A text field will unfold where you can enter a name for the category.
  2. Then click on "Add New Category".
  3. Once you've checked the categories where you want this post to go to, click the "Publish button".
  4. Under the Categories section are the Tags and Featured Image sections. Here you can add tags to your post, and upload an image to be displayed for this post on blog list pages, respectively.

Now that you've set up your blog post, let's go over the custom fields.

Note that most of them are the same custom fields you'll find when creating standard pages.

 

 

 

Pages

When creating a new page, one of the first things you might want to do is to assign an appropriate template for it. To do this, go inside the page backend and locate the section on the right called Page Attributes. Theme comes with a variety of templates to choose from:

  • Default Template - Choose this one if you wish to create a standard page with a sidebar.
  • About page - This template to use is for your "About Us" page.
  • Front Page Template - This is the template to use for your "Home" page.
  • Full Width - Choose this one if you wish to create a standard page with elements that go across full width of the page, no sidebar.

Home Page

To set homepage -> go to Settings - Reading -> Select A static page : At Homepage : Select home page.

****Example: To set Home6 to become your homepage:

=> Login admin -> go to Settings - Reading :

=> Click Save Changes to save your changes

 

Blog Page

Go to Pages - Add New to create an empty page, enter page title is "Blog".

Go to Settings - Reading -> Select A static page : At Posts page : Select your blog

Contact Us Page

Go to Pages - Add New to create a new page, use the sample content from the "contact.txt" file. Select page template is "Full Width".

Portfolio Page

Go to Pages - Add New to create an empty page, enter page title is "Portfolio".

Create posts in Ess. Grid Posts. Create Essential Grid in Ess. Grid then copy shortcode, paste into page content.

Shop Page

To create pages for WooCommerce, click on "Run the Setup Wizard" button in the back-end. Follow all steps to setup WooCommerce.

About Us Page

Go to Pages - Add New to create a new page, use the sample content from the "about-us.txt" file. Select page template is "About page".

Other Pages

Go to Pages - Add New to create a new page, use WPBakery Page Builder to add elements for the pages, change page template to get full width or sidebar page.

WooCommerce

Theme comes with WooCommerce integration, which allows you to build an online shop. For more information on installing and configuring WooCommerce, please visit this page:

http://docs.woothemes.com/documentation/plugins/woocommerce/getting-started/

In order to setup WooCommerce with our theme, please perform the following steps:

  1. Go to Plugins - Add New from the admin panel.
  2. Type "WooCommerce" in the search field.
  3. Locate "WooCommerce - excelling eCommerce" in the search results and click on "Install Now".
  4. Once installation is complete, click on "Activate Plugin".
  5. You should first set the product image sizes in order to achieve the same look that we did. Go to WooCommerce - Settings -> Products tab -> Click Go see them in action here. -> Select Product Images

  6. Enter the same values that we did
  7. *** You also set product catalog:

    => Set fields according to you. If want your theme like demo, set as:

 

Product Tabs

To create a products tabs slider on home page => Go to Pages -> All Pages-> Select home page -> Add new row in WPBakery Page Builder, insert a Text Block then add a heading 3 text for the tab title. Add shortcodes of WooCommerce to show products.

Click on the pencil icon of the row then add extra class start with "home-tabs"

  1. #Home1: home-tabs layout1 -- show 4 items
  2. #Home4: home-tabs layout4 -- show 4 items
  3. #Home5: home-tabs layout5 -- show 4 items
  4. #Home6: home-tabs layout6 -- show 4 items

Products Images

When editing a product, we can upload a cover image and over images.

Products Image Zoom

Go to YIT Plugins=>Zoom magnifier to select options for the zoom feature on the product page.

Products Wishlist

Go to YIT Plugins=>Wishlist to change settings for the wishlist, we don't require any settings there but we recommend to change text, select social networks.

Products Compare

Go to YITH Plugins=>Compare then select settings like this

Sliders

Please read the documentation on Revolution Slider first http://www.themepunch.com/revslider-doc/slider-revolution-documentation/

You can import sample sliders, we have some sample slider in the "slider-sample" folder.

Widgets

To change widgets, go to Appearance - Widgets. Read the Getting Started - Import Widgets in this documentation to know how to import widgets.

Newsletter

In this theme, we use MailChimp plugin to make the newsletter system. Navigate to Mailchimp for WP. First, you need to enter API key and select list.

After that, go to Forms to edit form

This is the sample code:

<input type="email" name="EMAIL" placeholder="Enter your email address..." required>
<button type="submit">Subcribe!</button>

You can change other settings for message, appearance in other tabs

Testimonials

Go to Testimonials - Add New to create a new testimonial. Enter title, description and upload images.

FAQ where to get help, support and additional information

We hope this manual was useful for you and helped you to install, to edit the template and to resolve your issues.

1. Why blank white page and less compiler error?

In this theme, it uses the less compiler function to generate css files from .less file. If your server has small PHP memory, it may show the error. Please try to increase the PHP memory like this:

1. Edit your wp-config.php file and enter something like:

define('WP_MEMORY_LIMIT', '256M');
WordPress memory can be different to the server – you need to set this regardless of server memory settings

http://codex.wordpress.org/Editing_wp-config.php#Increasing_memory_allocated_to_PHP

2. If you have access to your PHP.ini file, change the line in PHP.ini
If your line shows 32M try 256M:

memory_limit = 256M ; Maximum amount of memory a script may consume (256MB)

3. If you don’t have access to PHP.ini try adding this to an .htaccess file:

php_value memory_limit 256M

4. If none of the above works then talk to your host.

 

2. Why can't I save my menu?

Cause of this problem is small value of the "max_input_vars" option in the configuration of your server (host). You must increase value of the "max_input_vars". You must to set a value that is twice as large of the current value.

  • Most hosts have the opportunity to change this value in the "Host Admin Area".
    Example:
    If currently you have max_input_vars = 1000
    You need to set max_input_vars = 2000 (or more)

  • You can try to change this value using ".htaccess" file in root directory of the your site, adding this lines in ".htaccess".
    php_value max_input_vars 3000  
    php_value suhosin.post.max_vars 3000
    php_value suhosin.request.max_vars 3000

  • You can try to change this value using "php.ini". Add this line if you don't find max_input_vars
    max_input_vars = 3000

  • If that does not help you, ask your host support "How can I increase the value of the max_input_vars for my site?".
3. Why website loads slowly?

In some cases, you uses large images on your page, server run slowly because it's a VPS. Try these methods:

- Reduce images size

- Install cache plugin like W3 Total Cache

- Turn off less compiler in Theme Options=>Less compiler after finished changing colors & fonts.

- Test website with GTMetrix and see its suggestions https://gtmetrix.com/

4. How to translate or rename default theme labels?

Read this guide to know how to translate theme http://code.tutsplus.com/tutorials/translating-your-theme--wp-25014

Read this guide to know how to translate WooCommerce https://docs.woothemes.com/document/woocommerce-localization/

5. How to insert shortcode?

In this theme, we use Shortcodes Ultimate plugin to make shortcodes. You can go to this page http://gndev.info/kb/ and read the documentation to create your own shortcodes.

 

Credits & sources

I have included these sources with this theme:

jQuery: http://jquery.com/

FlexSlider: http://flexslider.woothemes.com/

Slick: http://plugins.jquery.com/slick/

jQuery Gmap: http://labs.mario.ec/jquery-gmap/

FancyBox: http://fancyapps.com/fancybox/

jQuery Parallax:http://www.ianlunn.co.uk/plugins/jquery-parallax/

jQuery Shuffle: http://vestride.github.io/Shuffle/

Font Awesome: http://fortawesome.github.io/Font-Awesome/

lessphp: http://leafo.net/lessphp


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.