Customizing the WordPress Menu with Custom Classes

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 looks like this:

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 alot 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 select the “CSS CLASSES” item in screen options and then return to your menu. You’ll notice a new box 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:

{code type=php}.redback a:hover{background:red;}

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

More articles about WordPress Menus:

Free Video Why 100 is NOT a Perfect Google PageSpeed Score (*5 Min Watch) Learn how to use Google PageSpeed Insights to set realistic goals, improve site speed, and why aiming for a perfect 100 is the WRONG goal.