Using the Link Description in WordPress for Multi Line Menus

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:

1

2

3

4

5

6

7

8

add_action('init','threeseven_register_menus');

functionthreeseven_register_menus(){

register_nav_menus(

array(

'primary-menu'=&gt;__('Primary Menu')

)

);

}

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