Skip to content

Adding Menu Descriptions to WordPress Menus

An example of the menu descriptions visible on the upcoming redesign of the Binary Moon theme.
An example of the menu descriptions visible on the upcoming redesign of the Binary Moon theme.
In WordPress there’s an option to add custom descriptions to Menu links – but by default there’s no way to display these descriptions. I’m currently redesigning Binary Moon and wanted to add descriptions to the menu – so I thought I’d work out how to do it.

Googling around it seemed that I would have to create a custom walker class and do all sorts of complicated stuff – but then I realised the current default theme, Twenty Fifteen, has menu descriptions – and their solution is super simple.

It’s just a filter on the returned link menu items using a str_replace to inject the description.

/**
 * Add descriptions to menu items
 */
function bm_nav_description( $item_output, $item, $depth, $args ) {

    if ( 'primary' == $args->theme_location && $item->description ) {
        $item_output = str_replace( $args->link_after . '</a>', '<div class="menu-item-description">' . $item->description . '</div>' . $args->link_after . '</a>', $item_output );
    }

    return $item_output;

}

add_filter( 'walker_nav_menu_start_el', 'bm_nav_description', 10, 4 );

Ben View All

Ben is a lifelong Nintendo fan who also likes to build websites, and develop games. He also buys way too much Lego.

5 thoughts on “Adding Menu Descriptions to WordPress Menus Leave a comment

  1. Yep – what’s also nice is that while you can assign CSS classes right from the Menu admin, you can also just chuck some inline css, spans, etc right into the label field.

    • nice – thanks for the tip. I knew about the custom classes, but didn’t realise you could add some html in there as well.

  2. Hi,
    This is a great snippet and almost exactly what I’m after. Do you maybe know how to insert the description after the tag? not inside it.
    Much appreciated 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *