How to: Adding a Description to Your Navigation Menu

You don’t always need to add description information to your navigation menu, but sometimes it can be helpful for some categories. It isn’t anything special, just a small description of what you will find in the posts for each category. It took me a long time to find the right coding to use for my site to get this to work properly and the way I wanted it to and I wanted to make sure others would be able to find the instructions with ease and help them if they wished to do this to their site.

It is a super easy process. However, this method may only work with those who have a Genesis theme for their site.

Add description

The first step contains no coding, just a couple small steps so you can add the description to your menu.  This process is done in the Menus section of Appearance.

Step 1

When you arrive at the menus setting, you will want to click on the little tab that says Screen Options (just below the red words in the above picture).  It will then drop down some options for you.  You want to make sure the box next to Description is checked.  You can then close the Screen Options by clicking the tab again.

You will add description information here, whatever you put here will show up in your navigation menu.

When you select the category that you want to show the description for you will now see a section called Description.  This is where you will put in the description you would like to be seen by your readers.  Don’t make it too long or it may not fit once you get the coding all set up (that’s the next step). Once you have all the descriptions laid down for each category, you will then want to make sure you save the settings.  You will not see the changes made yet to your theme; you have to do the next steps first.

Step 2

Next you will want to edit your functions.php file.  You will just need to add a small piece of coding to the file, you can place it at the end of the file, but please make sure you copy the entire code and paste the entire code. If you are missing any part of it, then it will not work.

function be_add_description( $item_output, $item ) {
$description = $item->post_content;
if (' ' !== $description )
return preg_replace( '/(<a.*?>[^<]*?)</', '$1' . '<span class="menu-description">' . $description . '</span><', $item_output);
else
return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'be_add_description', 10, 2 );

Step 3

The last step is the styling of the menu description.  You can do this by adding a small code to your stylesheet (style.css).

.menu-description {
clear: both;
color: #999;
display: block;
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 12px;
font-style: italic;
}

You should only need to change the color, font-family, font-size, and font-style portion to match your theme.  For me, I changed the color to match my theme, the font-family to the font I use, and I added a font-weight to make the words bold so that it would match to my theme better.