Add a Custom Class to Each Item in the WordPress Menu

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,

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.

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: