Free Wordpress Blog Setup

How to Add Custom Navigation Menus in WordPress 3.0 Themes

By Editorial Staff in Themes
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

What Next?

Digg it
Save This Page
Subscribe to WPBeginner
Stumble it
Free Wordpress Blog Setup

Comments

24 Responses to “How to Add Custom Navigation Menus in WordPress 3.0 Themes”
  1. Good Tutorials first up! will be useful while I upgrade to 3.0

  2. michelle says:

    nice tutorial! thanks for the share!

  3. Noor says:

    I am also testing WordPress 3.0 Beta and I found few bad things in Menus…e.g it is inconsistent and hope till the final release it will become consistent

  4. Kevin says:

    Its a pity there’s no way to add the “home” page to the menu from within the menu builder. This is a major flaw.

  5. Angie says:

    I am wondering how to remove HOME from my nav menu using WP 3.0 beta. Do I edit the wp_nav_menu function or is there some other way?

    If I edit the function, can you provide instruction?

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

  7. Chris Creed says:

    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).

  8. Jacob says:

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

  9. Jamie says:

    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! :)

  10. Charles says:

    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.

  11. ianarosh says:

    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!

  12. Skubeedoo says:

    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.

  13. errr says:

    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

  14. dan says:

    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’ ),
    ) );

Share Your Opinions

Tell us what you're thinking...
and if you want a pic to show with your comment, then get gravatar!

Please make sure that you have read our Comment Policy.

Due to high volume of request from our readers, we are adding this feature that allows you to stay updated with this post's comments without having to participate in the discussion even though we would love your input as always. Don't worry we hate SPAM just as much as you do, so you will never receive any SPAM messages from our site and that's our promise to you.

Subscribe without commenting

Close Bar