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:
max_execution_time 300This is important if you're going to use one click demo import. If server supports allows
max_execution_timeto be modified it is handled by our theme.
memory_limit 256MMost 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.
- You're now good to go..! Proceed to the installation steps below.
Follow the steps below to get started with your WordPress Theme
- Please follow the famous 5 minutes installation tutorial to install WordPress if it's not already installed.
- 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.
- Inside the theme folder there are two more zip files.
yeti.zip- Main theme file
yeti-child.zip- Child theme
- Now Login to WordPress admin dashboard. Go to
Upload theme. Upload Yeti.zip and Activate themes.
- Now please install all the necessary plugins and activate them.
- Navigate Through
Demo Importerto clone accordingly.
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
You should not install sample data on an existing website - it's database will be deleted and replaced with sample one. You also should not run sample data installer on a WordPress MultiSite - the database for all you overwritted as well. As long as you are using one database for several sites all of these sites may be lost.
Please note that images used on our live demo cannot be used on your live sites build with the help of our theme. You should only use properly licensed images on your live projects. Images you see on our live demo are not sold with the theme and therefore are not included in the theme package.
Steps to import demo data:
- Navigate Through
Demo Importerto clone accordingly.
- You will be preseneted with all the demo available:
- Click on the
Importand 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
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.
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
General Settings tab allows you to define the site width, enable or disable Back to Top button, upload two different variaiton of logo for normal screen and high resoluton[retina] screen and upload fav icon for your site.
Typography setting tab is one of the most important options which will allow you to customize the looks of your sites typography. It allows to set font family, font size and font color for your sites general use. It also allows you to choose font family and size for all header types i.e. H1, H2, H3, H4, H5, H6 etc. You can set different font size for each head tag. This options allows you to choose font color for anchor tag and its hover/active state.
Header setting will give you options to control the looks of the header part of your site. There are three main options: Top Bar, Header Style and Sticky Header. Top bar is used for showing shipping info or promo options on the top section of your header. This can be easily switched on and off from backend. In frontend there is an icon to collapse or show the bar for your visitors. Header Style will allow you to choose availabel header styles in the theme. Currently there are two type of header style for you to choose from and more coming soon. Sticky header otion is to make the header sticky or not when your visitors slide towards bottom section of your site. When visitors scrolls down then the header will remain sticked on the top section of the site.
This option will allow you to set page banner image or color for all pages. Beside this option there is same option for individual page as well. This is a general setting for page banner so if you set any image or color here it will apply to all pages through out the site except homepage. This option will be over written by the page banner if you set one in individual pages.
Blog setting section has lots of option for you to control the view and looks of the blog and its associated pages. We have provided many blog layouts which you can choose one that best fits your requirements.
1. Choose Blog Layout
This option allows you to the layout of your main blog page. We have provided three pre-defined layout for the blog page: Classic, Massonary and Modern.
2. Excerpt Length
We have given this option here to control the Excerpt Length but we prefer to do this option from WordPress default settings
3. Post details page layout
This option allows you to choose layout for post details page. Currently there are two type of layout: Classic and Modern. Classic is the normal layout with sidebar and Modern is a custom designed layout without sidebars.
This option allows you to choose the sidebar and its position. This sidebar option will apply in in Class blog layout and Classic post details page layout.
We have added lot of useful social media here so your task will be just to enter your respective links in there. If this field is left blank then social media icons will not display.
Custom CSS & JS
This is the option which will allow you to add your custom CSS and JS codes to customize the looks and feel of the site but make sure you do not use
Backup & Restore
This option will allow you to import and export your theme options. Before you update the theme or do anything its safe to keep a copy of backup from here. If you click on Export and Download Backup it will give you a txt file which can be used to restore the theme options you have setup. If you like to import the theme options that you have backed up then open the txt file in text editor, copy the codes, paste codes in blank editor above the Import a Backup button and hit the button, you are done all of your theme options are restored.
<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 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 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>
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.
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.
- Navigate to Pages > Add New.
- 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.
Columns & Grid
You can add a revealable Side Panel on your Website with Additional Information about your Website. Simply use the Code below:
<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>
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
Elementor Custom Elements
Elementor Elements section will list all the custom elements that we have developed for using in this theme to extend its features. Custom elements will help you to extend the free version of the Elementor plugin we are using with this plugin. Those elements will help to furhter customize the theme layout and functionality.
This element will help to create a button with effect like the button used in this theme. This element will help to extend the feature of default button element that is available in free version of Elementor plugin.
This element will help to create a portfolio section from a custom post type. This element can be useful to list and show the portfolio or works done by you in a nice layout.
This element will help to create a testimonial section. Can list and show testimonials from your client using this element.
This element will help to showcase your team members. There is option to show normal listing or in carousel. There is option to add image, social profile links, name and post of a team member.
This element will help to post from blog in any other pages with different layouts. You can show latest post and post from specific category in two layout options.
This element will help to showcase your clients case study in a nice layout. This element has option to add image, title and short bio of the case study.
This element will help to create a video popup. There is option to add a button with link to video which will show up in popup.
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
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.
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.
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:
You can use CDN.
Here are some of the popular CDN service providers:
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:
These are some of the popular offline applications for image size reduction:
For Windows: http://psydk.org/pngoptimizer
For Mac: https://imageoptim.com/
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:
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:
Online services for js:
Useful links on the matter:
CSS & Fonts
- Font-Awesome (Font Icons)
Note: Images used in the demonstration/preview images/screenshots are licensed to their respective owners and are not included in the download. All images used in the preview mode where companies logo are visible are copyrighted to its respective owners/companies. Useage of those images in your end product/project will be solely your responsibility and commercial license will be required from its owners/companies. All images are replaced with placeholder images in download files.
Once again, thank you so much for purchasing this template. As we said at the beginning, We'd be glad to help you if you have any questions relating this template. No guarantees, but we'll do our best to assist. If you have any suggestions on how to improve our templates or documentation please share them!
© 2019 Kaththemes. All Rights Reserved.