WordPress Menus – How to enable & use them

The Addition of the Menu panel in the WordPress admin panel starting in WordPress version 3.0+ is a great addition to WordPress and really helps to solve quite a few problems.

Most newer themes have support for Menus via hooks into their templates. However, even templates that don’t have hooks can still use menus.

How Menus work is that they create area(s) that administrators can add & remove links to pages and custom urls. To create a Menu list, you simply enter your WordPress dashboard, and then under Appearances, find the “Menus” subsection.

Using Menus as widgets is powerful, but they’re much more powerful when you can also use them in dedicated areas that menus are great for in a WordPress theme. Most notably is the main navigation area usually somewhere within the header of a page.

If your theme does not have Menu Locations enabled, you can add them yourself pretty easily with a bit of code.

First, you’ll want to add a bit of code to your functions.php file in your theme’s directory

	// This theme uses wp_nav_menu() in two locations.
	register_nav_menus( array(
		'primary' => __( 'Primary Navigation', 'twentyten' ),
		'footer' => __( 'Footer Navigation', 'twentyten' ),
	) );

Above it is telling WordPress that there are 2 Menu locations within this theme we’re building. One is the Primary Navigation, the other is the Footer Navigation. You can add from 1 to as many menu locations as you’d like, but for each one you’ll need to add a new line like the 2 lines above.

Now that your Theme knows these 2 Menu locations exist, we want to add these locations to our template files.
You can add a menu in any template you’d like, but I’ll add one to the header.php file and one to the footer.php file.

I’ll add this code to my header.php file

 'menu-header', 'theme_location' => 'primary' ) ); ?>

and I’ll add this code to my footer.php file

 'menu-footer', 'theme_location' => 'footer' ) ); ?>

The 2 values I added (menu-header and menu-footer) are the class names of the unordered list that the Menu Items will be sitting in. The last bit of the 2 lines of code that have ‘primary’ and ‘footer’ correspond to the names we gave them in the functions.php file additions above.

Once you save these files and upload them, you’ll have new dropdown areas to attach Menus to in your Theme. Check out the screenshot below.

You can create as many menus as you’d like, and attach a single menu to many locations, or have different menus for each location.