Configuration

For our theme to run smooth we need a proper configured environment. The more the plugin the more the resources it consumes and requires a bit more controllable environment. Even theme works fine. But we suggest a bit more resources and control. Please check-out the things below:

1. max_execution_time 300 This is important if you're going to use one click demo import. If server supports allows max_execution_time to be modified it is handled by our theme.
2. memory_limit 256M Most of the server supports this and our code handles this one too but in case if it's not supported then please ask your host to increase your memory limit.
3. You're now good to go..! Proceed to the installation steps below.

Installation

Follow the steps below to get started with your WordPress Theme

1. Please follow the famous 5 minutes installation tutorial to install WordPress if it's not already installed.
2. Please unzip the downloaded file and place it to location which is accessible with ease. Open the folder. You'll be presented with 4 sub folders demonstrated below:
   • Documentation - This documentation file main folder
   • Plugins - Premium & our framework plugins
   • Themes - Core theme & child theme
   • Sample Data - All the demos & files are placed here in case you'd like to do manual import.
3. Inside the theme folder there are two more zip files.
   • rab.zip - Main theme file
   • rab-child.zip - Child theme
4. Now Login to WordPress admin dashboard. Go to Appearance > Themes > Upload theme. Upload rab.zip and Activate themes.
5. Now please install all the necessary plugins and activate them.
6. Navigate Through Appearance > RAB Demo Importto clone accordingly.
7. Currently we're planning to import widgets which isn't importing through one click import. Please install Widget Importer Exporter plugin to import widgets which is placed under Sample Data > fashion > widgets.wie

Installing Plugins

When you click on "Activate" button to activate RAB Theme, you will see the a notice offering you to install required and recommended plugins. Click "Begin installing plugins", on the screen that appears, next select the plugins you want to be installed, pick "Install" in Bulk Actions select box and click "Apply" button. For optimal user experience install and activate all recommended plugins.

Installing Demo Data

Steps to import demo data:

• Navigate Through Appearance > RAB Demo Importto clone accordingly.
• You will be preseneted with all the demo available:
  
  
• Click on the Import and follow the process.
• Currently we're planning to import widgets which isn't importing through one click import. Please install Widget Importer Exporter plugin to import widgets which is placed under Sample Data > fashion > widgets.wie

Theme Options

RAB comes with advanced settings panel that is loaded with options. We have the options organized into logical tabbed sections, and each option has a description of what it will do on the front end. We encourage you to please take some time and navigate through each tab to see what we offer. Go to RAB Theme Options on admin sidebar to access the setting options. See below for screenshots and short descriptions of our Theme Options panel.

You can find Theme Options in Appearance > RAB Theme Options.

Header 2

<header class="header-3">
    <nav class="navbar navbar-default">
        <ul class="nav navbar-nav">
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
        </ul>

        <div class="logo-hold">
            <a href="index.html" class="navbar-brand">...</a>
        </div>

        <div class="header-right">
            <form class="searchbox navbar-form hidden-xs">
                ...
            </form>

            <ul class="site-header-cart menu">
                <li>...</li> 
            </ul>

            <ul class="login">
                <li>...</li>
            </ul>
        </div>
        <!--right-->
    </nav>
</header>
<!--header-->

Menu Styles

Default Menu style, You can use the Menu just as

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <div class="container">
        <ul class="nav navbar-nav">
          <li>...</li>
        </ul>
    </div>
    <!--container-->
</div>
<!-- /.navbar-collapse -->

Menu Styles 2

<div class="outer-wrap">
    page content...
</div>
<!--outer wrap-->

<a href="#cd-nav" class="cd-nav-trigger">Menu 
    <span class="cd-nav-icon"></span> 
</a> 

<div id="cd-nav" class="cd-nav">
    <div class="cd-navigation-wrapper">
         <div class="container"> 
            <div id="dl-menu" class="dl-menuwrapper mb-40">
                <ul class="full-pg-menu nav navbar-nav dl-menu dl-menuopen"> 
                    <li class="col-sm-3"> 
                        <ul class="dl-submenu"> 
                            <li class="dl-back"><a href="#">Back</a></li>
                            <li><a href="04-rab-fullwidth-shop-grid.html">Shop full width</a></li>                 
                        </ul> 
                    </li>                                  
                </ul>
            </div>
            <!--menu--> 
         </div>
    </div> 
</div> 
<!-- .cd-nav -->
    

Page Sub Menu

You can use an Additional Sub Menu on any Page for Intra Navigation purposes.

<li><a href="#">...</a>
    <ul class="sub-menu">
        <li><a href="...">...</a></li>
        <li><a href="...">...</a></li>
        <li><a href="...">...</a></li>
        <li><a href="...">...</a></li> 
    </ul>
</li>

Note: It is recommended that you place the Page Sub Menu code just below li tag in navigation.

Homepage Settings

By default, your homepage will also display your post feed, listing all of your latest posts for visitors to see. If you would like to instead have your homepage be a static page and your post feed display on a separate page, you can follow these instructions.

For this tutorial, we will be naming our static homepage "Home" and our post feed page "Blog".

Next, navigate to Settings > Reading. At the top of this screen, you'll see a section titled "Front page displays". Click the little bubble next to the "A static page" option.

From this option's "Front page" drop-down menu, select your newly created "Home" page.

From the "Post page" drop-down menu, select your newly created "Blog" page.

• The Front Page Display setting allows you to choose what content appears on your blog’s front page. You can decide if you want posts, or a static Page, displayed as your blog's front (main) page.
  • Front page: Select in the drop-down box the actual Page that you want displayed as your front page.In this case, we choose Home.
  • Post Page: Select in the drop-down box the name of the Page that will now contain your Posts. If you do not select a Page here, your Posts will only be accessible via other navigation features such as category, calendar, or archive links.
• Blog pages show at most lets you choose how many blog posts are displayed per page. The default setting is 10 posts per page.
• Syndication feeds show the most recent lets you set how many blog posts will be sent out at once via your RSS feed (located at http://your-domain.WordPress.com/feed/).
• For each article in a feed you can select Full text or Summary. Full text means that the entire contents of a post are included in the feed. Summary means that only the first 55 words are included in the feed, along with the option to continue reading the rest of the post.
• After that Save Changes to apply the changes to your WordPress site.

The last step involves adding your "Home" and "Blog" pages to your navigation menu.
To do so, go to Appearance > Menus. Click the "Pages" drop-down menu on the left, check the boxes next to your "Home" and "Blog" pages, and add them to the menu. Drag and drop them to wherever you'd like them to be positioned in your menu. Be sure to save when finished.

Now, when you refresh your site, your homepage will display your newly created "Home" page and your "Blog" page will now display your post feed.

Blog Settings

Creating a Blog Page

By default Wordpress displays blog posts in front page but this theme uses a static page as its front page. So we'll have to create a new page called Blog and will use it to display the blog posts.

To display your blog posts, you will then need to create a page that includes the Blog, Recent Posts or Posts Carousel page builder asset.

1. Navigate to Pages > Add New.
2. Enter the title Blog and click on Publish.

Note: DO NOT set the posts page in Settings > Reading, as this will force your page to show the archive layout, and not follow your created page. You can choose blog page layout from RAB Theme Options panel > Blog Settings. Currently there are three types of layout: Classic, Masonarry and Modern

Creating a Post

The Posts menu option on the left is where you add blog posts. To add a new blog post, select the Posts > Add New option from the left hand WordPress menu.

Once you're on the Add New Post screen, you will then be able to set a title for the blog post, add the body content, and also provide all the meta information such as extra details and media. In the blog meta you can set the image for the thumbnail, and also the media type for the detail page.

Shop Settings

Setup WooCommerce

Kodo is an ecomemrce WordPress theme and WooCommerce is the main plugin which provides all functionalities about selling products online. If you are new with WooCommerce plugin, please take a look at its' documentation first - WooCommerce Documentation

After WooCommerce installed and activated on your website, it will require you to do some setup steps. You should follow it to complete the installation. In these steps, WooCommerce will recommend you to create some pages such as: Shop, Checkout, Cart, My Account page.

If you imported our demo content before, you can skip this step to avoid duplicate these pages. Because they are imported from our demo content. And if you skip this step, you must go to WooCommerce > Settings and select these pages manually.

The Products menu option on the left is where you can add and manage products. To add a new product, select the Products > Add Product option from the left hand WordPress menu.

Add a Product

Once you're on the Add New Product screen, you will then be able to set a title for the product item, add the description, and also provide all the data information such as price, stock status, attributes, etc.

You can add a featured image in the right column box, and above that set any other gallery images. Any images you add here will be used for the product slider images.

Create a new Category

Creating categories is one of the easiest ways to organize your products. The more products you have, the more benefit you will receive by organizing into multiple categories. What do categories do? They allow your customers to easily sort and navigate your products.

• To set up your product categories, click the Categories link under Products Menu in your WordPress Dashboard.

Setting A Shop Page

To display your products, you will want to create a page, leave the content blank, and then set the Shop Base Page in WooCommerce > Settings > Pages.

If you would like to add products within a page that you create using the page builder, you can also use the Products & Products (Mini) assets.

Order Tracking Page

If you want to have Order Tracking page, you must create it manually. But if you imported our demo content before, you can use the page we created for you.

To create Order Tracking page, please go Pages > Add New to create a new page. You can name this page as "Order Tracking" or anything else you want. Inside that page content, please insert this shortcode: [woocommerce_order_tracking]

After created the Order Tracking page, please go to WooCommerce > Settings then select Checkout tab. You will see an option for selecting what page is Order Tracking page.

<div class="col-md-3 col-sm-3 col-xs-12 sidebar">
    <div class="widget widget_categories mb-30">
        <h5 class="widget-title">Categories</h5>
        <ul>
            <li>..</li>
        </ul>
    </div>
    <!--categories-->
    <div class="widget widget_archive mb-30">
        <h5 class="widget-title">Archives</h5>
        <ul>
            <li>..</li>
        </ul>
    </div>
    <!--archives-->
    <div class="widget widget_recent_entries mb-30">
        <h5 class="widget-title">Recent Post</h5>
        <ul>
            <li>..</li>
            <!--single post-->
        </ul>
        <a href="#" class="more">More Post</a>
    </div>
    <!--archives-->
    <div class="widget widget_tag_cloud mb-30">
        <h5 class="widget-title">Tags</h5>
        <div class="tagcloud">
            <a href="#">..</a>
        </div>
    </div>
    <!--tags-->
    <div class="widget mb-30"> 
    </div>
</div>

Helper Classes

We have created some really useful helper classes for you. Here are a few of them:

• .primary-padding - padding of 100px between the blocks
• .p-pb - for padding bottom 100px
• .secondary-padding - padding of 50px between the blocks
• .s-pb - for padding bottom 50px
• .p-0 - for padding 0px
• .image-effect - for animation effect in images
• .bg-gray - for soft gray background
• .dark-gray - for dark gary background
• .rounded-crcl - for rounded circle
• .mb-90 - margin bottom 90px
• .mb-80 - margin bottom 80px
• .mb-70 - margin bottom 70px
• .mb-60 - margin bottom 60px
• .mb-55 - margin bottom 55px
• .mb-50 - margin bottom 50px
• .mb-45 - margin bottom 45px
• .mb-40 - margin bottom 40px
• .mb-35 - margin bottom 35px
• .mb-30 - margin bottom 30px
• .mb-28 - margin bottom 28px
• .mb-25 - margin bottom 25px
• .mb-20 - margin bottom 20px
• .mb-15 - margin bottom 15px
• .mb-10 - margin bottom 10px
• .mb-5 - margin bottom 5px
• .mt-5 - margin top 5px
• .nmt-5 - margin top -5px
• .mt-3 - margin top 3px
• .mb-0 - margin bottom 0
• .no-margin - for margin 0px 90px
• .overlay - to craete overlay effects.

Visual Composer

Visual Composer is one of the best drag and drop visual builder plugin which will help you to create any type of design using its drag and drop feature. You can easily create any layout for your website. This plugin is one of the best and most popular plugin in codecanyon. Visual Composer comes with lots of pre-built elements which will help you to achieve any level of design/layout you need with just dragging the element into the canvas.

Visual Composer RAB Elements

Apart from lots of pre-built elements within the Visual Composer itself we have also added other extra elements that is specific to the RAB theme requirements. These elements will give you one more extra level of extension to the Visual Composer plugin.

Slider Revolution

In this theme, we use Revolution Slider for building sliders on homepages. Revolution Slider is an innovative, responsive WordPress Slider Plugin that displays your content the beautiful way. Whether it’s a Slider, Carousel, Hero Scene or even a whole Front Page, the visual, drag & drop editor will let you tell your own stories in no time!

Everything you need to know for building your sliders or just for customizing imported slider from our demo is in this plugin's documentation. We highly recommend you to take a look at it here: Revolution Slider Documentation.

Creating Child Theme

A child theme is a theme that inherits the functions and styles of the other theme, called the parent theme. Child themes are the recommended way of modifying an existing theme. Our theme has full support for creating child theme.

How to create child theme

A Guide To: WordPress Child Themes Development

How to speed up you site

There's a lot on information on how to make your site work faster on the Internet. We are going to list certain general recommendations below, as well as recommendations on RAB theme customization.

1. It's important to choose a nice hosting for your site. Cheap hosting usually isn't the fastest one.

   WordPress, WooCommerce and our theme need resources. A $3-per-month host most likely won't have them, and your HandyTheme experience, as well as our support duty, will turn into a nightmare.

   We usually recommend WordPress hosting plans from MediaTemple to be used with our themes.

2. You can use caching plugins.

   We recommend acuiring and activating one of such plugins after your site's development is over.

   Most important ones are:

   W3 Total Cache
   WP Super Cache
   
   

3. You can use CDN.

   What CDN does is it creates copies of your site's static content (images, css and javascript files) on different servers around the world. When a visitor comes to your site, he or she gets these static files from the nearest server. So, let's say, North American visitors get your site's files from Canada, and European visitors get them from Norway. This increases your site's loading speed dramatically.

   Here are some of the popular CDN service providers:

   https://www.maxcdn.com/
   http://www.metacdn.com/integrations/wordpress-cdn
   http://www.wpcdn.com/cdn/wordpress-acceleration/

4. You can optimize your images.

   Images usually are the "heaviest" part of your website and take the most time to load. Reduce your images' initial sizes online or offline before uploading them to your site.

   These are some of the popular online services for image size reduction:

   http://tools.dynamicdrive.com/imageoptimizer/
   http://www.punypng.com/

   These are some of the popular offline applications for image size reduction:

   For Windows: http://psydk.org/pngoptimizer
   For Mac: https://imageoptim.com/
   

5. You can optimize you database.

   The essence of database optimization is deleting drafts, not used (deleted) elements, such as spam comments etc. from your database.

   These are some of the popular plugins for database optimization:

   https://wordpress.org/plugins/wp-optimize/installation/
   https://wordpress.org/plugins/wp-dbmanager/
   

6. You can minify your css and js

   After your site's development is over you can minify all your styles and scripts

   Online services for css:

   http://cssoptimiser.com/
   http://www.codebeautifier.com/
   

   Online services for js:

   http://javascriptcompressor.com/
   

   Plugins:

   https://wordpress.org/plugins/autoptimize/
   https://wordpress.org/plugins/bwp-minify/

   Useful links on the matter:

   1. http://www.smashingmagazine.com/2014/06/25/how-to-speed-up-your-wordpress-website/
   
   
   2. http://www.sparringmind.com/speed-up-wordpress/
   
   
   3. http://code.tutsplus.com/tutorials/speed-up-wordpress-caching-and-database-optimization--cms-22055
   
   
   4. http://code.tutsplus.com/tutorials/speed-up-wordpress-using-cdns-compression-and-minification-to-speed-up-wordpress--cms-22056

Images

• Pexels.com
• Pixabay
• Unsplash
• 123rf
• Flaticon
• Depositphotos.com

jQuery

• JQuery
• Modernizr
• jQuery UI
• BX Slider
• Masonry layout
• Light Box
• Light Box

CSS & Fonts

• Bootstrap
• Animation
• Font-Awesome (Font Icons)
• BX Slider
• Stroke 7 Icon Font (Icons)

Free fonts:

• Arimo
• Poppins
• Mr Dafoe