Multiple Navigation menus using WordPress Menu 3.0 with Thesis Theme

Since WordPress 3.0 has evolved, Creating Menu for blog has relieved headaches for many, as WordPress 3.0 menu gives user ability to create and organize custom menu structure.

Drop-down or nested menus was complex to code for a novice user, till Thesis Premium Theme was out in market. Thesis theme features to add custom menu structure for a WordPress blog. But, Thesis Theme allows to add one navigation menu only, hence its a limitation for a blog to add multiple menus. This limitation was soon resolved when WordPress 3.0 menu was launched. In this article I will guide you to use WordPress menu with Thesis Theme. The tutorial requires updated versions of WordPress and Thesis Theme. If you are using old version of Thesis then you can refer to article Safely upgrade to latest version Thesis 1.8 ?

In this article, I will add two navigation menus in thesis theme, one referring the pages and other menu will refer the categories. I have divided the procedure in three steps that is register menu, create menu and finally display menu. Below is procedure to add navigation menu using WordPress 3.0 Menu.

Step 1: Register Menu in Thesis Theme

Menus are supported by almost every WordPress theme, some themes has it preinstalled while, other themes like thesis we have to register them before. Below is the code snippet and it will register two menu locations in Thesis Theme:

//Register WordPress Menus
function joe_register_menu() {
register_nav_menus(array('primary'=>'Navbar1', 'secondary'=>'Navbar2'));
}
add_action( 'init' , 'joe_register_menu' );

Make sure you copy-paste the code precisely, otherwise erroneous code will  crash the website / blog.

Add the above code in custom_functions.php of Thesis Custom Folder and save / upload the file. Once done, we move to next step to Create menu in WordPress.

Step 2: Create Menu in WordPress

WordPress menu management is click-a-way and easy to use. In step 1 we registered two menu locations in custom_functions.php file, so that we can differentiate theme locations of the multiple navigation menus in WordPress. In this step we will create navigation menus and assign theme locations. Login to WordPress Dashboard and navigate to Appearance > Menus. Now create new menu depending upon the requirement. For instance, I have created two menus Navbar1 and Navbar2. (Refer to the screenshot below)

 

After creating menus, you can drag drop the menu items and save menu. Next, important step is assigning menus the appropriate locations. On the Menus page find Theme Location Widget, and using the Drop down list, select appropriate Theme Locations. (Refer to the screenshot below)

Click on save button right below it, once done selecting the appropriate Theme Locations. And now we move on to next step, where we will display these menus.

Step 3: Display Menu on Blog

With Step 2, we are done with the backend part, and now we will publish menus on the blog. Referring to the WordPress Codex for Menus, we will once again edit custom_functions.php file. Copy-Paste the below code snippet in the custom_functions.php file, as we did in Step 1.

// Remove Default Header and Navigation Menu

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
remove_action('thesis_hook_header', 'thesis_default_header');

// Custom header created with multiple navigation menus
function joe_header() { ?>
<div id="joeheader">
<div id="pages"><?php wp_nav_menu('theme_location=primary');  ?></div>
<div id="logo">
<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('description'); ?>"></a></h1>
<h2> <?php bloginfo('description'); ?> </h2>
</div>
<div id="cats"><?php wp_nav_menu('theme_location=secondary');  ?></div>
</div>
<?php }
add_action('thesis_hook_before_html','joe_header');

Make sure you copy-paste the code precisely, otherwise erroneous code will  crash the website / blog.

Save and update the custom_functions.php file once done with editing the code. In the above code we have called wp_nav_menu() twice but with different parameters. First instance under displays the Navbar1 menu while the second instance displays the Navbar2. On refreshing the site you will find something like, as in the below screenshot.

 

In order to style WordPress menu, you can refer to my post Ease with Thesis WordPress Theme Design options panel or you can custom code in Custom.CSS and save it.

With this we come to end of this tutorial, I’m sure you will find using menu with Thesis theme, more efficient and flexible. If you have any query or need any further assistance, post your feedback as comments below.

If your WordPress blog is currently using a custom theme, then you can redesign it using the Thesis Theme Services.