Tag: wp_nav_menu

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:

  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”. (Also there are options to add a link target, description, and a link relationship).
  3. 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.