WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Themes» How to Add Menu Descriptions in Your WordPress Themes

How to Add Menu Descriptions in Your WordPress Themes

Last updated on November 30th, 2016 by Editorial Staff
131 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add Menu Descriptions in Your WordPress Themes

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.

How to add menu descriptions in WordPress themes

Note: This tutorial requires you to have fair understanding of HTML, CSS, and WordPress theme development.

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.

Menu Descriptions

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.

Enabling menu descriptions in WordPress

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

Description field added to menu items

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.

Additional Resources

How to Style WordPress Navigation Menus

How to Add Custom Items to Specific WordPress Menus

Bill Erickson’s Menus with Description Class

131 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

49 Comments

Leave a Reply
  1. Norman says:
    Nov 11, 2020 at 9:47 am

    Hi,
    How can you make the description clickable too?

    Reply
    • WPBeginner Support says:
      Nov 11, 2020 at 10:19 am

      We cover that in step 4 :)

      Reply
  2. kayvan A.Gilani says:
    Oct 8, 2020 at 6:26 pm

    To Add Menu Descriptions in My WordPress Themes, I did step 1 and 2 of this blog but couldn’t follow in step 3 to move forward and perform the total change.

    Reply
    • WPBeginner Support says:
      Oct 9, 2020 at 10:32 am

      If you cannot find the function in your theme, we would recommend reaching out to your specific theme’s support and they should be able to assist.

      Reply
  3. yiannis says:
    Apr 22, 2020 at 3:51 pm

    Hi,
    How to disable product category description in max mega menu ?
    I have already gone to Mega Menu > General Settings and set Menu Item Descriptions to disabled but the problem exists.

    Reply
    • WPBeginner Support says:
      Apr 23, 2020 at 9:46 am

      You would want to reach out to the plugin’s support and they would be able to assist with the setting not working correctly

      Reply
  4. Sergio says:
    Sep 7, 2019 at 12:15 pm

    Thank you very much!

    Reply
    • WPBeginner Support says:
      Sep 9, 2019 at 9:14 am

      You’re welcome :)

      Reply
  5. Lanka says:
    Feb 18, 2018 at 11:57 am

    Thank you so much, you saved me

    Reply
  6. JKLYN says:
    Jun 17, 2017 at 9:33 am

    Thanks. Saved my time.

    Reply
  7. dan says:
    Apr 7, 2017 at 11:03 am

    Can this work with the WP_Bootstrap_Navwalker ?

    as i’ve tried it and it breaks my site….

    Reply
  8. kalpana says:
    Dec 12, 2016 at 11:58 pm

    Thank you so much….was very useful to me….you saved my day

    Reply
  9. Steven says:
    Oct 11, 2016 at 2:00 am

    how to turn off the description in mobile layout?

    Reply
  10. Anzani Zahrani says:
    Aug 5, 2016 at 1:05 am

    Hello.. Please Help..
    How to add title category, not using title category description ?

    Reply
  11. Ido Schacham says:
    Apr 28, 2016 at 5:35 am

    Totally helpful, thanks!

    Reply
  12. Rahman says:
    Mar 24, 2016 at 7:09 am

    Great Tip but in menu description it does not support html tags. can anyone know about this?

    Thanks

    Reply
  13. Iryna says:
    Feb 22, 2016 at 3:07 pm

    Hi Guys,

    Any ideas how to allow html tags in the description?
    remove_filter(‘nav_menu_description’, ‘strip_tags’);
    this one not work for me.

    Reply
    • Damien Carbery says:
      Feb 23, 2016 at 4:33 am

      @Iryna: Can you post your code somewhere e.g. pastebin.com.
      Where you call remove_filter() will determine whether it works – it has to be called after the add_filter() call.
      Calling it just before the wp_nav_menu() call might work.

      Reply
  14. Max says:
    Jan 20, 2016 at 8:07 am

    Is there anyway for the description not to be hyperlinked?

    Reply
  15. Ashok says:
    Jul 1, 2015 at 3:20 am

    thanks…it worked. but in menu description it does not support html tags.

    Reply
  16. igorasas says:
    Sep 20, 2014 at 12:38 pm

    May already be there ready to plug-in? How this hack will work with the theme of “Twenty TwelveVersion: 1.5”
    ? And just as with the plugin wpml?

    Reply
  17. Guy says:
    Jun 11, 2014 at 7:23 am

    Thanks for the tip

    Reply
  18. Phong says:
    May 9, 2014 at 3:24 am

    Thank you, this was really helpful to just copy paste this and get the quick picture.

    Reply
  19. Chad says:
    Mar 10, 2014 at 1:18 pm

    Hey man, I added the walker class to functions.php, but I cannot find the wp_nav_menu in genesis theme. What am I missing? I have no idea what to do next?!?!

    Reply
  20. Ksenia says:
    Feb 27, 2014 at 6:10 pm

    You expain very well – detailed and clearly. 1 minute and menu items descriptions are ok. Thank you!

    Reply
  21. Mary Anne says:
    Feb 14, 2014 at 9:12 am

    Thank you so much for this tutorial. It was recommended to me and it worked perfectly for making the changes I wanted to make. However, in making these changes, I’ve lost my drop down sub-item menus. Any idea what affected that in the code change?

    Thank you for your time and tutorial

    Reply
    • WPBeginner Support says:
      Feb 14, 2014 at 12:12 pm

      It seems like a CSS issue, we are sorry we couldn’t be more specific. Try using Google Chrome’s developer tools to debug it.

      Reply
  22. Paul Renault says:
    Jan 29, 2014 at 11:57 am

    I have implemented the menu descriptions and it worked great. Now my client is asking for a line break within one of the descriptions. I have tried putting a carriage return and inserting a tag into the description field through the admin. It doesn’t appear in the front end. WP removes these edits. Is there a way to remedy this?

    Reply
    • WPBeginner Support says:
      Jan 29, 2014 at 8:53 pm

      If your client just wants spacing then you can use CSS for that.

      Reply
      • Paul Renault says:
        Feb 10, 2014 at 1:09 pm

        The client wants a line break. Is there a way that I can insert a tag in the description? If I put one in now it gets removed.

        Reply
  23. Barry says:
    Nov 5, 2013 at 3:12 am

    Great tutorial guys, just want to know how to implement this on a custom menu displayed using the Custom Menu widget?

    Reply
  24. Oryan Consulting says:
    Sep 27, 2013 at 11:19 am

    Thank you! Been working on WordPress for years and I’ve never even heard of this before. I was looking to remove the descriptions as they were very redundant on the site I’m working on. I looked everywhere for where they were coming from.

    Oh joy!

    Reply
  25. sambassador says:
    Sep 17, 2013 at 2:34 pm

    works!

    but for php 5.4 you’ll have to match the wp walker arguments for the start_el function:

    function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 )

    and find replace $item with $object.

    Reply
  26. Steve Covello says:
    Aug 28, 2013 at 9:03 pm

    You Rock!! Worked perfectly.

    Reply
  27. Kevin Gilbert says:
    Aug 24, 2013 at 1:43 am

    Perfect. This was just what I needed to finish up on a site. I had some issues with the CSS, but I finally figured it out and got it working. Thanks for the great articles.

    Reply
  28. Jon says:
    Aug 3, 2013 at 7:14 am

    Excellent tip. Worked perfectly!

    Reply
  29. Jedediah White says:
    May 29, 2013 at 10:32 am

    This worked perfectly for me. The class function is perfect too. Thanks a lot!

    Reply
  30. Pankaj says:
    May 17, 2013 at 7:23 am

    I needed to create same thing and I was totally lost.

    I was planning to do some stupid things to get this thing done.

    thank god I found this post and saved time and stress!

    I simply love this site got to know so much things.

    Thanks you so much for showing the easiest things here.

    Reply
    • Pankaj says:
      May 23, 2013 at 3:49 am

      The span tag is coming on sub-menus too.

      its not showing there but it is taking that much of space which makes it look too odd.

      is there any workaround for the same??

      Reply
  31. DiTesco says:
    May 10, 2013 at 9:35 am

    This is really a great tutorial and I was wondering if this would work on the Thesis 1.8.5? If not, it would be great if you can provide one. I will most certainly help you put it out there. Thumbs up!

    Reply
  32. svet says:
    Apr 23, 2013 at 6:03 am

    I followed your tutorial and added description to my menu. Thanks! However, when I am in mobile mode menu converts into dropdown menu and menu title and description are connected. For example, if my menu item is “about” and description “more about me”, the mobile version shows “aboutmore about me”. Is there a way to fix this?

    Reply
    • David says:
      May 8, 2013 at 12:53 pm

      I had the same problem. Here’s what I did.

      I changed this:
      $description = ! empty( $item->description ) ? ‘<span>’.esc_attr( $item->description ).'</span>’ : ”;

      To this:
      $description = ! empty( $item->description ) ? ‘<br /><span>’.esc_attr( $item->description ).'</span>’ : ”;

      Not sure if it’s the best solution, but it worked for me.

      Reply
      • Garrett Hyder says:
        Jun 3, 2013 at 3:02 am

        Thanks guys, I ran into what SVET and DAVID did with the mobile menu.
        The code seems to have changed my change was simply appending in a span with the dash seperator and in my desktop query simply suppressed it as was unneeded there.

        $item_output .= ‘ – ‘;

        Within my Desktop Only Query set the span to display none;
        @media only screen and (min-width: 740px) {
        header #submenu li span.dash { display:none; }

        Hope that helps, handled my issue nicely.

        Reply
  33. Nicola says:
    Feb 25, 2013 at 1:20 pm

    Great post – very clear, exactly what I needed and worked perfectly. Thank you!

    Reply
  34. Samedi Amba says:
    Feb 25, 2013 at 1:46 am

    Thanks for the Great Tutorial. I’ve done the major steps well, as you can see from
    http://ueab.ac.ke/demo/index

    I was stuck with the styling-how do I reduce the space between the Main Menu Label and the description? Your help is greatly appreciated.

    Reply
    • Editorial Staff says:
      Feb 25, 2013 at 7:16 am

      It has to do with the line-height of your .menu a class of your theme. If you reduce that, then the spacing will reduce itself.

      Reply
  35. Chris Rouse says:
    Feb 15, 2013 at 10:05 am

    Great post. I’ve tried to dig into this before but the previous instructions I found were not this easy to follow. I was able to drop the functions.php code in, figure out how to change the walker class in my header file (different for the theme I use, but straight forward), and get things going in about 15 minutes from start to finish.

    One piece that you might want to add is how to include the right border on the last menu item using the :last-child property.


    .menu-item:last-child {
    border-right: 1px solid #ccc;
    }

    Reply
  36. Damien Carbery says:
    Feb 14, 2013 at 4:30 pm

    Instead of extending Walker_Nav_Menu it would be nice (and easier) if a filter was provided e.g.
    If the core code had:
    $item_output .= apply_filters( ‘walker_nav_menu_description’, $item->description);

    Then the custom filter function would just have:
    return ” . $description . ”;

    Reply
  37. Cathy Earle says:
    Feb 13, 2013 at 7:38 pm

    Great info … going to start adding this to my sites. Thank you!

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
SeedProd Logo
SeedProd
Create beautiful custom landing pages - Drag & drop builder. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
AliDropship Coupon Code
AliDropship Coupon
Get 15% off on AliDropship WordPress and WooCommerce dropshipping plugin.
Beaver Builder Coupon Code
Beaver Builder Coupon
Get the best possible price on this easy drag-and-drop page builder plugin. From just $99 in 2020.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.