WordPress Custom Menus

Recently introduced in WordPress 3 is the ability to create custom menus.  For anyone who has ever developed a theme, this was long a overdue feature.  In this tutorial we are going to look at the new menu system and how to implement it.

We are going to be using our site as an example for this tutorial.  As you can see from the picture below, we have two custom menus built into our site.  The top menu we will refer to as the “Primary Menu” and the bottom menu we will refer to as the “Secondary Menu”.

Add the menu function

The first thing we need to do is open up your themes functions.php file and add the following code:

add_action( 'init', 'my_custom_menus' );

function my_custom_menus() {
	register_nav_menus(
		array(
			'primary-menu' => __( 'Primary Menu' ),
			'secondary-menu' => __( 'Secondary Menu' )
		)
	);
}

This code creates a new function “my_custom_menus”, which you can name whatever you want. Within this function, we call “register_nav_menus” which takes two arguments, the slug which is called from within our code and the label which you will be used in the WordPress menu manager. As you can see, we have defined both the Primary and Secondary menus. That’s it for the functions.php file, so you can save and close it now.

Modifying the template

Next we want to open up the template file that will contain our navigation.  For our example, that is the header.php file.  After we locate the spot we want our primary menu to be displayed at, we paste in this code:

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

and then we do the same for the secondary menu at it’s location in the document:

<?php wp_nav_menu( array( 'theme_location' => 'secondary-menu', 'menu_class' => 'secondary', 'fallback_cb' => '') ); ?>

As you can see, we define a theme_location which corresponds to the appropriate menu.   We then define a menu_class, which will be the CSS class used for the unordered list the menu uses.   We are also leaving fallback_cb blank, so if a menu doesn’t exist, nothing is displayed.

Take a look at the WordPress Codex for a complete list of the parameters you can use.

Creating your menu

Now that we have taken care of the code portion of this tutorial, all that’s left is to create our menu.  WordPress’s new menu system is very easy to use and allows you to combine pages and categories to create any menu you want.

From your WP admin Dashboard, go to Appearances > Menus and you will see the menu builder.  The first thing you need to do is set your new menus in the “Theme Locations” box in the upper left hand corner.

Next you will want to select which menu you would like to create first.

You can then start adding Pages or Categories to your menu.  Once added, you can re-arrange and create sub-menus by simply dragging and dropping the menu items.

Don’t forget to click save after you have created your new menu!