Custom Menus

Custom menus were introduced in WordPress 3.0.0 and made it very intuitive and easy for non-technical people to create their own navigation schemes, for their blogs. One feature that is not so intuitive is multiple menus. Why would you want multiple menus? They can help your readers drill-down to more specific content categories, without overwhelming them with large, unwieldy, drop-downs.

Basic WordPress menu with 4 categories and an About page

Navigation is an art. Like writing, photography or poetry, it seems simple at first glance; present the reader with all of the different categories in your blog and let them choose the one that they are looking for. This is often too much information, though, which paralyzes readers into a state of indecision.

Creating drop-down menus in the Menu Editor

One strategy to help the reader drill-down to more specific content on your blog is to create drop-down menu selections. For instance, I currently have several pages of WordPress posts, here on TaB. I could further categorize those posts by assigning a WordPress Tag to the posts, based on their specific content. In this example, I created three tags for my top-level WordPress category; setup, themes and functions. The menu label can be more descriptive than the Tag itself, so although my tag for posts about setting up a blog is “setup”, the drop-down menu will display Blog Setup.

Resulting drop-down menu for my WordPress category

Drop-down menus are the most common method of providing readers with a method of drilling-down into more specific content, on blogs. There are a few problems with them, however. For one, drop-down menus do not work on Internet Explorer 6, which is still a prevalent browser. In addition, although drop-down menus initially hide the specific selections from the reader, they encourage the reader to view each drop-down anyway, which leads to selection-paralysis.

Use Multiple Custom Menus to Guide Readers

Creating a second menu in the WordPress Menu Editor

Instead of presenting the reader with multiple navigation choices on every page, another strategy is to only display additional drill-down navigation options on each top-level category page. Using my example, the reader would first select WordPress, which would take them to that particular category archive page. In addition to displaying all of the posts in the WordPress category, the reader would also see drill-down selections for Theme Modification, Custom Functions and Blog Setup subtopics.

Register Additional Menus

By default, the Twenty Ten theme supports 1 menu

By default, the WordPress Twenty Ten theme only supports one navigation menu. Fortunately, WordPress made it easy to add additional navigation menus to the theme, by registering additional menus in the functions.php file. The navigation menu function resides inside the theme setup function, which comprises all of the code between “if ( ! function_exists( ‘twentyten_setup’ ) ):” and “endif;”. You can register additional menus in the Twenty Ten theme’s function.php file, directly, although your changes will be overwritten the next time you upgrade WordPress. You can also create a child theme and copy all of the code between the “if” statements, into your child theme’s functions.php file.

// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'twentyten' ),
) );

Registering additional menus is as simple as copying Line 3 and changing ‘primary’ to a unique name, such as ‘secondary’ and changing ‘Primary Navigation’ to the name of your new menu.

// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'twentyten' ),
'second' => __( 'wordpress', 'twentyten' ),
'third' => __( 'marketing', 'twentyten' ),
'fourth' => __( 'technology', 'twentyten' ),
) );

Implement Additional Menus

Second menu below the category description on the category archive page

Assuming you have created tags to more-specifically categorize each of your blog’s post, within your blog’s categories, you can now implement additional custom menus that will allow readers to navigate to these tag pages. This is done by adding conditional statements to the category.php file, that will call the appropriate custom menu, based on which category archive page that the reader is viewing.

Modifying the category.php template with additional custom menus, based on the category

Locate the section of category.php that generates the category description. Add successive “if” statements to output the appropriate custom menu, based on the category page. You can give each container_class a unique name, as shown here, to allow individual CSS customization, or use a common name for each menu, if they will be styled the same.

Style Your Custom Menu

Additional custom menu on the category archive page

Each custom menu that you create will get its own div, based on the name you give to the container_class identifier. This makes it easy to style your new menu with a little CSS, to make it fit-in with your overall design.

.menu-wordpress {
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
font-size: 16px;
margin-left:70px;
}
.menu-wordpress ul {
list-style: none;
}
.menu-wordpress li a:link {
float: left;
display:inline;
position: relative;
margin:-14px 10px 14px 0;
text-decoration: none;
}

Custom menus are easy to implement in WordPress and, with a little thought to your overall navigation scheme, can provide you with a dynamic tool to improve your reader’s ability to locate the content that they are looking for.