Adding Custom Classes to WordPress’ wp_nav_menu()

WordPress’ Custom Menu system (Appearances > Menus) is great for users and developers. It provides a level of flexibility previously missing from previous versions of WordPress. At times, you may find yourself having to add custom classes to the navigation menus. Here are some helpful code snippets to do just that!

Tip: Add the following functions to your theme’s functions.php file or your custom functionality plugin to use them.

Add a Custom Incremental Class

If you need a “counter class” – one that basically counts up the menu items like menu-item-1, menu-item-2, etc – here is how you can do that by using $item->menu_order to output a number attached to a class name.

/**
 * Increment wp_nav_menu li custom class numbering
 * @description: Tweaked code found at link below for inremental counting
 * @source: http://www.codefleet.net/add-the-first-and-last-css-class-to-the-top-level-navigation-menu-items/
 */

function custom_nav_class($classes, $item){
        $classes[] = "custom-class-".$item->menu_order;
        return $classes;
}
add_filter('nav_menu_css_class' , 'custom_nav_class' , 10 , 2);

Add a Custom Class to the Last Menu Item

A lot of times you will have a menu where the last menu item will need a specific class added. This can be used to remove a border or margin, etc. Props go to John the Developer’s post Adding a CSS Class to the the Last LI Generated by wp_nav_menu()

/* Add last_item class to last li in wp_nav_menu lists*/
function add_last_item_class($strHTML) {
	$intPos = strripos($strHTML,'menu-item');
	printf("%s last_item %s",
		substr($strHTML,0,$intPos),
		substr($strHTML,$intPos,strlen($strHTML))
	);
}
add_filter('wp_nav_menu','add_last_item_class');

Roots Users: If you are using the Roots Theme framework you will need to tweak it a little further to properly add the class. This is due to Roots’ modifying the menu classes.

/* Add last_item class to last li in wp_nav_menu lists*/
function add_last_item_class($strHTML) {
	$intPos = strripos($strHTML,'menu-');
	printf("%s last_item %s",
		substr($strHTML,0,$intPos),
		substr($strHTML,$intPos,strlen($strHTML))
	);
}
add_filter('wp_nav_menu','add_last_item_class');

Add a Class to the First and Last Menu Items

Adding a class to first and last menu items

function add_first_and_last($output) {
  $output = preg_replace('/class="menu-item/', 'class="first-menu-item menu-item', $output, 1);
  $output = substr_replace($output, 'class="last-menu-item menu-item', strripos($output, 'class="menu-item'), strlen('class="menu-item'));
  return $output;
}
add_filter('wp_nav_menu', 'add_first_and_last');

Non-Programmically Adding Custom Classes

If you’re not comfortable touching code, you can always add a custom class using WordPress built in method. To to this you will first need to ensure you have all options visible in the Menus Screen:

1. Navigation to Appearances > Menus in your WP admin panel and click on Screen Option

WordPress Screen Options

2. Next, under Show Advanced Menu Properties ensure that CSS Classes is checked

show-advanced-menu-properties

Now you will be able to add custom classes to your menu items all you like when you expand each individual link.

my-custom-class

Note: If you indend on using this option to add last or first menu classes and the order of the menu items is switched the classes will follow. This could potentially break your menu layout!

Have Anymore Menu Class Needs or Functions?

If you have a need to customize your menus that doesn’t appear above please use the comments below to tell us your requirements. Also, if you have any nifty functions to modify your WordPress menus please share that as well!