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.
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.
You are so awesome at this WordPress stuff! Most changes I make I freak out over because I am so afraid of ruining something. Your descriptions are great — nice work! Now, to remember if I still use Genesis. If so, I am totally doing this. Thanks for the tutorial :)
Just remember, make a copy of any files you are going to edit before you make any adjustments. You can even just copy and paste the original code into a notepad or word file and then copy and paste it back if you don’t like the changes or something goes wrong. As long as you have a copy prior to making changes you can always get your site back to the way it was.
And yes, you are using Genesis LOL
Great tutorial! As a designer, I love finding tutorials that are simple to send to clients when they aren’t quite ready to pay me to do it for them. So many are scared of their php and css, lol!
That is how I do all my changes, I use Google and find the most simple tutorial for the job. When I did this one I found about 10 different ones and this was one of the ones that had the least amount of editing and was super easy to do. If I can do it in 3 steps over 10 steps than I’m going with the 3 step process.
Blah, I’m on blogger, but this looks so cool.
Gotta move on up Amber, get on WordPress!
Thanks for the tips you always find out the coolest things and it was so nice of you to share.
OMG- this is awesome! Thanks for this tip! I believe I have Genesis on all of my sites. I would love to add this!
Super easy to do and literally only takes a couple minutes to complete. The longest part is adding in the descriptions for the menus!