Dealing with menu items

I feel as though this subject is a bit different than what I’m used to.

To a certain degree it is. I’ve never really dabbled much with the menu class within WordPress. I mean I used the wp_nav_menu template tag once or twice but never really looked as to how it works. That was until a few days ago when I saw something that really made me wonder. I had to ask myself the question of how to do it.

I, of course, turned to Google and looked for a tutorial or two. That was after I looked at the code for the menu class. ( Which can be found in the wp-includes folder )

I’m not going to lie when I say that I was a little confused by the code. The main reason being that it is so much of it. That and I really just skimmed it rather than actually tried to process the code. I know. I know. I need to read the code.

The reason

I bring this up because when I saw those little words on my computer screen I really had to do a bit of a double take. I had to look up and see if any theme had support for a menu description. Throughout all the themes I’ve had a chance to review and all the themes I’ve come across I don’t think I ever really got a chance to experiment with that feature.

Yes. A feature. As it turns out not many themes are able to–or do really–have that support.

How?

I wondered about how I could do this without having to deal with a lot of code. After all it should be simple.

Right.

At least I like to think so. I did some reading and some experimenting and I wanted to share some information.

The method I liked best.

I mean, after all, in WordPress there are several ways of achieving the same result. The one I want to share is a really simple one. All you are adding is about eight lines of code. Very simple, right?

So here goes.

class Descriptive_Menu extends Walker_Nav_Menu {
    function end_el( &$output, $item, $depth = 0, $args = array() ) {
        if ( $item->description ){
            $output .= '<span class="menu-description">' . $item->description .'</span>';
        }
        $output .= "</li>\n";
    }
}

Seems a little odd? Not really.

Let’s walk through what it is doing, shall we?

The first line is actually extending the Walker_Nav_Menu class and we are really doing is appending a span tag just before the end of the list item ends. But we are only doing that if there is a description available.

In order to have a description you go to the Menus screen, expand the screen options and make sure you have “Description” selected under the “Show advanced menu properties” section.

Now, in order to show it you will have to add one minor thing to wp_nav_menu. In the array you will want to add:

'walker' => new Descriptive_Menu()

So go on. Try it out. Experiment by extending certain parts of the Walker_Nav_Menu like start_lvl, end_lvl, or even start_el.

Published by

Jose

Born in El Salvador. Loves to read, write, draw, paint, build, test, typography, hike, photography, art, design, sewing, and many other things.