Add Custom CSS Classes in WordPress Custom Menu’s Individual Items

The WordPress function wp_nav_menu() is a great way to give users the ability to control their menu items in WordPress 3.0+. You can easily add/delete/move menu items from WordPress admin panel. I was recently working on a site where I wanted to add a class to add different colors for each menu item. Fortunately, this can be done very easily by doing the following:

1. Click on the Screen Options tab at the top right of the admin panel when on the Menu admin page (Appearance > Menus).

2. Select CSS Classes under Show advanced menu properties. (You will also see options to add a link target, description, and a link relationship).

3. Edit your menu items and now notice there is a field to add a class for each individual item.

This is a great way to add a custom class to Navigation menu items.
Now using “menu-change” class or the class which u applied in above box, you can apply styles the way you want.

Why not just use the IDs?
I specifically did this because I was using multiple menus (same menu class) and instead of using the list item IDs to add custom CSS for multiple IDs – I simplified it by adding different classes that would then cover all my menus.

Here is your Colourful menu Output:

Thus with the help of WordPress 3.0+ you can easily give your navigation menu a new look. Do drop in your opinions and comments below.

About Author

Manish Songirkar

Manish Songirkar

Passionate web designer, leading one of the best WordPress talents at rtCamp.