Customizing WordPress Menus

Over the past few days I’ve had a few people ask me some specific questions on customizing menus. Since none of them are long enough to justify a full post, I thought I’d make one post with all the tips.

• Using Menu Descriptions
• Showing certain pages to logged in users
• Adding Extra Code to the Menu

Using Menu Descriptions

From the Menus screen, click on Screen Options in the top right and check “Description”. You can now write a description for any of your links. Unfortunately these descriptions can’t be displayed without writing some custom code. We’ll need to create what’s called a walker class.

Place this in your functions.php file:

We’re basically creating the markup for the menu. The key here is the line with this: $item->description

That adds the description to the link, wrapped in a .sub class.

Now all you’ll need to do is include the walker in your wp_nav_menu() arguments.

Showing certain pages to logged in users

One of the most powerful features of WordPress menus is Classes. From the Appearance > Menus screen, click Screen Options in the top right corner and check Classes. You’ll now be able to add custom classes to any menu item.

For this specific technique, add the class “logged-in-nav” to the menu items you want visible only to logged in users. Then, add the following CSS to your stylesheet.

In Genesis (and probably other themes), when a user is logged in it adds the body class “logged-in”. If your theme doesn’t have this already, you can use the body class filter to add it.

Adding Extra Code to the Menu

As described at the end of my last post on Theme Settings, there are some useful filters for modifying the output of menus.

There’s two filters that you can use, depending on how much you know about the menu.

wp_nav_menu_items – runs on all menus
wp_nav_menu_{menu-name}_items – only runs on that specific menu (ex: wp_nav_menu_primary_items if the menu is named Primary).

There are two parameters for each filter, $menu and $args. The $menu object contains the actual menu. If you need to modify the actual content of the menu, you’ll need to modify this object (ex: using preg_replace to add or change classes on certain menu items). A lot of times I won’t need to modify the actual content, I’ll just want to stick something on the end. In that case I’ll do something like this:

That will add extra code to the end of the menu (I’m returning the original menu intact, as well as my addition, $extras.

The other parameter, $args, contains information about the menu. For instance, let’s say we want to add something to the end of the Secondary menu in Genesis. Since we’re using a theme location, the menu could have any name (so we can’t use the second filter). We’ll use the first and use the $args to figure out if we’re on the secondary menu.