How to Add Short Description in Main Menu

 

The only requirement needed is to have the menu location registered in a theme’s functions.php file (if your theme does not have it, create it).

register_nav_menus(array('main'))

If your theme has a line similar to abovementioned code, this is no longer necessary. Otherwise, add the code to the said functions.php file in your theme of your choice.
Please note that I will use main as an example for menu location. Other names for menu location will do.

Code Insertion

Still in your functions.php file, add the following code.

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
 
 function start_el(&$output, $item, $depth, $args) {
  global $wp_query;
  $indent = ($depth) ? str_repeat("\t", $depth) : '';
 
  $class_names = $value = '';
 
  $classes = empty($item->classes) ? array() : (array) $item->classes;
 
  $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item));
  $class_names = ' class="' . esc_attr($class_names) . '"';
 
  $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
 
  $attributes  = ! empty($item->attr_title) ? ' title="'  . esc_attr($item->attr_title) .'"' : '';
  $attributes .= ! empty($item->target)     ? ' target="' . esc_attr($item->target    ) .'"' : '';
  $attributes .= ! empty($item->xfn)        ? ' rel="'    . esc_attr($item->xfn       ) .'"' : '';
  $attributes .= ! empty($item->url)        ? ' href="'   . esc_attr($item->url       ) .'"' : '';
 
  $item->description = trim($item->description);
  $description = ! empty($item->description) ? $item->description : 'Describe the page.';
 
  $item_output = $args->before;
  $item_output .= '<a'. $attributes .'>';
  $item_output .= $args->link_before;
 
  if (0 == $depth) { // If at topmost level, add a short description.
   $item_output .= '<span class="link-title">' . apply_filters('the_title', $item->title, $item->ID) . '</span>';
   $item_output .= '<br />';
   $item_output .= '<span class="link-descr">' . $description . '</span>';
  } else { // Show only the menu name.
   $item_output .= apply_filters('the_title', $item->title, $item->ID);
  }
 
  $item_output .= $args->link_after;
  $item_output .= '</a>';
  $item_output .= $args->after;
 
  $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
 }
 
}

Then, in header.php file, insert the following code.

<?php
 wp_nav_menu(array(
  'theme_location' => 'main',
  'container'      => false,
  'walker'         => new My_Walker_Nav_Menu()
 ));
?>

Make sure that the theme location is registered. Setting the walker attribute in wp_nav_menu function is important. Otherwise, the function will run the default menu navigation bar instead.

Final Step

The description field in the Menus under Apperance Panel is, by default, hidden. In order to show the description field do the following:

1. Go to Appearance > Menus
2. Click the “Screen Options” at the top right portion of the admin panel.
3. Tick “Description”

And then in menu field, the description field in the menu is shown. Fill in the short description whenever you like.