WordPress 3.x menu has a very nice feature where you can add descriptions with each menu items. But this feature is hidden by default. When enabled displaying these description is not supported sometime in few themes.
These menu descriptions provides a better user experience on your website and these descriptions can be used to show visitors more about a menu item.
Most of the themes are not designed with menu-item descriptions but here We can guide you how to enable menu descriptions in WordPress and how to add each menu descriptions in your WordPress theme.
You can follow these simple steps to show menu description for your WordPress theme:
1. Go to Menu section and click on screen option in top right.
2. Tick the checkbox of description and click back on screen option to close it.
3. You will see a description box with each of your menu item, so you can add what you want there.
These descriptions will not show in front of your website so to display menu descriptions we will have to add some custom code.
4. Add this custom code in functions.php file of your current theme. This Walker class extends the existing class in WordPress and it adds code to display menu item descriptions.
[code]
class Description_In_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_output = $args->before;
$item_output .= ‘<a’. $attributes .’>’;
$item_output .= $args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after;
$item_output .= ‘<br /><span class="sub">’ . $item->description . ‘</span>’;
$item_output .= ‘</a>’;
$item_output .= $args->after;
$output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
}
}
[/code]
5. WordPress themes use wp_nav_menu() function to display menus. In header.php file of theme and replace wp_nav_menu() function with this.
[code]
<?php $walker = new Description_In_Menu; ?>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’, ‘walker’ => $walker ) ); ?>
[/code]
6. Lastly you can style your menu item description. The code we added above displays item descriptions like this.
[code]
$item_output .= ‘<br /><span>’ . $item->description . ‘</span>’;
and this code will be executed on browser like this
<li id="menu-item-01"><a href="http://www.vivacityinfotech.com/">Home<br /><span>Start here…</span></a></li>
[/code]
Now you can add CSS in your theme’s stylesheet, similar to this but you can use like you want.
[code]
.menu-item {
border-left: 1px solid #ccc;
}
span.sub {
color:#FFF;
font-size:11px;
}
[/code]