Adding Additional Menus in WordPress 3.0

In working on my first production site with WordPress 3.0 I was impressed with the new menu creation tool in the dashboard. I’ve spent a lot of time creating specialized menus and this makes the process much easier and cleaner.

However, there wasn’t a lot of documentation of this new feature, so I had to muck about in the code until I figured it out.

Here’s what I found:

Registering New Menu Locations

By default, you can modify your primary menu in the dashboard, and create secondary menus. This doesn’t do much good when there is only one location (primary) registered. In the twenty-ten theme this is the default horizontal menu. So the first thing to do is register some new locations.

Look in the Theme Functions file for this code:

// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
'primary' => __( 'Primary Navigation'),
) );

and replace it with this code:

// This theme uses wp_nav_menu() in three locations.
register_nav_menus( array(
'primary' => __( 'Primary Navigation'),
'secondary' => __( 'Secondary Navigation'),
'tertiary' => __( 'Tertiary Navigation'),
) );

This will add two more locations in the dashboard. Now those new menus you created can be assigned to locations. Technically they could be named anything, but I carried on with the hierarchical structure for consistency.

Adding The Menus To Your Pages

To add these menus to the page content, you’ll also have to modify your template codes to place them where you want.

In the twenty-ten theme header.php file you’ll find this line:

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

This places the “primary” menu (the default menu unless you modified it) in the header. The class name of the container div is “menu-header”.

Repeat this code for your secondary and tertiary menus like this:

<?php wp_nav_menu( array(
'container_class' => 'secondary-menu', 'theme_location' => 'secondary' ) ); ?>
<?php wp_nav_menu( array(
'container_class' => 'tertiary-menu', 'theme_location' => 'tertiary' ) ); ?>

The container_class names are arbitrary. Use what you want but they should be unique for styling purposes. The theme_locations must match the names you chose in the nav_menus array (in the Theme Functions file) or you won’t get a menu.

To further modify your new menus, use the wp_nav_menu attributes listed in the WordPress Codex Function Reference. The container doesn’t have to be a div, the menus can also have an ID, etc.

Now You’re Cooking!

Once these codes are in place, you can quit playing with the code and get to work. Now you can assign a menu you created to a page location and modify it in the dashboard.

View Comments

8 Responses to Adding Additional Menus in WordPress 3.0

  • Thank you! this was annoying me so much till I googled the php of the placeholder and your site came up. So annoying that there still isnt documentation

  • neooo

    Why won’t the third location add to the dashboard?
    I seem to have everything right but it only shows two navigation choices.. tertiary is not there!

  • neooo

    Nevermind, i was updating a functions.php in an entirely dif theme.

  • Theme shouldn’t make any difference. If you’re using WordPress 3.0+ the function is available if you turn it on in the functions.php file. I have sites on old themes that I upgraded to use multiple menus this way. Another benefit was I could retire a few plugins I was using for special navigation.

  • Martin,
    Code must be entered in both functions.php and in your theme. If you want three menus, all three calls must be entered in your theme.
    In this example: ‘primary’ => __( ‘Primary Navigation’) the name of the menu in the dashboard is “Primary Navigation”. It will appear where the code block <?php wp_nav_menu( array(
    ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ) ); ?> is placed in the theme.

    Hope this helps.

  • ice

    Thanks for your information,
    i will try it but can not complete with my theme

    in head.php

    ….

    ‘primary-menu’ ) ); ?>
    ‘Secondary Menu’ ) ); ?> ‘Tertiary Menu’ ) ); ?>

    ….

    it show 3 line duplicate (same menu)

    can you show more full Ex. in use

    thanks so much. ^^!

  • Set the links for your menus in the WordPress dashboard under Appearance>Menus.

    Create a menu with the links you prefer, then add that menu to the primary, secondary or tertiary menu location.

Leave a Reply