I recently ran into an issue on a website running on the WordPress platform. The design of the custom menu required a different icon for each option. Using classes, this would be a breeze to style, but alas, there was no option in the custom menu to assign a different class to each menu item. Oh well, I thought, I’ll just use some jQuery to add the classes to the DOM. But wait, just as I was about to give up searching and write the code, I stumbled upon an solution.

Apparently, since the release of WordPress 3.0, there is and extremely easy way to add classes to custom menu items. Here’s How To Add A Class to Individual Items in a WordPress Custom Menu

Enable CSS Classes on the Menu

From your WordPress Admin Dashboard, navigate to the Menus screen by clicking “Menus” under the “Appearance” tab. Now look up to the top of the screen to the right, and you will see a link titled: “Screen Options”. Click this link to expose several options that you didn’t know that you had, but always needed. Just check the “CSS Classes” radio button to enable the feature.

Add Your Custom Class

With the feature enabled, now expand one of the items in your custom menu, and you will see the new field called “Custom Classes”. Now here’s the exiting part, just enter your new custom class and save!

Pretty cool huh!?! Now you can easily target and style individual menu items with ease. Enjoy!