Customizing the WordPress Menu with Custom Classes

The standard menu in WordPress, while powerful and easy to add onto almost any theme, leaves a bit to be desired when it comes to styling.

Not to mention, the built-in WordPress menu classes can be quite confusing. There’s menu-item-type-taxonomy, current-menu-parent, current-menu-ancestor, and a whole bunch of other confusion selectors you can choose from to make styling your menu about as fun as pulling out your hair.

A standard WordPress menu can look like this:

In this case, a gray bar with a darker gray hover. Not too much to look at, right?

Just to put a simple red background hover would require you to know a few CSS selectors, and their names are quite long.

But thankfully, WordPress also gives you the functionality to add custom classes to your menus – which makes styling them a much easier process.

So, rather than using your browser developer tools to target some baked-in, almost nonsensical menu name, you can create your own menu classes that are much easier to remember and a lot easier to style.

Turn on Custom Classes in the WordPress Menu Admin

To use custom classes they have to be shown. You do this in your menu admin area.

Make sure to tick the check box for the CSS Classes item in the Screen Options dropdown menu. Afterwards, open the Page you want to edit. You’ll notice a new section has been added to your menu items.

You can enter any name into this box. You don’t want to use any selectors like # or . (period). Just enter the class text like shown in the image below.

I’ve chosen the class name redback which is easy to remember.

After the menu is saved you can enter custom CSS anywhere you would normally do that – either in your style.css file or in a custom css plugin.

Here, I’ve chosen the following CSS rule:

That targets any item tagged with custom class redback and changes its hover state to use a red background.

You can even use the custom classes to add logos to your menu items like this:

The same principles follow with the custom classes. For more information on adding logos to your menus, checkout these two articles:

WordPress Custom Menu Items

WordPress Menu CSS

Or, check out this additional article about WordPress Menus:

9 jQuery WordPress Menu Plugins + Bonus Tutorial for the Adventurous

Editor’s Note: This post has been updated for accuracy and relevancy.
[Originally Published: December 2012 / Revised: April 2022]

Tags:

• CSS
• menus