How to show the description of the menu

@misterskippy – Have you had any luck with this? This is such a helpful feature, but I can’t seem to find any documentation on how to pull in the value for the “Description” field.

I would like to know this, too. Anyone?

I’ve been looking around, but the only thing I find are other people asking the same question, but nobody seems to know how…

Ok,

I’ve found out, how it can be done!

You have to use the “Walker” option in wp_nav_menu()!

Just add this to functions.php

<?php

class My_Walker 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 );
	}
}

and this to your header.php

<?php
       $walker = new My_Walker;
	wp_nav_menu(array(
	        'echo' => true,
		'container' => '',
		'theme_location' => 'primary',
		'menu_class' => 'grid-10 omega',
		'walker' => $walker
	));
?>

Thanks dennis! It worked.

Hopefully this helps other people who had the same problem as well.

I revised this slightly so that it would use the Title Attribute from the Menu items instead, and would include that text outside of the link:

class My_Walker 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 .= '</a><br /><span class="sub">' . $item->attr_title. '</span>'; /* This is where I changed things. */
		$item_output .= $args->after;

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

Anyone got any ideas on how to do the same thing but instead of displaying the title and description, show the item’s thumbnail?
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;

This line show the title, is there any way of doing $item->thumbnail or a workaround hack?

I was trying to do the same to develop my theme and stumble this article and really help me to learn about this. Needless to say “Thank You All” for sharing your knowledge with others that may have this problem(like me…).

I did a little modification to it(again). what I did was to add a class for the title to be able to style it with css. with this method you can style both the title and the description, using different classes in the css. Other thing I did was to include both, the title and the description in the same link so both of them are clickable not just the title (they are now in the same block LI with different classes)… here is the code

just one comment before the code, you can change name of the class of the title or the name of the class sub if those cause a conflict in your page…

<?php
    class My_Walker 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 .= '<span class="title">' . $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . '</span>' . $args->link_after;
        $item_output .= '<span class="sub">' . $item->attr_title. '</span></a>'; /* This is where I changed things. */
        $item_output .= $args->after;

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

By the way this is my first contribution to www.remarpro.com and I am still learning, I’m a beginner, and still developing my first theme.

I hope this help you people

PD. my English it’s not that good because it’s not my first language so, please forgive the inconsistencies in the text-form / spelling etc.