[HOWTO] Setup a stylish jQuery menu in wordpress

Schvamp

Power Member
Joined
Feb 13, 2012
Messages
684
Reaction score
553
So I was about to help another member of this board how to set up JQuery Mega Menu Widget and tought that I can post it in public if someone else is interested aswell.
Would you like your wordpress menu to look like this? Read on, and note: I'll only cover the basics.


750f8de9fb6925c05ce02d9d55b31e08.png


1) Download and install the plugin http://wordpress.org/plugins/jquery-mega-menu/

As the plugin is a widget we have to replace the menu bar with a widget area.

2) Add this code into functions.php right befor the closing "?>" at the end so that you can register the widget.
Code:
if (function_exists('register_sidebar')) {  
         register_sidebar(array(  
          'name' => '[B]Widget Menu[/B]',  
          'id'   => '[B]widget-menu[/B]',  
          'description'   => '[B]Widget Area[/B]',  
          'before_widget' => '',  
          'after_widget'  => '',  
          'before_title'  => '',  
          'after_title'   => ''  
         ));  
        }
Bold = you can name it whatever you want to

3) Open header.php and replace the current menu with the following code:
Code:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('[B]Widget Menu[/B]') ) : ?>  
<?php endif; ?>
As all themes are diffrent it's hard for me to say where in the code the current manu is placed at but it's uselly at the end and often in a div named <div class="manu-nav"> or such.
And the actually code to call the menu do often look like this: <?php wp_nav_menu(array('theme_location' => 'fourth', 'container' => '')); ?>

4) Head over to Appearance -> Menus in the admin area and create a menu, here's a great guide how it works: http://www.youtube.com/watch?v=0wB81jDaYD8 .

5) Go to Widgets and drag jQuary Mega Menu into the Widget Menu widget and set it up, style and all..

screenshot-1.png


6) All done.

The plugin can be costumized and supporting images but this guide just covers how to set it up, as it's not normal to have a widget as menu.
I'm not affiliated with the developer of this plugin just think its pretty nice. More info at http://www.designchemical.com
 
Thanks for the tutorial. I working on the same thing but on different platform, Joomla 3. Really a pain in the a55.
 
Back
Top