Here’s a little know feature with WordPress Menus. Well, it was little known to me at least. I’m working on a site for a client which requires each item in the WordPress main navigation to have a different background color. I’m using the WordPress menu system, and not the standard Thesis menu system.
By default there are a bunch of classes that are assigned to each item in the menu list, but I needed to assign a custom class to each one. Well, here’s how it’s done.
How to Add a Custom Class to Each Item in a WordPress Menu
Step 1: Enable CSS Classes on the Menu
Click “Menus” under the “Appearance” link in the WordPress Dashboard”. Then look at the top right and you will see a link that says “Screen Options.” Click that. Now check “CSS Classes” to enable this feature. It looks like this:
Step 2: Enter Your Unique Class
Now open up one of the items in your menu and notice the new field called CSS Classes. Just enter your unique class in that field and click the “Save Menu” button. See below:
Amazing huh? Now you can target the classes you have assigned from within your stylesheet. I think it’s pretty cool. If you have a different way of doing this sort of thing let us know in the comments.
Was this post helpful? Consider subscribing to my blog via RSS or