WordPress – Show Menu Item Description In Your Theme

wordpress-menu-description

Where is description of menu items

WordPress menu system has a built-in feature to add descriptions to each menu items. By default this feature is hidden.

You can enable this feature from:
Dashboard -> Appearance -> Menus.
Click on Screen Options button at the top right corner of the page and check the Descriptions box.

wordpress-menu-description

After checking Descriptions box, you will get option to enter description for each menu item.

wordpress-menu-item-description

Description do not appear in menu

Not all themes are coded to show menu description. Add below code in functions.php of your theme to show menu description.

1
2
3
4
5
6
7
8
9
10
11
/**
 * Add menu description in main menus
 */

 function show_menu_desc( $item_output, $item, $depth, $args ) {

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

  return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'show_menu_desc', 10, 4 );

In above code change primary to your menu location.

Styling description

Use CSS to style description.

1
2
3
4
5
6
7
/* menu description */
.menu-description {
  display: block;
  font-size: 0.8em;
  font-weight: 400;
  text-align: center;
}

This is a sample menu created using above code.
wordpress-menu-with-description

I hope this article was helpful to you.

Related Posts

Leave a Reply

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