How to Add Menu Descriptions in Your WordPress Themes

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.

How to add menu descriptions in WordPress themes

Note: This tutorial requires you to have fair understanding of HTML, CSS, and WordPress theme development.

When and Why You Would Want to Add Menu Descriptions?

Some users think think that adding menu description will help with the SEO. However, we think that the main reason why you would want to use them is to offer a better user experience on your site.

Descriptions can be used to tell visitors what they will find if they clicked on a menu item. An intriguing description will attract more users to click on menus.

Menu Descriptions

Step 1: Turn on Menu Descriptions

Go to Appearance » Menus. Click on Screen Options button at top right corner of the page. Check the Descriptions box.

Enabling menu descriptions in WordPress

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

Description field added to menu items

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 . '
  • About
    Who are we?
  • 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;
    }
    

    We hope that you will find this article useful and it will help you create cool looking menus with menu descriptions in your theme. Questions? Leave them in comments below.

    Additional Resources

    How to Style WordPress Navigation Menus

    How to Add Custom Items to Specific WordPress Menus

    Bill Erickson’s Menus with Description Class