Design

How to Add Navigation Descriptions for the WordPress Custom Menu Widget

By December 8, 2015 One Comment

Adding Navigation Menu DescriptionsWebsite navigation is one of the most important components for traffic and flow of a website. It also allows search engines to easily navigate the site and houses all of the pages in one location. When creating a website navigation it’s important to research the industry and carefully plan out a sitemap. It’s also important to follow website standards so that visitors can find what they are looking for. This means the main navigation should be placed across the top of the page and the inner sub navigation should be placed to the left or right side of the page. But sometime website navigation styles can become repetitive and boring. So how do we fix this without straying too far from convention?

One of the best solutions I’ve come across is adding short page description to menu items. Not only does this give the user a descriptive foresight for what the page has to offer, but it can also add more appeal and a better user experience. Even witty page descriptions can add character and turn a dull navigation into so much more. So how do we make this happen?

Well, as a WordPress Web Designer, I’m always looking for new ways to make website and content updates easier for my clients. A simple solution would be to hard code the navigation in the back end with menu descriptions and page names. But this would never allow my clients to easily update on their own. It would actually be next to impossible if they had little to no html and css experience.

Luckily, WordPress has the capability of storing page descriptions right in the admin menu area, which we can use to create this feature in conjunction with the Custom Menu Widget. By switching a few settings and adding a few lines to the function.php file, you’ll be on your way to creating a dynamic menu system that not only you but also your clients can easily update and change.

Step One: Turn on menu descriptions under screen options.

Turning on menu descriptions is the first step in displaying descriptions. It’s as simple as clicking a button, but don’t be fooled, we still need to add a bit of code to get these to show up.

To turn on menu descriptions:

  1. Venture over to the Appearance > Menus tab in the WordPress admin navigation.
  2. Then click Screen Options in the top right corner – the tab will drop down.
  3. Look for Show advanced menu properties and select Descriptions.
  4. Also, if Custom Links has not been selected, you will want to turn that on now – we will need this for step 3.

Turn on menu descriptions under screen options - WordPress

Step Two: Add additional code to the functions.php file.

Add the code below to your functions.php file. This will allow the descriptions to show up after the menu items. Feel free to change the p tag and class to something that makes sense for your site.

function prefix_nav_description( $item_output, $item, $depth, $args ) {
    if ( !empty( $item->description ) ) {
        $item_output = str_replace( $args->link_after . '</a>', '<p class="menu-item-description">' . $item->description . '</p>' . $args->link_after . '</a>', $item_output );
    }
 
    return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'prefix_nav_description', 10, 4 );

Step 3: Create a new menu

Head back over to WordPress Menus under Appearance. Create a new menu name and start adding Custom Links. Repeat the steps below until your menu is complete.

  1. Add page URL (ex: /testimonials)
  2. Add page Link Text (ex: Testimonials)
  3. Then select Add to Menu

Add Custom Links - WordPress Menu

Now you will need to add the description:

  1. Open up the Custom Link
  2. Add a CSS Class for additional styles (ex: add a different color to each menu item)
  3. Add the Description (ex: What others are saying!)

Update Custom Link Description - WordPress Menu

Step 4: Add the Custom Menu Widget to your header widget area

Head on over to the Widgets under Appearance, and add the Custom Menu widget to your header widget area.

  1. Drag the Custom Menu widget to the appropriate widget area.
  2. Add a widget Title if applicable. You can always leave this blank.
  3. Select the Menu you just created and save!

Add Custom Menu to WordPress Widget Area

You’ll need to adjust the css to make your menu display beautiful, but you’re on your way to creating a dynamic menu system with custom descriptions that not only you but also your clients can easily update and change in the future!


Looking for inspiration? Below are some nice examples of Website Navigation with custom menu descriptions:

Harvest Creative Services 

Harvest Creative Services

The Creative Ham

The Creative Ham

Crickets Home Furnishing

Crickets Home Furnishing

Delta

Delta

Mortar

Mortar

Executive's Guide to Web Development

80 pages of topics and tips to navigate your way to a better website.

Join the discussion One Comment

  • Alek says:

    Hi,
    This is a great snippet and almost exactly what I’m after. Do you maybe know how to insert the description after the tag? not inside it.
    Much appreciated 🙂

Leave a Reply