Add Unique Class To Individual wp_nav_menu() List Item in WordPress

November 4th, 2013 - Posted by Steve Marks to (X)HTML / CSS, PHP, Web Development.

If you’ve ever built a site in WordPress, you’ve probably set up and managed the navigation through the ‘Menus’ section. Doing so makes it easy to manage menus, but also allows the client to control the layout too.

A couple of times over the last few years I’ve come across the scenario where I needed to add a different class to one or more of the list items output by the wp_nav_menu() function. This could be because certain list items use a different font, have different paddings, and so forth.

Normally I would find a way to extract the individual list items, using regular expressions or similar, and perform a manual string manipulation to make the necessary amendments. It’s not pretty but the only way to achieve the result that I was after, or so I thought until today…

The Solution

It turns out that no extra PHP is required to do what we’re after, and that it can all be done from within WordPress itself. The steps to achieve this can be found below:

1. Navigate to ‘Appearance > Menus‘.

2. Click ‘Screen Options‘ in the top-right corner of the screen.

3. Tick the ‘CSS Classes‘ checkbox.

4. Now under each menu item there will now be a new box allowing you to enter the one or more CSS classes that you wish to apply to the menu item.

And there we have it; A simple way to add a unique class to individual list items in WordPress without any extra PHP.

Tags: ,
This entry was posted on Monday, November 4th, 2013 at 9:21 am by +Steve Marks and is filed under (X)HTML / CSS, PHP, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first