Redesigning WordPress Menus: Custom Walker Class

One of the USPs of WordPress is that it is an open source web publishing platform. Like every open source piece of software, it’s free for you to tweak and customize the way you see fit. And one of the many possibilities while personalizing your WordPress website is that you can change the way it displays menu items on the site.

Such personalizations can be implemented using the Walker Class. Once you create a menu from your WordPress backend i.e. Appearance > Menus, it is the function wp_nav_menu() within your template files that displays those menus. The basic output of wp_nav_menu() is something like:

While it’s possible to customize a wp_nav_menu() by passing an argument array, customizing it that way is limited at best and is not what we are looking for here.

Walker Class

WordPress uses a special class, called the Walker class, designed to help traverse and display elements having hierarchical structure. WordPress goes through menu pages to display the items using a walker object.

The function Walker_Nav_Menu class is located in wp-includes/nav-menu-template.php. You can navigate through Walker_Nav_Menu from the mentioned php file, and see how the links and the menu structure are built there. Here are some useful functions from this class relevant to our topic of discussion.

start_lvl() : A function to return the HTML for the start of a new level. In the case of lists, this would be the start of new sub-list and would be responsible for returning the <ul> tag.

end_lvl() : Called when we finish a level. In the navigation menu example, this function is responsible for ending the sub-list with a closing list tag </ul>

start_el() : The function responsible for displaying the current element we are on. In the case of menus, this would imply <li> tag and the item’s link.

end_el() : The function called after an element and all it’s children have been displayed. For our menu example this would mean returning a closing </li> tag.

Let’s get to the part about the know hows of customizing menus any way you want. The steps for the same would be:

In your functions.php file, create a class which will extend the Walker_Nav_Menu class.

Copy the required or all functions from Walker_Nav_Menu with their source code and paste it into your class.

Modify the source code of functions as per your requirement.

Do not forget to pass an object of customized class to wp_nav_menu() when you call it.

Lastly, you’ll have to instantiate Wdm_Custom_Walker_Nav_Menu and pass it as an argument to wp_nav_menu() through an array.

Confused? Let’s simplify things with an example. Take a look at the image below, it’s a navigation menu I’ve customized using Walker_Nav_Menu.

Suppose I’d like to show an arrow against a menu item with a submenu, as shown in the image. As explained above, this can be accomplished by extending the Walker_Nav_Menu class. Here’s the code for the custom Walker_Nav_Menu that I created.

Alternatively, you can also paste the whole of Walker_Nav_Menu class content from wp-includes/nav-menu-template.php and edit it as per your requirement.

And that’s about it. WordPress will use our customized class to output the navigation menu just the way you want it to. Feel free to experiment with the featurettes. With the right knowledge and the right tools, WordPress can very well be your own personal web publishing playground.