Tuts Tuesday: Add Short Description in Main Menu

On this article, I would like to share to you on how to add a short description in the Main Menu.

Target Audience

This article is intended to the people who have knowledge in WordPress theme development.

Requirements

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.

Short Description in WordPress Menu

Themes in Action

The themes using the short descriptions (since the article published) are the following:

See you again, in the next Tuts Tuesday! Have a blast!

Categories: Tutorials, Tuts Tuesday

Tags: ,

Comments

  1. Menj 07.02.2012 Reply

    this is what I am looking for :) TY

Add a Comment