Skip to main content

WordPress – Show Menu Item Description In Your Theme

Submitted by admin on Thu, 12/09/2021 - 09:30
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 arrow Appearance arrow 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.


/**
 * 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( '', '', $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.


/* 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.

Tutorial Category