How to Add Custom Navigation Menus in WordPress 3.0 Themes

Posted on April 17th, 2010 by in Themes | 60 Comments  
How to Add Custom Navigation Menus in WordPress 3.0 Themes

Custom Navigation Menus feature in WordPress 3.0 will make WordPress even more user friendly for beginners. This function let you organize your menu, create drop down menus, add new items to menu, and much more. The drag-and-drop function of this feature is what makes it extremely easy to use. This feature will not be available in older themes unless the theme author(s) update their themes. In this article, we will show you how you can enable and install custom navigation menus in your themes.

We see this feature as one of the most demanded feature in the future of WordPress themes. Below is a simple screenshot that shows you what you can do with this menu option.

WordPress 3.0 Custom Navigation Menus

You can create multiple menus, add existing categories or pages to the menu, and you can add custom links to menu as well. You can organize the menus and create drop-down menus with a simple drag-and-drop feature.

How to enable Custom Navigation Menus in WordPress 3.0

Like the custom background, header image, and post thumbnails, the custom navigation menus also needs to be enabled through your theme’s functions.php file.

Simply add the code below to your theme’s functions.php file:

add_theme_support( 'menus' );

If this code is not added in your functions.php file, the user will not see this as an option in the Admin panel.

How to Add Custom Navigation Menus in WordPress 3.0 Themes

Once you have enabled the feature, now you can add it in your theme. These menus are not limited for header.php file only. You can add them anywhere you like to fit your design’s need by pasting the code below:

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>

The main function as you can see is wp_nav_menu. The arguments we have in the code are sort_column and container_class. The sort_column value tells WordPress to follow the order you pick in the options panel, and the container_class is the css styling class that you pick for this specific menu.

For custom themes: If you are using more than one menu, then you need to specify either the menu ID, menu slug, or menu name. The parameters are: $id, $slug, $menu respectively.

Additional Resource: WordPress Codex

About

Editorial Staff at WPBeginner mainly Syed and David.

Post comment as twitter logo facebook logo
Sort: Newest | Oldest
digitfox 5 pts

Yeah! its a nice tutorial for me! I am very new to WP! Thanks

PauloNeves 5 pts

I need help.

Follow all steps, but in Apparance Panel the option menu not enable.

When select other theme working.

How do enable option menu?

Thanks.

Paulo Neves

wpbeginner 60 pts moderator

 PauloNeves You have to add this line in your theme's functions.php file: add_theme_support( 'menus' );

Thanks for this! Worked awesomely for me and helped my client a lot! - aptdesign 

That is very helpful me although wordprees 3.3 version released few days ago.

citydan 5 pts

I have followed the instructions and this post and the post here (http://www.wpbeginner.com/wp-tutorials/adding-a-second-menu-to-the-twenty-ten-theme/), and figured out how to get my CSS to make the menu appear correctly, but the child items (sub menu items) are not appearing. I have them set up correctly in the menus editor, but on the site they do not show. They are not hidden by CSS because they are not there in the source code of the page.

Any ideas why my menu sub-items are not showing?

GourabMalla 5 pts

Hi,

I have added the custom menu in top navigation but want to know how can I active the “Current Page Class”.

I’m using WordPress 3.2

Thanks

Gourab

DanFlynnDesign 5 pts

Thank you! Love how this is all dynamic so the client can edit if needed, plus able to state which is the current page and apply hover effect! EXACTLY what I was looking for!

asharperrazor 5 pts

I have tried this many times. I have an old wordpress theme. So old I'm not even sure what version of wrodpress it was written for. Anyway, I can get the functions part to work. I can save the correct menu. I can put the code into other parts of my website, say the footer, although it displays as a hierarchy list and not horizontally.

Won't display in the top nav menu. Do I need a new theme or is it possible to edit my current theme to allow the new menu function?

Thanks in advance. The website is www.asharperrazor.com

JamesGeorge 5 pts

I implemented this with NO problems-thank you! I took the "nav menu" code and put it in the div where my client's theme was calling the list of pages. I basically replaced it with your code from above and uploaded it, and the css kept it in the same style. It looks great and functions perfectly. AWESOME!

Great post - thank you!

I have implemented as above and my menu items are showing on site only problem is that each page is empty?!

any ideas?

Sounds like a PHP error. Please validate your PHP to make sure there is no error.

Quick and dirty - the way I like my code snippets. Thanks a bunch.

I have created custom navigation menus a couple of times. What is weird is that after I create and save them, they appear for a while and then the navigation bar returns to 2 tabs only as if the settings are automatically overwritten. On sites with the same template were I never created a custom bar they display correctly.
Any ideas?

Nope, no clue why it is doing that.

You can define custom classes to each navigation, and then add image in the background. You can even use CSS (text-indent) property to get rid of the Menu text if you want.
Reply

I have a question on nav menu,
is there any way to add the image to the list of navigation menus..

Thanks,
Ram

You can define custom classes to each navigation, and then add image in the background. You can even use CSS (text-indent) property to get rid of the Menu text if you want.

thanks for your response but i need more clearly that custom menu image for the wordpress.
Im using wp_list_categories('exclude=4,7&title_li='); to show the navigational menu so is it any possibility to add the different images to the different menu button. Im trying the CSS but it never works for me :(

Thanks,
Ram

Yes it is possible to add different images with the custom menu. The one you are using is not the menu that we are talking about in this article.

Can you add code to make it look more presentable (fonts, buttons, size, etc)? If so, can you give me an example and where to put this code? Thanks!

That is a CSS related question. You will have to add the font size in the appropriate classes in the CSS file. We will be doing a writeup on the CSS styles soon.

ÁlvaroBenavides 5 pts

I really need help implementing the CSS of the classes, so please notify when u finish!

Question about the menu handling.

I have a menu that is right aligned, so the menu items show up in reverse order.

Is there a way to sort the menu_order in REVERSE?

so: sort_column' => 'menu_order' would have something added to reverse the order.

Thanks!

Just because they are right aligned, shouldn't make it appear in reverse order. To fix that, you need to change your CSS rather than reversing the hook. Make a container div that is aligned right, and then make the list tags float left.

Have followed instructions but after creating menus and adding appropriate categories to use, I can't see them in my nav bar - any ideas what I have done wrong?

Have you pasted the codes in your header.php or wherever that menu should appear?

You also need to add this to your functions.php file in order for you to use the menus

register_nav_menus( array(
'primary' => __( 'Main Navigation', 'twentyten' ),
) );

Certainly a thing that you should have when releasing free themes, but for custom themes it all depends on what you need. Sometimes you don't have to register locations.

i'm soooo not following ... could u be more clear where i would plug this code (add_theme_support( 'menus' );) into the functions.php file?

i'm totally lost

Somewhere within the php tags. If you do not have PHP experience, we recommend you hire a professional.

f1mktsol 5 pts

If you are going to write articles for newbies, it follows you should answer simple questions. Otherwise, just pay for ads to push your business and save the pretense.

wpbeginner 60 pts moderator

BanyanTree Adding codes to functions.php file is not that hard. You paste it within the php tags. We have written an articles like this:http://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/But its just impossible to link to that one article from all of our articles. When someone asks you how do I change the background in CSS and you tell them that you add background: #000 or another hexcode in the CSS property thats help enough.Now if they ask where in the CSS file I paste that, then that is something you need to know before hands. This site is not a PHP for Dummies site or CSS for dummies site. We do our best to help as much people as possible for FREE.

f1mktsol 5 pts

wpbeginnerBanyanTree You don't need to link to articles, no one asked for that. Three words answers his question; "at the end," which is easier to type than a snide remark. Keep in mind, you named your site; "wpbeginner," and if that's the audience you seek, cater accordingly.

wpbeginner 60 pts moderator

f1mktsol Yes and the site has grown beyond the audience we initially started with. This site has evolved. That is why we have categories... The word "beginner" is being used on a relative scale.

We have articles for Very Newbies who are just users in our Beginners Guide Category... We also have articles in our WordPress plugins category that are catered to that audience.If you are in our WP Themes category, then the articles are written for beginning theme developers. They are beginners in the developer area. Same with the tutorials.

Hope that explains it.

f1mktsol 5 pts

wpbeginner If you've outgrown your name, you should change it to suit the audience you seem to prefer. Consider consulting a professional.

I added add_theme_support( 'menus' );
and saw no option in the admin panel [where do i look?] I'm using intrepidity theme. I'm a noob, so it might be right in front of me and don't know the difference. I have a website that has a WP inside it and want to be able to navigate out of WP and back to my main URL. All I need is a "Home" nav link.
Thanks in advance.

It should show under Appearance Tab.

friend you have an awesome site and I am glad i've found it!
I was killing my head to figure how to add the costum menu and it was easy after i've seen this! Simply amazing.

A sugestion ever pondered in making posts about blog/server security? (not sure if you've had already need to explore more :O)

Best regards and keep the good work mate!

Do a search, we already have a post about that.

Can any of you tell me how to add support for multiple menus in the functions php file. I want to include two set's of menus

You don't need to have two set of functions.php... Just call the main function. Create multiple menus using the user interface in wp-admin. Then you would have to call the menus in the php code.

Just to let you know but the following:

"add_theme_support( 'nav-menus' );"

Has changed in the final release to:

"add_theme_support( 'menus' );"

Thanks! :)

@Jamie: Thanks for that latest remark!

Thanks Jamie, Post fixed :)

Great. Just what I was looking for. How do you add the menu slug to the function?

'menu' => 'Project Nav' like this

Thanks for this - I'm currently playing around with the new menu system - it's a great additional feature that's going to make things so much easier. I develop themes and get quite a few support requests from people wanting to create custom navigation sections on their site - the new menus should hopefully help to simply things a lot (especially for people with little WordPress experience).

I am also testing WordPress 3.0 Beta, now I can play arround with menu...Thanks!

Tweets about us: