in Design & Dev & Tutorials

How to update your theme with WordPress 3.0 navigation menu

One of the great new features in WordPress 3.0 is a flexible navigation menu system that once set up on an existing theme will make editing its menus a breeze.

Justin Tadlock has a thorough post on how to integrate this functionality in all sorts of creative ways. But it may be too confusing for the average WordPress user. Here you’ll simply learn how to update your primary blog navigation with the new function.

The function gives you the ability to edit your navigation menu in a drag and drop interface and control each menu item’s:

  • Name
  • URL
  • Link target and relationship
  • Title and description
  • CSS Classes

In general, well constructed WordPress navigation menus consist of an unordered list, or ul, and list items, or li, containing the navigation options. Sometimes this unordered list is generated by the  WordPress template tag wp list pages. There also may be a div class or div id surounding the unordered list. In nearly all cases, you will find the main navigation menu in your header.php file.

Registering the menu function

Before editing your header.php file, you must add the menu code to your functions.php file. Copy and paste the code below into your theme’s functions.php file before the closing ?>. You may edit the name I’ve given this menu: Top Navigation.

add_action( 'init', 'register_my_menu' );

function register_my_menu() {
	register_nav_menu( 'top-navigation', __( 'Top Navigation' ) );

Add items to Top Navigation

Now that you’ve added the function, go to your WordPress admin area and select Appearance > Menus. Next to Menu Name, type in the name of your menu, in this case Top Navigation, and click Save in the far right on the menu creation page. Now your new menu should show up under Theme Locations. Select the menu from the Theme Locations dropdown menu (Top Navigation or whatever you named the menu when you registered it) as the menu “you would like to use” from the drop-down list in the upper left corner of the page and click Save.

Now you can add menu items to Top Navigation by entering in custom URLs or selecting existing pages and categories. You can edit the order of the menu by dragging the gray bars representing menu items just like you can drag and drop widgets.

The WordPress 3.0 menu editor features an easy drag and drop interface.
After adding items to the menu, be sure to select Save Menu in the upper right corner of the menu editing page.

Add the menu to your header template

Find your header.php file using an FTP client or WordPress’ theme editor. Within it, look for any of the signs of your existing navigation menu mentioned above—a div class or div id that obviously styles navigation (often named topnav, primenav or nav), the wp list pages tag or even an manually made unordered list with menu list items. Replace your existing menu HTML and PHP with the following, but don’t replace any div ids or div classes. The words top-navigation may be replaced by whatever slug you gave your menu.

<?php wp_nav_menu( array( 'theme_location' => 'top-navigation' ) ); ?>

Styling the menu

If your theme has an existing style for ul and li inside of a navigation div class or div id and you don’t remove those div tags when replacing your existing navigation code, then it’s very likely you will not need to make any further changes involving assigning specific classes to the menu and its items or editing your stylesheet. It’s important to note that this simple tutorial will not work for all themes by any means, and further CSS advice is beyond the scope of this post. Hopefully this can at least get you started replacing your menu with an easy to edit one.

Let me know if you have questions, suggestions, tricks or need help!

Important: Always back up your existing theme files while editing, especially while making changes to the functions.php file of your theme.