WordPress menu system has a built-in feature where you can add descriptions with menu items. However, this feature is hidden by default. Even when enabled, displaying them is not supported without adding some code. Most themes are not designed with menu-item descriptions in mind. In this article we will show you how to enable menu descriptions in WordPress and how to add menu descriptions in your WordPress themes.

Step 1: Turn on Menu Descriptions

This will enable descriptions field in your menu items. Like this:

Now you can add menu descriptions to items in your WordPress menu. However, these descriptions will not yet appear in your themes. To display menu descriptions we will have to add some code.

Step 2: Add the walker class:

Walker class extends the existing class in WordPress. It basically just adds a line of code to display menu item descriptions. Add this code in your theme’s functions.php file.

class Menu_With_Description extends Walker_Nav_Menu {
	function start_el(&$output, $item, $depth, $args) {
		global $wp_query;
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

		$class_names = $value = '';

		$classes = empty( $item->classes ) ? array() : (array) $item->classes;

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
		$class_names = ' class="' . esc_attr( $class_names ) . '"';

		$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

		$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
		$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
		$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
		$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';

		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
		$item_output .= '</a>';
		$item_output .= $args->after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

Step 3. Enable Walker in wp_nav_menu

Open your theme’s sidebar-header.php file, it must like that below.

<?php theme_print_sidebar('header-widget-area'); ?>

    <div class="shapes">

            </div>

<div class="textblock object227400126">
    <?php get_search_form() ?>
</div>
<nav class="nav">
    <?php
	echo theme_get_menu(array(
			'source' => theme_get_option('theme_menu_source'),
			'depth' => theme_get_option('theme_menu_depth'),
			'menu' => 'primary-menu',
			'class' => 'hmenu'
		)
	);
	get_sidebar('nav'); 
?> 
    </nav>

And change the above code like this;

<?php theme_print_sidebar('header-widget-area'); ?>

    <div class="shapes">

            </div>

<div class="textblock object227400126">
    <?php get_search_form() ?>
</div>
<nav class="nav">
<?php $walker = new Menu_With_Description; ?>

<?php wp_nav_menu( array( 
				'source' => theme_get_option('theme_menu_source'), 
				'depth' => theme_get_option('theme_menu_depth'), 
				'theme_location' => 'primary-menu', 
				'menu_class' => 'hmenu', 
				'walker' => $walker ) ); 
get_sidebar('nav');
?>

    </nav>

Step 4. Styling the Descriptions

The walker class we added earlier displays item descriptions at this line of code:

$item_output .= '<br /><span class="sub">' . $item->description . '</span>';

To change how your descriptions appear on your site, you can add CSS in your theme’s stylesheet. We were testing this on Twenty Twelve and used this css.

.menu-item {
border-left: 1px solid #ccc;
}

span.sub { 
font-style:italic;
font-size:small;
}

And here is my client’s website menu, created with artisteer.