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:
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.