Designers aren’t cruel, sometimes they just don’t know better… I should know, I am one. If you’ve been developing for any amount of time you’ve run into a design concept that has great ideas without a great way to implement them. In my case, I often design first and worry about coding later.
A few years ago I ran into an situation where I wanted to have two line navigation elements styled slightly differently. While I first thought this to be difficult if not impossible with WordPress, turns out there is an easy solution.
Since the introduction of the WordPress menu system there has been an extra, under utilized field for each menu item called “Link Description.” The link description isn’t output to the template by default, but a little bit of code will change that.
Adding Link Descriptions to Your Template
The first step is of course enabling custom menu support through your theme. This can be done with the following simple code in your functions.php file:
You will then find a “Menu” link in your appearance tab with in the WordPress administration interface. Once clicked on make sure that you turn on “link description” with in the Screen Options.
At this point we can now define where we would like our menu to display in our theme by adding the following function to our theme file(s):
This will output the menu assigned to the Primary Menu location. It won’t however output the description. We’ll need to take advantage of the WordPress Walker_Nav_Menu class to do so.
We can do so by creating a custom class in our functions.php, such as the following:
That’s all it takes! You will now have the link description wrapped in a span after the menu title. You can tweak this to your hearts desire by editing the $item_output lines of code.
Join thousands of designers, marketers and business leaders who receive notifications when we’ve published new design, inbound, and other digital resources. We publish less than once per week and you can unsubscribe anytime.
Design and marketing insights, tips, and resources that will help you to make informed decisions and achieve better results.