How to Add a Custom Class to a WordPress Menu Item.

Sometimes you may want a certain item in the WordPress navigation menu to standout from other items for example when creating a call to action button. You can achieve this by adding a custom CSS class to the <li> element enclosing the given link and then give it your custom styles.

This is possible within the WordPress admin dashboard although the option to do so is hidden by default. In this tutorial I’ll show you how to achieve this feature that allows you to target either a single menu item or a group of menu items with custom CSS classes.

1. First go to Appearance > Menus, to select the menu where the item to add custom CSS class is located.

2. Find and click the Screen Options tab at the top right of the screen to open the panel for Screen elements.

3. Under Show advanced menu properties, check the box labelled CSS Classes

Now when you select the menu you want to edit, and click the link you want to add a CSS class to, you will see a field named “CSS Classes (optional)” that wasn’t visible before. 

In the screenshot below, I have added the class custom-class to the link to the Home page.

Save the menu to apply the class to the menu item

The class will be added to the <li> element of the given menu item, in this case the Home item. You can check this class update using a browser inspector tool.

You can now add the appropriate CSS rules to your style sheet. For example if you want to target the <li> element with class custom-class you can use the code below for the padding, background and border-radius properties

.menu li.custom-class{
  padding: 6px;
  background: #A1E6FA;
  border-radius: 5px;
}

You can also use CSS selector to target the anchor tag of the list item for example I’ll give the Home menu item a font weight of 700 and color white using the styling below.

.menu li.custom-class > a{
  font-weight: 700;
  color: #fff;
} 

Our navigation menu will appear as shown below after applying the CSS styling above.

The Home menu item now appears different from other menu items due to the different styling we have applied using the added custom CSS class.