Makali Documentation

Makali WooCommerce Responsive Theme Documentation

Makali responsive theme documentation by PlazaThemes

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 this guide video before you start with this theme, it provides basic steps to make everything easier.

Installing Theme

Once you've downloaded the installation file on ThemeForest, extract it and locate a file called makali.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 makali.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 "makali" appears in the WordPress themes manager panel.

Installing Plugins

The installation of plugins will be required once after the theme activation.

***Install and Activate them. In case if automatic plugin installation fails (as a rule it is because of your server settings), you can install them manually via your Dashboard: Plugins > Add New > Upload Plugin > Browse plugins archives. Or via FTP, by uploading and extracting the plugin zip files into wp-content/plugins folder.

- You can find the zip files for plugin installation in the theme folder makali/plugins.

Watch the guide above to see in details.

***Automatic plugin installation

***Manual plugin installation

Import data demo

We can import content for pages, posts, menu, projects, contact form, testimonials... like our demo. To import our demo content follow the steps below:

  • Install and activate required and recommended plugins before you proceed.

  • Click Import Roadthemes => Click on IMPORT DEMO => Wait some minutes => See The data have imported succesfully => Next, click Import Roadthemes => See the demo with ACTIVATED => Successful

  • To install other demo, please click IMPORT DEMO at the demo you want. => See The data have imported succesfully -> Successful

  • To install demo which you have imported but now not "ACTIVATED", please click ACTIVATE at that demo.

Import Slider

After importing demo data, slider doesn't show. You need to create/import. We have some sample slider in the slider-sample folder in the package.

- Login to your WordPress dashboard, navigate to Slider Revolution -> Slider Revolution-> Import Slider

- Click Browse to choose sample slider in the slider-sample folder in the package -> Click Import Slider

Import Widgets

To create widgets for this theme quickly, we use a tool to import all widgets from exported files in "sample-data/exported_files" folder.

Login to your WordPress dashboard, navigate to Tools - Widget Importer & Exporter

Click on "Browse..." or "Choose File" button then select "widgets.wie", click on "Import Widgets" to finish.

After importing widgets, if you need to update some widgets like menu, posts... go to Apperances - Widgets

Import Theme Options

Import sample theme options will help you to configure options for the theme quickly. After that, you change colors, text, menu, images, background...for the theme to make it unique.

Open the wp_makali_package_1.0/sample-data/exported_files/theme-options.json with Notepad (or Text Edit on Mac). Copy all file content.

Login to your WordPress dashboard, navigate to Theme Options - Import/Export.

Click on "Import from File", paste content into the text box. Click Import button.

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 makali.zip
  3. Extract makali.zip and open guide update
  4. Update with guide text.

Wordpress General Settings

Go to Dashboard> Settings > General

If the url is not correct, Go to Dashboard> Settings > Permalink and Click Save

Theme General Settings

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

Set a page as home page and posts page (blogs)

To set a page as home page and posts page (blogs):

****Example: To set Home1 to be your homepage:

Login Dashboard> Settings > Reading :

After that, you must go to Dashboard> Pages > All Pages > Home page (you have set above, Example: Home shop 1, Home shop 2 ...) and set Template as Front Page Template:

Setting WooCommerce Pages

Login Dashboard> WooCommerce > Settings :

Tab Products: setting Shop page.

Tab Advanced: setting other pages.

Go to Dashboard> YITH > Wishlist tab Settings to set wishlist page:

Theme Options

*** Note: You have to set home page as Front Page Template , see Setting Homepage and Posts Page

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 color, link color, text selected color and background.

Header

Note: The menu ID may changed, so you need to update menu in Pages, Header, Footer (WPBakery Page Builder editor).

This section allows you to set up the header area. The first choice to change the header layout, header layout in mobile. Change the header text color and link color.

Sticky header:

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

Top bar:

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

Main Menu:

We can change mobile menu label. The sub menu background in desktop view.

Categories Menu:

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

Social Icons:

Enter your own social links.

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, back up font family, font weight and style, font size, line height, color. We use Google Fonts. You can use default options or change any font like you want.

If we want to use default options, click on "Reset Section" button.

Image Slider

This section allows you to upload images and enter link. Click on Add Slide to add more images.

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

Inner Brand Logos:

You can show brand logo in inner pages.

Sidebar

This section allows you to change position of sidebars to left or right side in inner Pages (Default Page Templates). Products and Blogs sidebars are in other sections. Go to edit page/post to select custom sidebar.

Product

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

Product page:

This area allows you to change options for the product page and change position of sidebar in product page.

Quick View:

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

Blogs

This section allows you to change the text on header of blog page "Blog", select blog layout, change read more text, change position of sidebar in blog 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, we used .less files in the "less" folder to generate .css files. Turn off the compiler after you finished your website.

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) (the header you are using) -> 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)(the header you are using)-> you click to Single Image shortcode to edit, then select image from library or upload new logo. Remember to save. You should now have a visible logo in your header area.

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

*** Footer contains Copyright, links, newsletter, payment,..

=> To set it up, go to WPBakery Page Builder=>Templates=> Footer 1(Footer 2) - the footer you are using to edit.

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

Menus Creation & Configuration

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.

1. Config Horizontal Menu to show columns like demo

  • Login WordPress admin

  • Appearance -> Menus

  • Select Edit Menus : At Select a menu to edit : Choose Horizontal Menu (Sidebar Menu by Mega Main, Primary Menu, Mobile Menu) -> Select

  • At Menu Structure -> Select item you want to set, ex: Features -> At Submenu Type : Select Multicolumn Submenu , at Submenu Columns (Not For Standard Drops) : Select number of columns


2. Config locations of menus like demo:

Go to Appearance -> Menus -> Manage Locations:


3. Config menu on Header

After installing theme, to show links on My Account, Language, Currency on Header, you need to config and save menu.

  • Login WordPress admin

  • WPBakery Page Builder -> Templates -> Header 1(Header 2/ Header 3)(the header you are using)

  • At WP Custom Menu -> Edit -> At Menu: Select menu you want to show -> Save

    *To like our demo set:

    - With title My Account: Select My account menu

    - With title Language, Currency: Select Language - Currency menu


3. Config menus at Footer

After installing theme, to show links above on Footer, you need to config and save menus:

  • => Login WordPress admin

  • WPBakery Page Builder -> Templates -> Footer 1(Footer 2) - the footer you are using

  • At WP Custom Menu of titles -> Edit -> At Menu: Select menu you want to show -> Save

    To like our demo set:

    - With title Our Offers: Select Our Offers menu

    - With title Information: Select Information menu


4. Config menus at Products Carousel at Home page 5, Home page 6( title "New Arrivals", "Our Best Sellers")

After installing theme, to show links on Products Carousel, you need to config and save menus:

  • Login WordPress admin

  • Go to Pages -> All Pages

  • Choose home page you want to config

  • At WP Custom Menu -> Edit -> At Menu: Select menu you want to show -> Save


5. How to change links on Horizontal Menu

To change links of items on Horizontal Menu:

  • Login WordPress admin

  • Appearance -> Menus

  • Select Edit Menus : At Select a menu to edit : Choose Horizontal Menu (Sidebar Menu by Mega Main, Primary Menu, Mobile Menu) -> Select

  • At Menu Structure -> Select item need change url -> At URL: Enter url of that item.


Change site title, tagline, site icon

To change site title, tagline, site icon, you need to do like steps below:

- Go to Dashboard - Appearance - Customize - Site Identity: Change title, tagline, icon of the site.

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 Visual Composer. 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.

WPBakery Page Builder

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

 

Product Image Sizes

  • Woocommerce product image sizes: Go to Dashboard - Appearance - Customize -> WooCommerce -> Click Product Images.

    Main image width: Single product width (unit: px)

    Thumbnail width: The largest width of products (in shop and homepage layouts, not the thumbnail) (unit: px)

  • YITH Compare product sizes: Go to Dashboard - YITH - Compare

  • YITH Zoom magnifier product sizes: Go to Dashboard - YITH - Zoom magnifier

    • Important Note: After changing product sizes, you need to regenerate thumbnails. Read more: http://wordpress.org/plugins/regenerate-thumbnails/

    Products Images

    When editing a product, we can upload a featured image and thumbnail images.

    Products Wishlist

    Note: You need active plugin YITH WooCommerce Wishlist.

    Read more: https://docs.yithemes.com/yith-woocommerce-compare/.

    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.

    Revolution Slider

    Revolution Slider

    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 Post Format, choose a format for your blog post.

    3. Upload an image as featured image

    Let's go over Post Format :

    • Standard - This is the default blog format. You can start adding content.
    • 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.

      You can insert shortcode carousel such as Carousel, Gallery ...

    • Video - This post type has a video player, you can add shortcode to show YouTube or Vidmeo at Post featured content.

      You can insert shortcode video such as Youtube, Vimeo ...

    • Audio - This post types has a audio player, you can add shortcode to show a player at Post featured content.

      You can insert shortcode carousel such as Audio ...

    Now it's time to categorize this post.
    1. 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 sections. Here you can add tags to your post.

    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.

    Post Excerpt

     

     

     

    Roadthemes Shortcodes

    You can find our shortcodes in tab Theme

    Roadthemes Product Sliders

    They included:
    • RT Sale Products : list products on sale
    • RT Feature Products : list products set as featured
    • RT Recent Products : list recent products
    • RT Top Rated Products : list top rated products
    • RT Best Selling Products : list best selling products
    • RT Products : list multiple products (You choose products manually)
    • RT Products categories : Display product categories loop
    • RT Products category : Show multiple products in a category

    Note: read more about Woocommerce Products: https://docs.woocommerce.com/documentation/plugins/woocommerce/getting-started/setup-products/

    Some Settings for Example:

    Roadthemes Latest Posts

    Roadthemes Images Slider

    Images Slider can be added in Dashboard - Theme Options - Image slider

    Mailchimp Newsletter

    Note: You need active plugin Mailchimp For Wordpress.

    Read more: https://wordpress.org/plugins/mailchimp-for-wp/

    Go to Dashboard - Mailchimp for WP - Mailchimp and enter your API.

    - Then go to Mailchimp for WP - Form to edit Mailchimp Form and get the Form ID.

    - Go to Dashboard - Templates - Footer 1 & paste shortcode of Mailchimp

    Pages

    Note: The menu ID may changed, so you need to update menu in Pages, Header, Footer (WPBakery Page Builder editor).

    Create pages: you can read more: https://wpbakery.com/video-academy/start-building-page-scratch-blank-page-templates/

    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.
    • About page - This template to use is for "About Us" page.
    • Contactpage - This template to use is for " Contact Us" page.
    • Front Page Template - This is the template to use for "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.
    • Demo 2,3 - Only for our demos.

    Widgets

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

    Translation

    *** 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/

    Additional Notes

    Regenerate Thumbnails

    If you change the image size settings, you must resize all images that you have uploaded. You can use plugin Regenerate Thumbnails, read more: https://wordpress.org/plugins/regenerate-thumbnails/.

     

     

     

     

    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. I see errors when importing demo content?

    If you get a white screen or some other error when trying to import our demo content, this probably happens because of the maximum execution time limit. You need to increase the maximum execution time (upload time) setting of your web server. The default maximum execution time on web servers is 30 seconds. Please increase it to 300 seconds. Possible ways of achieving this are:

    • By wp-config.php changes - set_time_limit(300);
    • In htaccess - php_value max_execution_time 300;
    • In php.ini file - max_execution_time = 300

    Ask your hosting provider to take care of this for you.

    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.