The Ultimate Guide to WordPress 3 Menus

When building a WordPress theme menus can be a major headache and source of trepidation. Luckily for us, WordPress 3 brought along with it a much-awaited menu creation system which makes life much easier for us. Let’s take a dive and explore the aspects of menu creation in WordPress.

Where to Find the Menu Builder

First of all, where can you find the new menu builder? It is located under the Appearance menu item in wp-admin. Click Menus and you will enter the menu management section. Here you will find a complete menu creator and builder that conveniently lets you add items to your menus through a drag and drop interface.

Creating Your First Menu

Let’s say your site contains a main menu, as most sites do.

1. In your Menus screen find the ‘Menu name’ text box and enter Main menu.
2. Click on the ‘Save Menu’ blue button.
   Your new menu will now appear in a tab. Notice that the ‘Theme locations’ section is telling us that our theme does not yet support menus. Time to fix that.

Add Menu Support and Register Positions

In order to enable menu support and register a location for our new menu, enter the following into your theme’s functions.php file. Once you save the file go back to the Menus screen and set the theme location as in the screenshot.

/* Add Menu support and add positions */
if (function_exists('add_theme_support')) {
    add_theme_support('menus');
}

add_action( 'init', 'register_my_menus' );

function register_my_menus() {
register_nav_menus(
	array(
		'main-menu' => __( 'Main Menu' ),
		'sidebar-menu' => __( 'Sidebar Menu' )  // Keep adding items to the array for more menu positions
		)
	);
}

Adding menu items

After a menu is created, then detail items can be added to the menu. Choose items like custom links, pages, and categories, from the left column to add to the menu. If you have created custom post types or custom taxonomies those too can be added to menus. If you don’t see your custom post types or taxonomies, look under the Screen Options to make sure they are checked to be Show on Screen.

After items have been added to a menu, drag and drop to put them in the order you want. You can also click each item to reveal additional configuration options. You can also drag a menu item a little to the right to make it a submenu, to create menus with hierarchy. You’ll see when the position of the drop target shifts over to portray the nested placement. When you have finished building your custom menu, make sure you click the Save Menu button.

You can specify a different navigation label for a menu item as well as other attributes.

Inserting a menu into your theme

Inserting a menu into your theme is also a piece of cake, just put the following code into your theme where you want the menu to appear:

wp_nav_menu( array( 'theme_location' => 'main-menu' ) );

Replace the ‘main-menu’ part with the name of your location if you had chosen another name when registering the menu earlier on. You can have as many menus as you like. Just be sure to change the theme_location.

You’re allowed even more control. wp_nav_menu() has several parameters you can use when displaying a menu.

• theme_location: The menu to call that is associated with the specific theme location.
• menu: Call a specific menu ID, slug, or name.
• container: The element that wraps around the list. The default is div but can be changed to nav if you’ve moved on to HTML 5.
• container_class: The CSS class of the container.
• menu_class: The CSS class given to the unordered list. This defaults to menu.
• fallback_cb: A function to call in the event that no menu items have been given. By default, wp_list_pages() will be called.
• before: Text that is displayed before the link text but within the link.
• after: Text that is displayed after the link text but within the link.
• link_before: Text that is displayed before the link.
• link_after: Text that is displayed after the link.
• depth: How many levels the menu should display, which is useful for things like drop-down menus. This is set to 0 (any level) by default.
• walker: Allows a custom walker PHP class to be defined to create the menu.
• echo: Whether to display the menu or return it for use in PHP. This defaults to true and displays the menu.

Building a Sitemap

The wp_nav_menu function can easily be used to build a sitemap for your site. We are going to go one step further and also register a shortcode for it. So after entering the following code in your theme’s functions.php file, you can insert the shortcode [listmenu menu=Sitemap] (replace Sitemap with the id, slug or name of the menu you want to list) anywhere on your posts or pages in order to output a sitemap which you’d have created in the Menus screen.

You can also use all the variables that come with the new wp_nav_menu function, like menu_class, or container so you can customize your menu really easy. Just separate the attributes by space like so:
[listmenu menu=Sitemap menu_class=sitemap_menu]

// Function that will return our WordPress menu
function list_menu($atts, $content = null) {
	extract(shortcode_atts(array(
		'menu'            => '',
		'container'       => 'div',
		'container_class' => '',
		'container_id'    => '',
		'menu_class'      => 'menu',
		'menu_id'         => '',
		'echo'            => true,
		'fallback_cb'     => 'wp_page_menu',
		'before'          => '',
		'after'           => '',
		'link_before'     => '',
		'link_after'      => '',
		'depth'           => 0,
		'walker'          => '',
		'theme_location'  => ''),
		$atts));

	return wp_nav_menu( array(
		'menu'            => $menu,
		'container'       => $container,
		'container_class' => $container_class,
		'container_id'    => $container_id,
		'menu_class'      => $menu_class,
		'menu_id'         => $menu_id,
		'echo'            => false,
		'fallback_cb'     => $fallback_cb,
		'before'          => $before,
		'after'           => $after,
		'link_before'     => $link_before,
		'link_after'      => $link_after,
		'depth'           => $depth,
		'walker'          => $walker,
		'theme_location'  => $theme_location));
}
//Create the shortcode
add_shortcode("listmenu", "list_menu")

Credit for sitemap shortcode idea: CozmosLabs