Adobe Robohelp

Get new posts delivered straight to your inbox.

Subscriber count: 3,505

Stitcher radio

follow us in feedly

Want more tech comm blogs to follow? See my Tech Comm Collection of Blogs on Feedly.

Adobe Robohelp

Add WordPress 3.0 Navigation System to Your Site

Jul 12, 2010 • general, wordpress

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:

<?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' ) ); ?>
<?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.

follow us in feedly

Get new posts delivered straight to your inbox.

Subscriber count: 3,505

About Tom Johnson

Tom Johnson

I'm a technical writer based in the California San Francisco Bay area. Topics I write about on this blog include technical writing, authoring and publishing tools, API documentation, tech comm trends, visual communication, technical writing career advice, information architecture and findability, developer documentation, and more. If you're a professional or aspiring technical writer, be sure to subscribe to email updates using the form above. You can learn more about me here.