Ben
Ben is a lifelong Nintendo fan who likes to build websites, and make video games. He buys way too much Lego.
Adding Menu Descriptions to WordPress Menus
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 );
Related Posts
WordCamp London 2019
Tada: And now your website is faster!
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.
Thank you for this.
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 🙂
Figured it out anyway 🙂 just moved the closing a tag before the description span tag