How to Add Menu Descriptions in Your WordPress Themes

Uncategorized

WordPress menu system has a built-in feature where you can add descriptions with menu items. However, this feature is hidden by default. Even when enabled, displaying them is not supported without adding some code. Most themes are not designed with menu-item descriptions in mind. In this article we will show you how to enable menu descriptions in WordPress and how to add menu descriptions in your WordPress themes.

When and Why You Would Want to Add Menu Descriptions?

Some users think think that adding menu description will help with the SEO. However, we think that the main reason why you would want to use them is to offer a better user experience on your site.
Descriptions can be used to tell visitors what they will find if they clicked on a menu item. An intriguing description will attract more users to click on menus.

Step 1: Turn on Menu Descriptions

Go to Appearance » Menus. Click on Screen Options button at top right corner of the page. Check the Descriptions box.

This will enable descriptions field in your menu items. Like this:

Now you can add menu descriptions to items in your WordPress menu. However, these descriptions will not yet appear in your themes. To display menu descriptions we will have to add some code.

Step 2: Add the walker class:

Walker class extends the existing class in WordPress. It basically just adds a line of code to display menu item descriptions. Add this code in your theme’s functions.php file.
class Menu_With_Description 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 );
}
}

Step 3. Enable Walker in wp_nav_menu

WordPress themes use wp_nav_menu() function to display menus. We have also published a tutorial for beginners about how to add custom navigation menus in WordPress Themes. Most WordPress themes add menus in header.php template. However, it is possible that your theme may have used some other template file to display menus.
What we need to do now is find wp_nav_menu() function in your theme (most likely in header.php) and change it like this.

<?php $walker = new Menu_With_Description; ?>

<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’, ‘walker’ => $walker ) ); ?>
In the first line we set $walker to use walker class we defined earlier in functions.php. In the second line of code, the only extra argument we need to add to our existing wp_nav_menu arguments is ‘walker’ => $walker.

Step 4. Styling the Descriptions

The walker class we added earlier displays item descriptions at this line of code:

$item_output .= ‘<br /><span class=”sub”>’ . $item->description . ‘</span>’;
The above code adds a line break to the menu item by adding a
tag and then wraps your descriptions in a span with class sub. Like this:

<li id=”menu-item-99″ class=”menu-item menu-item-type-post_type menu-item-object-page”><a href=”http://www.example.com/about/”>About<br /><span class=”sub”>Who are we?</span></a></li>
To change how your descriptions appear on your site, you can add CSS in your theme’s stylesheet. We were testing this on Twenty Twelve and used this css.

.menu-item {
border-left: 1px solid #ccc;
}

span.sub {
font-style:italic;
font-size:small;
}

We hope that you will find this article useful and it will help you create cool looking menus with menu descriptions in your theme. Questions? Leave them in comments below.

No Comments

Leave a Reply

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

Uncategorized
What Exactly is WordPress

Whether it’s visiting us at Speckyboy or other design/development blogs, you’ve undoubtedly run into countless articles about WordPress. There are all sorts of rundowns of terrific plugins, themes or tutorials on how to do just about anything with the popular content management system (CMS). That’s all well and good. Sometimes, …

Uncategorized
How to Find the Best WordPress Theme for Your Business

You’ve probably already heard how WordPress is a very popular platform for bloggers, and chances are, a majority of the blogs you read every day were created with WordPress. While it is the best blogging software available, thanks to some great theme developers, WordPress has now also become arguably the …

Uncategorized
What exactly are wordpress theme frameworks

Much of the impression that customers or users have about a company comes from the official website. Before they start to read the contents, the first thing that their eyes will grace is the overall aesthetics where they can make inferences about trustworthiness, credibility, and whether they like you or …