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.
   • yeti.zip - Main theme file
   • yeti-child.zip - Child theme
4. Now Login to WordPress admin dashboard. Go to Appearance > Themes > Upload theme. Upload Yeti.zip and Activate themes.
5. Now please install all the necessary plugins and activate them.
6. Navigate Through Appearance > Demo Importerto clone accordingly.

Installing Plugins

When you click on "Activate" button to activate Yeti 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 > Demo Importerto clone accordingly.
• You will be preseneted with all the demo available:
  
  
• Click on the Import and follow the process.
• For any reason/issues if you are not able to import demo data from above steps, then you can import all dmeo data manually and the sample data is located in Sample Data. To import widget you will need to install Widget Importer Exporter plugin to import widgets which is placed under Sample Data > widgets.wie. For sliders you can directly import from the Slider Revolution and the zip file of both banner are also located under same folder.

Theme Options

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

Header 1

<header class="first-header scroll">
    <div class="container">
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <button class="nav-btn">
                    <span class="menu-bar1"></span>
                    <span class="menu-bar2"></span>
                    <span class="menu-bar3"></span>
                </button>
                <a class="logo" href="#" alt="/"></a>
                <a class="logo high-res" href="#" alt="/"></a>
            </div>

            <div class="collapse navbar-collapse nopad" id="bs-example-navbar-collapse-1">
                <div class="nav-wraper">
                    <div class="menu-main-menu-container">
                        <ul id="primary-menu" class="nav navbar-nav text-uppercase font1">
                            <li><a href="#">...</a></li>
                            <li><a href="#">...</a></li>
                            <li><a href="#">...</a></li>
                        </ul>
                    </div>                                        
                    <div class="work-btn">
                        <a href="#">work with us</a>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</header>

Header 2

<header class="second-header scroll">
    <div class="container">
        <nav class="navbar navbar-default">
            <a class="logo" href="#" alt="/">
            </a>

            <a class="logo high-res" href="#" alt="/">
            </a>
                    
            <button class="nav-btn">
                <span class="menu-bar1"></span>
                <span class="menu-bar2"></span>
                <span class="menu-bar3"></span>
            </button>
        </nav>
    </div>
</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 id="mySidenav" class="sidenav side-menu font1">
    <span class="menu-close"></span>
    <button class="nav-btn">
        <span class="menu-bar1"></span>
        <span class="menu-bar2"></span>
        <span class="menu-bar3"></span>
    </button>
    <div class="menu-main-menu-container">
        <ul id="primary-menu" class="nav navbar-nav text-uppercase font1">
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
        </ul>
    </div>
</div>
    

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

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

• .font1 - 'Poppins', sans-serif;
• .font2 - 'Libre Franklin', sans-serif;
• .font3 - 'La Belle Aurore', cursive;
• .overlay - to craete overlay effects.
• .gradient-overlay - for gradient overlay
• .btn-effect - for button hover effect
• .link - for link hover effect

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 Yeti 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
• Isotope
• Slick Slider
• Video Popup
• Light Box
• Parallax
• Counter Up
• Waypoint

CSS & Fonts

• Bootstrap
• Font-Awesome (Font Icons)

Free fonts:

• Libre Franklin
• Poppins
• La Belle Aurore