I'd Rather Be Writing

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() {
	register_nav_menus(
		array(
			'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:

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

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

Navigation menu template tag 2:

<?php wp_nav_menu( array( 'theme_location' => 'upper-menu' ) ); ?>
and
<?php wp_nav_menu( array( 'theme_location' => '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.

Sponsors

Tags: justin tadlock, navigation, tutorials, WordPress, WordPress Newsletter, wordpress screencasts

If you liked this post, keep updated with new content: Subscribe to I'd Rather Be Writing.