Want to add different text after each menu item

Question

I want my main nav bar to display menu items with very short description of said menu under each item's title.

To do this, I was hoping to just inject the menu item's 'title' attribute into the 'after' function below. Not quite sure how to do this:

// the main menu
function bones_main_nav() {
    // display the wp3 menu if available
    wp_nav_menu(array(
        'container' => false,                           // remove nav container
        'container_class' => 'menu clearfix',           // class of container (should you choose to use it)
        'menu' => __( 'The Main Menu', 'bonestheme' ),  // nav name
        'menu_class' => 'nav top-nav clearfix',         // adding custom nav class
        'theme_location' => 'main-nav',                 // where it's located in the theme
        'before' => '',                                 // before the menu
        'after' => '',                                  // after the menu
        'link_before' => '',                            // before each link
        'link_after' => '',                             // after each link
        'depth' => 0,                                   // limit the depth of the nav
        'fallback_cb' => 'bones_main_nav_fallback'      // fallback function
    ));
} /* end bones main nav */

I'm also worried about this interfering with drop-down functionality. Any help would be greatly appreciated.

Answer 1

You need a Custom Walker for this.

In your Custom Walker you define the start of the element different, adding a span after the link:

class Walker_With_Title_Menu extends Walker_Nav_Menu  {

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $output .= sprintf( "\n<li><a href='%s'%s>%s</a><span class='your-line'>%s</span></li>\n",
            $item->url,
            ( $item->object_id === get_the_ID() ) ? ' class="current"' : '',
            $item->title,
            $item->title //additional %s in the span that I added
        );
    }

}

If you want something different written there, you could make a field in postmeta and insert it instead of the title.

Be sure to call your wp_nav_menu with the new Walker:

wp_nav_menu(array(
    'container' => false,                           // remove nav container
    'container_class' => 'menu clearfix',           // class of container (should you choose to use it)
    'menu' => __( 'The Main Menu', 'bonestheme' ),  // nav name
    'menu_class' => 'nav top-nav clearfix',         // adding custom nav class
    'theme_location' => 'main-nav',                 // where it's located in the theme
    'before' => '',                                 // before the menu
    'after' => '',                                  // after the menu
    'link_before' => '',                            // before each link
    'link_after' => '',                             // after each link
    'depth' => 0,                                   // limit the depth of the nav
    'fallback_cb' => 'bones_main_nav_fallback',     // fallback function
    'walker'=> new Walker_With_Title_Menu()         // **Using your new walker**
));

You can't do this when you call wp_nav_menu directly, because the after parameter does not allow a variable, it requires a string.