HOWTO: Add Custom Classes to Individual Items (wp_nav_menu)
The WordPress function wp_nav_menu() is a great way to give users the ability to control their menu items (WordPress 3.0+). You can easily add/delete/move menu items by using the WordPress admin. I recently was working on a site where I wanted to add a class to the first menu item – as the padding/border for this item needed to be different than the other menu items. Fortunately – this was very easy by doing the following:
- Click on the “Screen Options” tab at the top right of the admin panel when on the Menu admin page (Appearance > Menus).
- Select “CSS Classes” under “Show advanced menu properties”. (Also there are options to add a link target, description, and a link relationship).
- Edit your menu items and now notice there is a spot to add a class for each individual item.
This is a great way to add a “first” or “last” or anything else you want to add on certain items.
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 a “first” class that would then cover all my menus.