How to Add support for sub-menu item description in wordpress?

Question

I am working on a Custom Nav Walker and I want to use Description field in wordpress menu in my theme.

The field works fine as far as for First Level Menu items but when I add something in sub-menu items' description fields, nothing outputs.

I am using following custom nav walker function:

class description_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        ) .'"' : '';

       $prepend = '<strong>';
       $append = '</strong>';
       $description  = ! empty( $item->description ) ? '<img src="'.esc_attr( $item->description ).'" />' : '';

       if($depth != 0)
       {
                 $description = $append = $prepend = "";
       }

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
        $item_output .= $description.$args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

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

Any help would be highly appreciated!

Thanks

Abu

Answer 1

You are setting your $description to an empty string for any menu item except the top one:

   if($depth != 0)
   {
             $description = $append = $prepend = "";
   }

Thus, you get no output.

Answer 2

So much code for such a simple thing:) Add this code to your functions.php.

  //Adds description to our menu
 /**
 * Display descriptions in main navigation.
 *
 * CREDIT: Twenty Fifteen 1.0
 * See: http://wordpress.stackexchange.com/questions/14037/menu-items-description-custom-walker-for-wp-nav-menu
 * @param string  $item_output The menu item output.
 * @param WP_Post $item        Menu item object.
 * @param int     $depth       Depth of the menu.
 * @param array   $args        wp_nav_menu() arguments.
 * @return string Menu item with possible description.
 */
 function add_nav_description( $item_output, $item, $depth, $args ) {
if ( 'main-menu' == $args->theme_location && $item->description ) {
    $item_output = str_replace( $args->link_after . '</a>', '<div class="menu-item-description">' . esc_html( $item->description ) . '</div>' . $args->link_after . '</a>', $item_output );
}

return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'add_nav_description', 10, 4 );