Cacher is the code snippet organizer for pro developers

//* Add description to menu items
add_filter( 'walker_nav_menu_start_el', 'wpstudio_add_description', 10, 2 );
function wpstudio_add_description( $item_output, $item ) {

    $description = $item->post_content;
    if (' ' !== $description ) {
        return preg_replace( '/(<a.*)</', '$1' . '<span class="menu-description">' . $description . '</span><', $item_output) ;
    }
    else {
        return $item_output;
    };

}

I recently found out that in WordPress there is an option to add custom descriptions to menu items. This looks nice but there’s no default way to display these descriptions at the front-end.

In my new theme, I thought it would be nice to display the webshop categories / menu-items using a custom description. Online I’ve found some snippets but none seems to work well. Hereby I share my solution with you.

First, enter the WordPress back-end at Appearance >Menus. Next click in the top right corner the ‘Screen Options‘ button. Finally select the descriptions box.

When opening an menu-item a description input field is visible now.  You only have to add a description and save the menu.