Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Normal Wordpress Menu looks like:

Home | Blog | About us | Contact

But I've seen many pages with descriptions under these links:

Home Page | Our Blogs | About us | Contact
....meet us...| read more| basic info| contact form

How to achieve this?

(I want it to be core function for all my themes, so no plugins please, I just want to know how it's done)

share|improve this question

3 Answers 3

up vote 65 down vote accepted

You need a custom walker for the nav menu. See this article for the details.

Basically, you add a parameter 'walker' to the wp_nav_menu() options and call an instance of an enhanced class:

wp_nav_menu(
    array (
        'menu'            => 'main-menu',
        'container'       => FALSE,
        'container_id'    => FALSE,
        'menu_class'      => '',
        'menu_id'         => FALSE,
        'depth'           => 1,
        'walker'          => new Description_Walker
    )
);

The class Description_Walker extends Walker_Nav_Menu and changes the function start_el( &$output, $item, $depth, $args ) to look for $item->description.

A basic example:

/**
 * Create HTML list of nav menu items.
 * Replacement for the native Walker, using the description.
 *
 * @see    http://wordpress.stackexchange.com/q/14037/
 * @author toscho, http://toscho.de
 */
class Description_Walker extends Walker_Nav_Menu
{
    /**
     * Start the element output.
     *
     * @param  string $output Passed by reference. Used to append additional content.
     * @param  object $item   Menu item data object.
     * @param  int $depth     Depth of menu item. May be used for padding.
     * @param  array $args    Additional strings.
     * @return void
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )
    {
        $classes     = empty ( $item->classes ) ? array () : (array) $item->classes;

        $class_names = join(
            ' '
        ,   apply_filters(
                'nav_menu_css_class'
            ,   array_filter( $classes ), $item
            )
        );

        ! empty ( $class_names )
            and $class_names = ' class="'. esc_attr( $class_names ) . '"';

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

        $attributes  = '';

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

        // insert description for top level elements only
        // you may change this
        $description = ( ! empty ( $item->description ) and 0 == $depth )
            ? '<small class="nav_desc">' . esc_attr( $item->description ) . '</small>' : '';

        $title = apply_filters( 'the_title', $item->title, $item->ID );

        $item_output = $args->before
            . "<a $attributes>"
            . $args->link_before
            . $title
            . '</a> '
            . $args->link_after
            . $description
            . $args->after;

        // Since $output is called by reference we don't need to return anything.
        $output .= apply_filters(
            'walker_nav_menu_start_el'
        ,   $item_output
        ,   $item
        ,   $depth
        ,   $args
        );
    }
}

Or, alternatively as @nevvermind commented, you could inherit all the functionalities of the parent's start_el function and just append the description to $output:

function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    parent::start_el($output, $item, $depth, $args);
    $output .= sprintf('<i>%s</i>', esc_html($item->description));
}

Sample output:

enter image description here

Now enable the description field in wp-admin/nav-menus.php to get the ability to edit this field. If you don’t WP just trashes your complete post content into it.

enter image description here

Further reading:

And that’s it.

share|improve this answer
7  
If for you inheritance != rewrite the whole method, just keep the same name, try this: public function start_el(&$output, $item, $depth, $args) { parent::start_el($output, $item, $depth, $args); $output .= sprintf('<i>%s</i>', esc_html($item->description)); } –  nevvermind Dec 14 '11 at 13:15
2  
@nevvermind You should at least check if the description has some content. ;) The position of the description in my sample code is just the the most simple way to illustrate the solution. If you need to get the description into the anchor, you have to re-build the whole function. –  toscho Dec 16 '11 at 10:38
1  
yes, you'd have to write the whole method, no doubt about it, but for people who need to (say...) append it, it might just save them a lot of head-aches. And this is all WP's fault. Arrrgh! –  nevvermind Dec 16 '11 at 14:47
    
@toscho, Nice one and I've used it in this answer by modifying a bit, may be you can make it better if I missed something, thanks. –  Sheikh Heera Aug 28 '12 at 14:24

This isn't better or worse than other suggestions; it's just different. It's short and sweet too.

Rather than using the description field as @toscho suggests, you could fill in the "Title" field on each menu item with the text you want, and then use this CSS:

.menu-item a:after { content: attr(title); }

It would also be easy to use jQuery to append it, but the text is ornamental enough that CSS seems appropriate.

share|improve this answer

You can also write a <span> element after the navigation label in menus and use the following CSS rule to change its display setting (it's inline by default):

span {display:block}
share|improve this answer
    
Well its a simple and easy solution but why use span if you make it block anyway? xhtml/html4 not allows block elements inside links, html5 however does, so just use div, and no need for any css! –  James Mitch Mar 5 '13 at 21:02

protected by Community Dec 20 '11 at 13:00

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.