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() { 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:
'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' ) ); ?> and '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.
About Tom Johnson
I'm an API technical writer based in the Seattle area. On this blog, I write about topics related to technical writing and communication — such as software documentation, API documentation, AI, information architecture, content strategy, writing processes, plain language, tech comm careers, and more. Check out my API documentation course if you're looking for more info about documenting APIs. Or see my posts on AI and AI course section for more on the latest in AI and tech comm.
If you're a technical writer and want to keep on top of the latest trends in the tech comm, be sure to subscribe to email updates below. You can also learn more about me or contact me. Finally, note that the opinions I express on my blog are my own points of view, not that of my employer.