Add WordPress 3.0 Navigation System to Your Site

Before WordPress 3.0, one of the frustrations with WordPress was configuring the navigation menu when you wanted to combine pages, categories, and URLs. The new navigation system in WordPress 3.0 solves this problem, because it allows you to create a menu by dragging and dropping almost any type of link. But just upgrading WordPress to 3.0 won’t automatically give you the new navigation system. You have to modify your theme with the new navigation template tags. I’ll walk you through this in this tutorial.

1. First, register the new menu in your theme functions file.

a. If you have just one navigation menu in your theme, copy the first registration snippet in the tutorial notes.

Registration code snippet 1:

add_action( 'init', 'register_my_menu' );
function register_my_menu() {
register_nav_menu( 'primary-menu', __( 'Primary Menu' ) );

If you have two navigation menus, copy the second registration code snippet.

Registration code snippet 2:

add_action( 'init', 'register_my_menus' );

function register_my_menus() {
			'upper-menu' => __( 'Upper Menu' ),
			'lower-menu' => __( 'Lower Menu' ),

b. Now go to Appearance > Editor and click the Theme Functions (functions.php) file. Insert the code near the bottom, right before the closing ?> tag. Then click Update File.

2. Now you need to replace your old menu template tag with the new one.

a. Your navigation menu is usually in your header.php file. Look for wp_list_pages or wp_list_cats. Either delete it or comment it out.

b. If you have just one menu, add the first navigation menu template tag in the tutorial notes.

Navigation menu template tag 1:

 'primary-menu' ) ); ?>

If you have multiple menus, add the second navigation menu template tag in the tutorial notes.

Navigation menu template tag 2:

 'upper-menu' ) ); ?>
 'lower-menu' ) ); ?>

c. Then click Update File.

3. Now navigate to Appearance > Menus in your theme and create the menus you want.

You can see that the theme location we specified appears in the upper left corner, in the Theme Locations section.

a. To create a new menu, type a new menu name and click Create Menu. When finished, click Save Menu.

b. Now select that menu in the Theme Locations section and save it.

c. Now refresh your theme to see the changes.

Additional References

For the full function reference in the WordPress Codex, see wp_nav_menu.

For an excellent description of the new navigation template tag, see Goodbye, headaches, Hello, menus! from Justin Tadlock.

Adobe RobohelpMadcap Flare

By Tom Johnson

I'm a technical writer working for the 41st Parameter in San Jose, California. I'm interested in topics related to technical writing, such as visual communication, API documentation, information architecture, web publishing, JavaScript, front-end design, content strategy, Jekyll, and more. Feel free to contact me with any questions.

  • Rory

    Ive used the new wordpress 3.0 on 4 websites now (don’t worry I’m a trained web designer) and the improvements they have made to the software is amazing, but didn’t know you could add the navigation like that – pretty sweet.Thanks for the code, it’ll save me a lot of time fiddling around.