First of all, let me say thanks you for choosing my product! Feel free to ask any question you might have regarding OKLE.

OKLE is responsive vertical menu that comes in 3 layouts and 14 pre-defined color variations per layout. With very simple markup to follow, and it's minimalistic but modern design you can enrich your website giving it fresh new look that will stand out.

Video Tutorials

Okle tutorial 01 - Setting Up Your Menu

Okle tutorial 02 - Add Icons

Okle tutorial 03 - Place Menu Elements To Top In Responsive View

Okle tutorial 04 - Show Cusotm Menu Only On Selected Page(s)

Okle tutorial 05 - Add Widgets


Download Okle

Download the OKLE plugin and save it to your desktop. *Note – This IS NOT the file you will upload to your Wordpress installation. The file you need must be UNZIPPED before uploading.

Unzip the downloaded plugin

UNZIP the downloaded plugin file. You can use a zip program or you can just CLICK TWICE on the folder icon to show the contents inside. Right click on the okle-pack zip file, then select winZip->extract here, or just extract here, depending on what will you see in the menu.

Here you will see several folders and another zipped file. This zipped file can be installed directlly from the admin dashboard

Upload OKLE

UPLOAD the okle file. You can do this on one of two ways:

Via Wordpress

Log into your Wordpress site.

When you get to your dashboard, scroll down the left sidebar to the plugins-panel and hover over or click on “Plugins”. You will immediately see a drop-down list - here click on “Installed Plugins”. Then in the upper left corner click on the add New
Here, click on “Upload Plugin
Now you are ready to upload the okle file that you unzipped earlier. Click “Browse” and find the file on your desktop.
Click the file, then click “install now” and wait for the installation message.

When the installation is finished, you should see this:
Under the words “Plugin installed successfully,” you will see an option to immediately click on “Activate Plugin” to activate the plugin.
Click on the Activate Plugin”. Now you are ready to proceed to Step Two.

But before you move to Step 2, let’s take a detour. Maybe you prefer to upload your new TF-Shortocdes files via FTP instead of Wordpress. What would you do? Follow these instructions:

Uploading Via Filezilla

(SKIP THIS STEP if you have already successfully installed OKLE plugin via Wordpress)

Now you will learn how to upload your files using the Filezilla client.
First, BACKUP YOUR FILES! This is always the safest thing to do.

Next, download and install the Filezilla Client -

Now OPEN FILEZILLA to see this window:

Fill in your FTP Credentials, like in the image shown below:

Now “CLICK QUICKCONNECT” and Filezilla will load your website. Here is how it will look:

Now use the right side panel to navigate to your plugin folder. In the example above, the plugin folder is in public_html/wp-content/plugins/, however, not all web hosting have public_html, it may be something different in your server.

After your /plugins folder is open, use the left side panel to navigate to the place where you have extracted the theme folder. In this example, the extracted plugin folder is in my desktop plugins folders.

Drag the extracted plugin folder into your web hosting:

That's all there is to it!

Once you drag the files have finished copying, CLOSE THE FTP ROOT FILES FOLDER AND THE PAGE FILES FOLDER OF YOUR FTP FILES, then go to your Wordpress dashboard, navigate to Plugins, and see that OKLE is one of your plugin choices. Click on the Activate Plugin.


Default Integration


To integrate OKLE into your navigation, you need to:

  1. Create a Menu / or edit existing one
  2. Assign that menu to the proper theme location

To access your menus go to Appearance->Menu from admin dashboard. At the top of the screen you will see and select box labeled "Select a menu to edit". Next to it there is a link - create a new menu.

After you have edited or created your menu, make sure you asign it under proper theme location. In most themes it will be primary theme location.

OKLE will stick to the menu you select from the option panel. So choose the one you want to use as OKLE menu and head on to the options section (Appearance->OKLE Options).


From Here choose the selected menu and that's it. OKLE will stick to that theme location. More details about options panel can be found under Configuration section of this documentation.

Don't forget, you need to select the menu you want to integrate first, in order to build OKLE menu (gain access to OKLE fields like icons and placing elements to top menu in responsive view).

Manual Integration

<?php okle_integration($args); ?>
Default arguments:
$args = array(
       'theme_location' => '',
       'menu' => ''


Required - Pass selected menu to this argument so you can initialize OKLE for it. If you do not pass 'menu' argument, OKLE will call the first menu created.


Optional - You can pass the theme location if you want, but it is not mandatory, and OKLE menu requires only 'menu' argument in order to initialize it for the selected menu.

To find the menu you want to integrate go to Appearence->Menus. Edit existing menu, or create new. When done, copy the Menu Name, and then pass it to the 'menu' argument when calling OKLE Menu.


Then go to theme files (usually header.php) and paste integration function where you want it.

    //pass the selected menu to the arguments array (In this example I will be using Main Menu)
    $args = array( 'menu' => 'Main Menu' ); 

    //call MDF Megamenu

If in your theme's header.php (wp_nav_menu function is usualy called there) looks like this:

 <nav id="site-navigation" class="navigation main-navigation" role="navigation">
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->

Replace it with okle_integration function, or place a conditional function, that will check if mdf megamenu is used, if true, it will be called, otherwise your theme default navigation menu will be used:
        if( function_exists('okle_integration') ):
            $args = array( 'menu' => 'Main Menu' );
            <nav id="site-navigation" class="navigation main-navigation" role="navigation">
                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
            </nav><!-- #site-navigation -->
    <?php endif; ?>

If replacing it completely with okle_integration function, make sure there is no any wraper around it. As you can see (in example above) there is nav element wrapped around wp_nav_menu function, or in your example it could be div, so if I would integrate mdf manualy in the above header.php, I would paste only mdf_integration($args); function as shown above in the beginning of this section.


icons 02c

To add icons to menu elements, you just need to hover with you mouse over any menu element in the menu. You will see two icons appearing next to the title of the selected element. Green one says "Add/Edit icon" and red X - "Remove Icon". So to add icon to the selected element just click on green edit icon.

If it happens that you can't see OKLE menu fields, like icons, or placing menu element to top menu in responsive view checkbox after directly opening menu (Appearance->Menus), then you need to re-select your menu again by clicking the Select button for Select a menu to edit: option in the top left corner



OKLE comes packed with options you can use to further customize OKLE menu. To access the menu panel go to appearance->OKLE Options.

All options have a description just inside their options box.



To add widgets to OKLE Menu go to appearance->widgets. There you will see New Sidebar (OKLE Sidebar), where you can add as many widgets as you like.

Just add selected widgets to the OKLE Sidebar. All widgets will appear just after the navigation in OKLE Menu.

Showing Menu On Selected Pages Only

With OKLE Menu it is very easy to show custom menu on selected pages only. For example, you could as in this example, assign menu named Tutorial Menu only to Blog page, or COntact page, etc. As seen in Illustration, you need to select menu you want to edit, and then open Show On Selected Pages box from the left and check the page(s) on which you want your selected menu to appear, instead of default one.

show menu on selected pages


mobile layout

OKLE is fully responsive and it will transofrm to mobile version on smaller screens and devices.

In mobile version it will consist of two parts:

  1. Top Menu
  2. Side Menu

In the top menu will be ordered all important menu items (those you selected previously). Rest of menu items will stay in side menu that can be opened by clicking on the 3 circled icon in the right corner of the top menu.

mobile layout

In order to select which menu elements will go to the top bar on smaller screens, all you need to do is to check a Show In Top Menu In Responsive View checkox for the every menu element you selected to place to top menu.

mobile layout

If it happens that you can't see OKLE menu fields, like icons, or placing menu element to top menu in responsive view checkbox after directly opening menu (Appearance->Menus), then you need to re-select your menu again by clicking the Select button for Select a menu to edit: option in the top left corner


OKLE comes with 3 layouts:

  • Default

    layout 1
  • Blogger

    layout 2
  • Portfolio

    layout 3


To change skin, just include it in the head of the page after the main okle.css stylesheet.

<link rel="stylesheet" type="text/css" href="path/to/blue.css">

Default Layout Skins Preview

default layout skins

Blogger Layout Skins Preview

blogger layout skins

Portfolio Layout Skins Preview

portfolio layout skins

For default layout, you do not need to add anything, just leave it as it is.


List of the resources used with OKLE