Add Support for Custom Navigation Menus - dummies

Add Support for Custom Navigation Menus

The WordPress menu-building feature is a great tool WordPress offers to theme developers. A navigation menu is a built-in theme feature that offers a listing of links displayed on your site. These links can be links to pages, posts, or categories within your site, or they can be links to other sites. Either way, you can define navigation menus on your site through the use of the Custom Menus built-in feature in WordPress.

Before the addition of this tool, each theme developer implemented his own menu solution, creating a huge number of themes that had little navigation customization that didn’t require coding and a small set of themes that had very different ways of handling navigation. Now creating complex, multi-level menus on your WordPress site takes just a few steps.

The WordPress core offers a number of great tools that can be easily added to a theme to give it more customization options. WordPress provides you with several built-in features that let you enhance your site and theme. Here’s how you add support for, or activate the Custom Menus feature in your own theme.

Providing at least one navigation menu on your site so that readers can see everything your site has to offer is to your advantage. Providing visitors with a link — or several — to click keeps with the point-and-click spirit of the web.

The Custom Menus feature in Twenty Ten

The Twenty Ten theme already supports menus. Looking at Twenty Ten’s functions.php file, you can see that the following lines of code handle registering the theme’s menu:

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

This code registers a single navigation area with a primary theme location name and a Primary Navigation human-readable name. With the Twenty Ten theme active, choose Appearance→Menus and then create menus using the Custom Menus feature in your Dashboard.

Display custom menus using widgets

You don’t have to use the wp_nav_menu(); template tag to display the menus on your site because WordPress also provides you with Custom Menu widgets that you can add to your theme, allowing you to use widgets, instead of template tags, to display the navigation menus on your site. This is especially helpful if you have created multiple menus for use in and around your site in various places.

Your first step is to register a special widget area for your theme to handle the Custom Menu widget display. To do this, open your theme’s function.php file and add the following lines of code:

if ( function_exists('register_sidebars') )

These few lines of code create a new Menu widget area on the Widgets page in your Dashboard. At this point, you can drag the Custom Menu widget into the Menu widget area to indicate that you wish to display a custom menu in that area. (If you have more than one menu, you can select which menu to display from the Select Menu drop-down list.)

The Menu widget area with the Custom Menu widget added is shown.


To add the Menu widget area to your theme, head over to the Theme Editor (choose Appearance→Editor), click the Header template (header.php) file, and add these lines of code in the area you want the Menu widget displayed:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Menu') ) : ?>
<?php endif; ?>

These lines of code tell WordPress that you want information contained in the Menu widget area displayed on your site.