Everything you wanted to know about WordPress 3.0 Menu Management

Posted on

With the upcoming 3.0 release, WordPress is introducing a new user interface to help manage navigation menus, which simply means you’ll get a new page with some tools on it to help you add, delete, and arrange links.

To utilize this feature, you must first activate it. Without activation, your menu management page will display nothing, but an error.

If it’s currently inactive, in your WordPress administration panel, go to Appearance > Menus to see the error.

How to Activate WordPress 3.0 Menu Management

Add the following code to the functions.php file of your theme.

if (function_exists('add_theme_support')) {
	add_theme_support('menus');
}

While add_theme_support(‘menus’); is enough to activate the Menu Management page, the additional code around this necessary line makes sure if later or earlier versions of WordPress doesn’t have this feature then it will simply do nothing and cause no error.

What the code above means:

The code above simply means if the Add Theme Support function exists, use that function to add Menus feature. If it doesn’t exist, do nothing.

Step by Step

  1. Open theme folder and find functions.php.
  2. Open functions.php using Notepad or text editor of your choice.
  3. Copy and paste the code above.
  4. File > Save functions.php

Where to place the code

If the functions.php file of your theme is messy or you don’t really know where to place the code, go to the end of functions.php and paste the code before:

?>

A question mark immediately next to a right arrow marks the end of a set of codes. The last combination of question mark and right arrow in the file marks the end of the file. Normally, if you add any code right before the file ends, you’d have no problem.

In the rare case that your theme has a functions.php file, but it’s empty, copy and paste the following code:

<?php
if (function_exists('add_theme_support')) {
	add_theme_support('menus');
}
?>

This set of codes is only slightly different from what you were first given. The additional

<?php

and

?>

at the beginning and ending of this set of codes means start PHP and end PHP.

You may close functions.php. For the rest of this tutorial, you don’t need it. Now you’ve activated the Menu Management feature or user interface, here’s what it looks like:

Using Menu Management User Interface

If you use wp_nav_menu() in theme template files to display the menu, by default, it will list only links with a Page attached to it. But, what if you wanted to add custom external links without creating a new page just to point to it? For example, adding a Twitter link to your site’s main menu. Here’s how.

First, create a custom menu because WordPress will not allow you to add, delete, or re-arrange links without at least having one custom menu. Name your menu then save it. For this tutorial, my first custom menu is named, “first.”

After creating the custom menu, you have several options on Menu Management page to add links. For example, you can simply check the boxes next to the Pages and Categories you want to add then click the Add to Menu button. You can also add custom links and here’s what it looks like:

Don’t forget to click the Save Menu button after adding new links.

How to Display Custom Menu

Like I mentioned before, wp_nav_menu() by default displays your list of links based on what Pages you have. It doesn’t display custom menu links. To display the custom menu wherever you want it to show up, copy and paste the following:

<?php wp_nav_menu('menu=first'); ?>

Replace “first” with the name of your menu.

What the code above means:

  • Start PHP
  • Use wp_nav_menu() to display menu
  • The custom menu I want to use is “first.”
  • End PHP

In whichever file you’re pasting it in, save the file. Upload this file to the theme folder on your server if you’re not directly editing it through the WordPress administration panel.

I created a blank theme just for this tutorial. Here’s what it looks like for me after putting the code above in the index.php file of my blank theme.

If you right click on the page currently displaying your menu and go to View Source, you get to see what this menu looks like under the hood. Here’s what it looks like for me:

<div class="menu-first-container">
<ul id="menu-first" class="menu">
	<li id="menu-item-4" class="menu-item menu-item-type-custom"><a href="//son">son</a>
		<ul class="sub-menu">
			<li id="menu-item-6" class="menu-item menu-item-type-custom"><a href="//grandchild">grand child</a></li>
		</ul>
	</li>
	<li id="menu-item-5" class="menu-item menu-item-type-custom"><a href="//daughter">daughter</a></li>
</ul>
</div>

Wherever you see “first” in the set of codes above, you know it’s there only because I named the custom menu “first.”

Display Multiple Custom Menus

To do that, you have to first create the second menu. Here’s my second menu, which is conveniently named, “second.” And, I’ve added two links under the second menu.

To display the second menu, duplicate code for the first menu and change menu=first to menu=second. If you named your second menu, “submenu,” then change menu=first to menu=submenu. Here’s the entire code:

<?php wp_nav_menu('menu=second'); ?>

Differentiating Custom Menus and Customizing Them

There are several ways to differentiate and customize custom menus. The most obvious one is using different names for first and second menus. The less obvious ways are customizing container_class, container_id, and menu_class. For example:

wp_nav_menu('menu=first&amp;menu_class=my-main-menu');

Under the hood, by adding menu_class=my-main-menu using the ampersand sign (&), my menu list changes from:

<ul id="menu-first" class="menu">

to:

<ul id="menu-first" class="my-main-menu">

If you want to customize the container_class along with menu_class, here’s how:

wp_nav_menu('menu=first&amp;menu_class=my-main-menu&amp;container_class=container-name-goes-here');

As you can see, to add another customizable option to the menu, you simply use the ampersand sign, the option you’re customizing, and the value of that option, which can be any string of texts of your choosing. After you’ve added the code, save the file, refresh the web page, and check under the hood by choosing View Source to see the changes made.

For a list of options you can customize or assign values to, go to wp_nav_menu at the WordPress Codex.

51 thoughts on “Everything you wanted to know about WordPress 3.0 Menu Management

  1. premiumthemeclub says:

    Nice piece of information !!!! Templatic always cares of their customers

  2. BK says:

    Agree with premiumthemeclub – great themes, great service. Sincere thanks Bhavesh and Templatic.

  3. Jeremy says:

    Good post!

    Have you found a way to change the ID for the individual menu-items?
    Currently, it is out putting,

    id=”menu-item-19″

    when it would be nice for it to return

    id=”menu-item-second”

  4. Brian says:

    Thanks!! Cant wait to see this work in your themes!

  5. Scott James says:

    Great write up. I am new to WordPress, but these options seem very powerful.

    I have one issue when it comes to “Differentiating Custom Menus and Customizing Them”.

    I have created a menu called “navigation”, which i place in the header with wp_nav_menu(‘menu=navigation’); I want to change the class attached to the ul from menu to nav. So i place this code in the header instead : wp_nav_menu(‘menu=navigation&menu_class=nav’) but when i view the source code it hasn’t changed.

    Could some give me some advice of where i have gone wrong?

    Thanks for any help
    Scott

  6. Tom Hermans says:

    Note:
    it seems that now the definitive version of WP 3.0 is released

    add_theme_support( ‘nav-menus’ );

    has changed to…

    add_theme_support( ‘menus’ );

    So, for other people scratching their heads why this doesn’t work anymore.. here’s why.

    1. Deb Teakle says:

      Thank you! I can stop scratching my head now…

    2. smallpotato says:

      Thanks Tom. I’ve update the tutorial to reflect the recent change from nav-menus to menus.

  7. William Lindley says:

    Beware: Editing a post, page, or category does not change the “description” here, that is only computed ONCE when you ADD the item to the menu. Changing a page menu’s order or parent has no effect in these new menus. New pages and posts are not automatically added to your menus. Editing links in the Links admin, has no effect on links you add in these menus… and so on. These menus create new duplicate data and a whole new duplicate set of functions we already had in Widgets.

    Using these menus for anything non-trivial looks like an exercise in futility and bad desynchronization.

  8. Frank Anthony says:

    I used add_theme_support( ‘nav-menus’ ); and it still worked.

    @Scott James

    The proper syntax for multiple args would be

    wp_nav_menu( array( ‘menu’ => ‘navigation’, ‘menu_class’ => ‘nav’) );

  9. neel says:

    Excellent and descriptive tutorial. thanks for sharing.

  10. Jessica says:

    thank you

    As Jeremy inquires, I would also like to know how to change the menu item names to my menu names like “about”

    id=”menu-item-19?

    when it would be nice for it to return

    id=”about”

    1. smallpotato says:

      currently, there’s no option to do so.

      1. Small Potato says:

        go to Appearance > Menus

        Find the Screen Options link at the top of the page and check the CSS Classes box. Now, go back to one of your menu items and fill in the new CSS Class input field.

        1. theodin says:

          You are a lifesaver! thanks

        2. Panagiotis says:

          Thanks

  11. Brian says:

    I have been trying to figure out how to add a first class and last class to list items in order to add separators without having a hanging separator.

    I figured out how to add first last classes via jquery, but it displays slowly after the page has already started loading so I would prefer a php solution.

    I have found how to add first and last to page list, is it similar? Thanks!

    1. Martin says:

      I used (or rather abused) output buffering to achieve separators…

      My code: (as I used in Twenty Ten 1.1)

      // start buffering output instead of printing it directly:
      ob_start();

      // the normal wp_nav_menu call:
      wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ));

      // store the menu in a variable and clear the buffer (still not printing it)
      $wp_nav_menu = ob_get_clean();

      // split the menu into an array
      $menu_parts = explode(‘<li ',$wp_nav_menu);

      // assemble it again with an extra list-item between every menu-item containing | as separator character:
      $wp_nav_menu_restructured = implode('|<li ',$menu_parts);

      // get rid of the first separator list-item (1 too many) and finally print it
      echo str_replace('|’,”,$wp_nav_menu_restructured);

      1. Matt says:

        I tried implementing this and so far it works great with the exception of the last string replace. If I put it in as you have it, all of the | get replaced with nothing. If I remove it, we get the leading | back. Any thoughts on what I am doing wrong to just remove the first one but keep the rest?

  12. Matti says:

    I am trying to update my theme to the new nav, however I have the child pages of a section in the sidebars, mimicking the dropdown menu subpages. How do show this with the new nav code? I a struggling just to show children in the sidebar, any help?

  13. mash says:

    thanks man :)

  14. Greg White says:

    In a multiuser site, can you create one menu that is “fixed” or appears on all mu blogs

    1. smallpotato says:

      as far as i know, you can’t do that naturally within the system. you have to modify the theme templates to have one consistent menu spanning accross the mu blogs. if your mu blogs each uses a unique theme then you’ll have quite a few templates to modify just to add that menu.

      1. Lars Koudal says:

        @smallpotato and @Greg White

        Actually I have a very simple solution.

        For a customer who had the same problem, I created a menu on the “main” blog, and then edited the header.php file of the theme.

        Before:

        wp_nav_menu();

        After:

        switch_to_blog(1);
        wp_nav_menu();
        restore_current_blog();

        the “1” is the id of the main blog in my case, change accordingly.

        To be honest I have not tested how the code affects the load time, but there is no immediate noticeable speed reduction.

  15. john says:

    Hi thanks for the great tutorial. I will like to use them in my wordpress blog.

  16. Jeff says:

    I can get the menu to show but the child page shows just like a regular link. It does not disappear and reveal itself when I mouseover the parent page (which is what I need) I have the child page under the parent page in the menu admin section and it is moved over to the right as it should be. I’m not sure what I am doing wrong.

    Any suggestions?

    1. smallpotato says:

      Sounds like you’re having a drop-down menu + CSS problem, which is not caused WordPress. Look up suckerfish or even superfish drop down menus on google.

  17. Jil says:

    Hi everyone, would anyone know how to add a 1px line separator to the standard Twenty Ten drop down menu? I worked out how to slim down the padding for a thinner button, change background colours etc, but a 1px line under each item would be perfect :)
    Many thanks if you can help.
    Jill

    1. Jill says:

      or, how to add a background image to menu items, then I could build the 1px border into the image used plus some gradient etc :)

  18. iamzaks says:

    Amazing Tutorial! It really helped me out!

  19. Josh Sliffe says:

    can i group subpages under a menu item without the menu item being a page?

    i just have pages grouped under a parent page but no content for the parent page and no need to put content on it.. only point is to organize it on the menu.

    1. smallpotato says:

      definitely. that’s what the new menu system is for.

      1. Florestan says:

        I don’t see how this is true. If you don’t enter a URL when creating a custom link, you cannot save the menu item.

        I really need to do the same thing myself: have a menu item without an associated page or external link to group other pages under.

        Any ideas?

        1. Small Potato says:

          Instead of a URL, use the (#) pound sign.

          1. Florestan says:

            Thank you, Small Potato! That did the trick!

            I’m really grateful.

  20. lenin says:

    Hi,
    I installed wordpress Twenty Ten theme and host my site. I want to have navigation menus like TemplaticThemes GalleryThe ClubWhy UsSupportBlog(as what you have) need not be inside the image.
    When I want to add more menus during this step I see the message your theme supports only one menu.
    How can I add multiple menus in a row.

    1. smallpotato says:

      follow the tutorial to set up your blog and theme for multiple menus. if it’s set up right, you can have multiple menus and multiple items per menu. it’s not limited.

  21. Arne says:

    Does anybody know a plugin (or some other way) to insert an image tag instead of a textual description as an anchor in a custom menu?

  22. ClippingDesign.Com says:

    add_theme_support(‘menus’); showing before comment. Does anybody know what is the problem?
    Check following link.
    //clippingdesign.com/blog/realistic-tear-view-using-photoshop/

  23. Marc says:

    Does anyone have an idea on how to separate the children from parents to place them elsewhere on the page?

  24. Raven says:

    Menu activated but I get this error: Your theme supports 0 menus. Select which menu appears in each location. How can I fix this to use the menu manager in WP 3.0?

    1. Small Potato says:

      You probably activated the feature, but haven’t changed the code in your theme. Follow the How to Display Custom Menu step.

  25. brent lagerman says:

    any way to change the div that gets generated to be an HTML5 element? If not it’s not a big deal you can just put the nav element around the function that calls the menu, but it’d be nice to get rid of the extra div if possible…

    brent
    @
    mimoYmima.com

  26. Jacob Ekanem says:

    Donno why but I added the codes to function.php and to the header but when I go to the admin I get “Your theme supports 0 menus. Select which menu appears in each location” and I cannot call or use the menu created. Any one have suggestions?

  27. Felixius says:

    Almost a year without response… ^_^ Thought I would post a reply anyway.

    This is a reference to register_nav_menus()

    //codex.wordpress.org/Function_Reference/register_nav_menus

    As far as I can tell, this directly supports specifically defined locations within a theme where you can change the menu via the menu console.

    It seems pretty cool!

    F

  28. tarun says:

    thanks… it was a nice and detailed post… just now created menus with your help…

  29. Salma says:

    I followed the entire tutorial but the menus are still not displayed!

    1. Vedran says:

      Try watching this video, see if it helps:
      //www.youtube.com/watch?v=HXc1hy3z7Og

  30. jamal says:

    I have added the menu successully but how can i get the css work properly with the menu items?

    here is my old code

    no how can i apply the css in the new code?

    over here >> ‘menu_order’, ‘container_class’ => ‘menu-header’ ) ); ?>

  31. Ruby says:

    Great tips,it’s very helpful in my next project.

    Thanks for sharing

Comments are closed.

New Plugin! Check this newly released Tevolution Events Ticket Plugin to book your Event Tickets.
Cart 0