Everything you wanted to know about WordPress 3.0 Menu Management

With the upcoming 3.0 release, WordPress is introducing a new user interface to help manage navigation menus, which simply means you’ll get a new page with some tools on it to help you add, delete, and arrange links. To utilize this feature, you must first activate it. Without activation, your menu management page will display nothing, but an error. If it’s currently inactive, in your WordPress administration panel, go to Appearance > Menus to see the error.

How to Activate WordPress 3.0 Menu Management

Add the following code to the functions.php file of your theme.

if (function_exists('add_theme_support')) {
	add_theme_support('menus');
}

While add_theme_support(‘menus’); is enough to activate the Menu Management page, the additional code around this necessary line makes sure if later or earlier versions of WordPress doesn’t have this feature then it will simply do nothing and cause no error.

What the code above means:

The code above simply means if the Add Theme Support function exists, use that function to add Menus feature. If it doesn’t exist, do nothing.

Step by Step

1. Open theme folder and find functions.php.
2. Open functions.php using Notepad or text editor of your choice.
3. Copy and paste the code above.
4. File > Save functions.php

Where to place the code

If the functions.php file of your theme is messy or you don’t really know where to place the code, go to the end of functions.php and paste the code before:

?>

A question mark immediately next to a right arrow marks the end of a set of codes. The last combination of question mark and right arrow in the file marks the end of the file. Normally, if you add any code right before the file ends, you’d have no problem. In the rare case that your theme has a functions.php file, but it’s empty, copy and paste the following code:

<?php
if (function_exists('add_theme_support')) {
	add_theme_support('menus');
}
?>

This set of codes is only slightly different from what you were first given. The additional

<?php

and

?>

at the beginning and ending of this set of codes means start PHP and end PHP. You may close functions.php. For the rest of this tutorial, you don’t need it. Now you’ve activated the Menu Management feature or user interface, here’s what it looks like:

Using Menu Management User Interface

If you use wp_nav_menu() in theme template files to display the menu, by default, it will list only links with a Page attached to it. But, what if you wanted to add custom external links without creating a new page just to point to it? For example, adding a Twitter link to your site’s main menu. Here’s how. First, create a custom menu because WordPress will not allow you to add, delete, or re-arrange links without at least having one custom menu. Name your menu then save it. For this tutorial, my first custom menu is named, “first.” After creating the custom menu, you have several options on Menu Management page to add links. For example, you can simply check the boxes next to the Pages and Categories you want to add then click the Add to Menu button. You can also add custom links and here’s what it looks like: Don’t forget to click the Save Menu button after adding new links.

How to Display Custom Menu

Like I mentioned before, wp_nav_menu() by default displays your list of links based on what Pages you have. It doesn’t display custom menu links. To display the custom menu wherever you want it to show up, copy and paste the following:

<?php wp_nav_menu('menu=first'); ?>

Replace “first” with the name of your menu.

What the code above means:

• Start PHP
• Use wp_nav_menu() to display menu
• The custom menu I want to use is “first.”
• End PHP

In whichever file you’re pasting it in, save the file. Upload this file to the theme folder on your server if you’re not directly editing it through the WordPress administration panel. I created a blank theme just for this tutorial. Here’s what it looks like for me after putting the code above in the index.php file of my blank theme. If you right click on the page currently displaying your menu and go to View Source, you get to see what this menu looks like under the hood. Here’s what it looks like for me:

<div class="menu-first-container">
<ul id="menu-first" class="menu">
	<li id="menu-item-4" class="menu-item menu-item-type-custom"><a href="http://son">son</a>
		<ul class="sub-menu">
			<li id="menu-item-6" class="menu-item menu-item-type-custom"><a href="http://grandchild">grand child</a></li>
		</ul>
	</li>
	<li id="menu-item-5" class="menu-item menu-item-type-custom"><a href="http://daughter">daughter</a></li>
</ul>
</div>

Wherever you see “first” in the set of codes above, you know it’s there only because I named the custom menu “first.”

Display Multiple Custom Menus

To do that, you have to first create the second menu. Here’s my second menu, which is conveniently named, “second.” And, I’ve added two links under the second menu. To display the second menu, duplicate code for the first menu and change menu=first to menu=second. If you named your second menu, “submenu,” then change menu=first to menu=submenu. Here’s the entire code:

<?php wp_nav_menu('menu=second'); ?>

Differentiating Custom Menus and Customizing Them

There are several ways to differentiate and customize custom menus. The most obvious one is using different names for first and second menus. The less obvious ways are customizing container_class, container_id, and menu_class. For example:

wp_nav_menu('menu=first&menu_class=my-main-menu');

Under the hood, by adding menu_class=my-main-menu using the ampersand sign (&), my menu list changes from:

<ul id="menu-first" class="menu">

to:

<ul id="menu-first" class="my-main-menu">

If you want to customize the container_class along with menu_class, here’s how:

wp_nav_menu('menu=first&menu_class=my-main-menu&container_class=container-name-goes-here');

As you can see, to add another customizable option to the menu, you simply use the ampersand sign, the option you’re customizing, and the value of that option, which can be any string of texts of your choosing. After you’ve added the code, save the file, refresh the web page, and check under the hood by choosing View Source to see the changes made. For a list of options you can customize or assign values to, go to wp_nav_menu at the WordPress Codex.