WordPress Tweaks & Tuts?

Subscribe to TheCreatology via RSS | Email

Multiple Navigation menus using WordPress Menu 3.0 with Thesis Theme

by Aky Joe

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.

Multiple Navigation menus using WordPress

Multiple Navigation menus using WordPress

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)

step1-Multiple Navigation menus using WordPress

Step1: Create Menu in WordPress


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)

step2-Multiple Navigation menus using WordPress

Assign Theme Locations

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 id="cats"><?php wp_nav_menu('theme_location=secondary');  ?></div>
<?php }

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.

step3-Multiple Navigation menus using WordPress

Multiple menus on WordPress Blog Demo


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.

Similar Topics: , ,

TheCreatology Support

Got a Query? We're ready, Just Say it!

If you have a doubt or a feedback, then get-in-touch with TheCreatology Support Team now.

Start a Hangout or Email Us

Are you looking for...

  • Logo Design
  • Web Development
  • Thesis Skin Design
  • Graphic Designing
  • Virtual Assistance
Hire Us!


{ read them below or add one }

Jess May 10, 2011 at 9:45 pm

Thanks Aky Joe! This helped me set up multiple subnav sidebars. I added conditional statements so the correct nav bars show on the appropriate pages.


Aky May 11, 2011 at 1:59 pm

I appreciate your comment and glad that the tutorial helped you set multiple navigation. 🙂


Mike August 17, 2012 at 4:48 pm


this helped me a lot…


Tracey May 19, 2011 at 9:06 pm

I totally stuffed up the last code and I think I crashed my site 🙁
OMG … what can I do? Is there someway to just roll-back????


Aky May 19, 2011 at 9:30 pm

Hey Tracey,

Do FTP session, and download custom_functions.php file and simply remove the code you added. Don’t worry it will be fixed. 🙂


Tracey May 19, 2011 at 9:37 pm

Eek, I do anything to NOT to have to do ftp stuff … I’m so scared of doing anything like this!!! OK, breathe …. If I go through my ftp in Go Daddy, do I just remove the code from the customs_functions.php file???


Aky May 19, 2011 at 11:56 pm

Yeah, you just have to remove the code you added. I am sure you just have missed some PHP operators, and any syntax error in custom_functions.php leads to crash.

I am Glad that you fixed it, now. 😉


Sharon May 28, 2011 at 8:30 pm

I followed the instructions and pasted above code exactly yet when I save it says “Parse error: syntax error, unexpected ‘<' in /data/9/1/137/132/1789458/user/1936085/htdocs/wp-content/themes/thesis_181/custom/custom_functions.php on line 26"
I didn't add or change anything so why would it say 'unexpected <' ?? Help??


Aky May 28, 2011 at 8:43 pm

I appreciate your concern for the Feedback, I have updated the code now. Go ahead, and you can repeat Step 3, Sorry for the Inconvenience . 🙂


Sharon May 28, 2011 at 9:53 pm

Thank you for the quick reply. I’m afraid I’m still getting the error. 🙁 I had deleted the code via ftp so I was back to normal. Then repeated the above steps. What could be wrong?


Aky May 28, 2011 at 10:42 pm

Since it is a parse error, it seem that you are missing some php operator.


Tara @ The Butter Dish June 4, 2011 at 6:07 am

Hi Joe,
I am only to step two and stuck. I have the latest versions of both Thesis and WP.

I copied the code from step 1 into my custom_functions file and saved.
Got that.

Went into WP Menus, created some of the menus for my theme but I still only have 1 locations available. In your image you show the two locations for Nav1 and Nav2. I do not have that.

What did I miss.

Additionally will this allow me to create custom menus for different pages? I’m trying to recreate the Nav menus that I found on http://thepioneerwoman.com

I love how she only has one nav bar on the Home page then this nav bar is repeated on each of the other pages but then they each have a second nav bar with their specific categories. It’s just great and I would like to figure out how to do this. I’m not a HUGE fan of dropdowns as those lists can get pretty long.

Appreciate the help and the great tutor Joe.



Aky June 4, 2011 at 6:01 pm

Hey Tara,

I checked out your site, it seems you missed some operator. To get things fixed and back normal, login using FTP and remove the code you added.

You contact me via using the form below for further assistance. () 🙂


Tara @ The Butter Dish June 4, 2011 at 6:28 pm

HI Aky,
I got the second nav menu to work ( I copied into the wrong file).

Now I just need to figure out how to create different sub menus and get them on their own pages.

I just sent a message to you via the form at the bottom of the page.

Thanks for the help!!1


Aky June 5, 2011 at 12:59 am

Glad to hear that you got it fixed by yourself. A Good Learning for you, only when you try yourself. 😉


Storm July 15, 2011 at 1:00 am


Thanks for a great tuttorial.

I’m assuming these steps are for those using the default Thesis settings. My navmenu is below the header and I would like to have 2 menus as above with Wordpress 3.0. The “remove_action” would be different, wouldn’t it? Should I delete the following(thereby returning to the default setting) and replace with your code?
remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
add_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’);



Aky July 15, 2011 at 2:23 am

I appreciate your comment and it will be pleasure to answer your question about the replacing the code.
Well, I would like to tell you that, if you want a custom header with two navigation menus, then you will have to remove the existing “add_action” code from your custom_functions file and add the above code exactly. (As you can scroll up to see Step 3, I have used “remove_action” code, which is same as yours, so you don’t have to use the same hook again.)

So, I hope that will be all. 😉


Storm July 15, 2011 at 2:39 am

Thanks a lot for your help, I’ll try it out.

Your blog is great, I have another unrelated question – will post it on the related article. So many useful tips here!!!


Ammar July 29, 2011 at 11:06 am

That’s what I need for my theme. I am now going to try it out.
Thanks alot!


cecil September 15, 2011 at 11:52 am


Just wondering how can I create a function to switch from two different menus.

I have a two menu on top of the header, topmenu1 and topmenu2, if I click topmenu1 their will be another menu show below the header and then when I click topmenu2, different header will show.


Courtney April 18, 2012 at 12:29 am

Very helpful but I’m stuck on being able to style to the second menu. What should it begin with in the css?:

.secondary .menu

/* Top Nav */
.secondary {
font-size: 12px;
text-align: right;
color: #FFFFFF;
font-family: nobile;
letter-spacing: 1px;
margin: 0px 5px 0px 0px;



Aky Joe April 18, 2012 at 12:40 am

If you look up in the code itself, menus are wrapped in two different containers “pages” & “cats”. Apply css code on these containers. Cheers! 😉


elz April 19, 2012 at 3:03 pm

hi! thanks for this, so imformative. i so have a question – is it possible to have multiple navigation menus, as described above, but have only one show up, depending on the page? For example, maybe you want your “main nav menu” to be visable on homepage.com,, but when you navigate to a different page, say homepage.com/tutorial …a second, DIFFERENT nav menu would now appear instead of the “main nav menu”.

Basically, i am looking to create a website that offers online tutorials and would like to “lock” the page that contains the tutorials. Once people sign up, then i would give them access to this page and then they would have access to the tutorials…which would be organized with a (different) nav menu.

does my question make sense? i hope so! thank you so much for any clarification you may be able to provide.

– ellen


Aky Joe April 19, 2012 at 3:48 pm

Yes Ellen, your query does make sense and it can be added. To do so, you will have to use WordPress Conditional Statements for different pages and navigation menu locations (php code).


Rich April 21, 2012 at 5:54 am

When I need to make another menu, I create a widget area, add it with a hook, and then add the menu there. Are you aware of any advantages or disadvantages to doing it one way or the other?


Techgyo May 18, 2012 at 12:36 am

It didn’t work for me, navs were repeated above header. Maybe you should also show us a custom css for nav to make it look better


Aky Joe May 18, 2012 at 1:03 am

Not sure why it didn’t work for you, I hope you followed the procedure precisely.

Regarding the CSS Code for Navigation Menu, varies with s website to another website and hence intentionally, it is not supplied. Though Thesis theme has a nice design option panel for your ease. Why don’t you try it ? 😉


Monica Klos June 29, 2012 at 8:33 pm

This is BY FAR the best tutorial for adding a secondary navigation menu to Thesis that I have seen. It is simple to duplicate AND it relies on the resources available through WP instead of creating a hack. The only complication I had was a syntax error in the second code snippet … once I deleted the comment on line 6 and deleted line 5 I was all good. I am super excited about this new discovery, thank you for sharing.


Pedro October 9, 2012 at 6:38 am

Hey Aky,

Thank you for your post!
I have found lots of blogs-tutorials on this subject but none on a 3 or 3+ nav menu topic though…

Quick question:

I have a members site up and running and have created one nav menu for the members (Level#3) and another nav menu for the non-members (Level#2) but I need to create a third menu for another type of members which are on a different membership level (Level#4).
Could you give me an brief explanation of what I might have to do to create a 3rd nav menu?

Would really appreciate.
Hope to hear from you soon,


Aky Joe October 9, 2012 at 3:29 pm

Appreciate your comment and here is a simple resolution to your query:

  1. Register a new menu, just like we did in [Step 1] of this tutorial. So, you can simply append 3rd menu name and its location in the existing code.
  2. Save the file.
  3. Use the [Step 3] code of the tutorial and display your menu with legitimate condition so that it is visible to Level#4 type member only.

Follow the above steps and I think that will be all. Cheers!


Mekbib November 2, 2012 at 6:42 pm

Thanks man, Nice post


Chicago Tow July 29, 2013 at 12:20 pm

Thanks for a great tutorial. this is very helpful for me. I would like to visit it again and again.


carl August 28, 2013 at 1:17 pm

Hi AKY, I followed the instructions but the menus both appear above the header. is there any way to make the bottom menu appear below the header ?



Aky Joe September 1, 2013 at 2:27 pm

In that case, you will have to add two different hooks: thesis_hook_before_header and thesis_hook_after_header. Moreover, you will also be required to remove default thesis functions: remove_action('thesis_hook_before_header', 'thesis_nav_menu'); and
remove_action('thesis_hook_header', 'thesis_default_header');.

Let me know if it resolves, else we will have to look at your code.


Leave a Comment

Previous post:

Next post:

Contact Aky

Yes, I agree that all information above is valid.

Simple question, what's...