Easily Customize the WordPress Menu with Custom Classes

Advertisement

WordPress is really powerful, but we all know that out of the box it is pretty stiff, right?  So what if you want to spice up your menu a bit but you don’t want to get into the guts of the code to do so?  This tutorial is for you.

So the standard WordPress Menu looks something like this:

Pretty standard stuff.  Not very exciting.  Works but we can make it better.  Since WordPress 2.0 we have an addition to the display settings in the editor pages for when we use the menu creation engine at WordPress.  This allows us to assign custom classes to each menu item.  When you navigate to the Menu Admin area and click the Screen Options button at the top right of the page, here’s how to activate this feature:

Do you see the CSS CLASSES check box?  Check it.  When you return to your menu item you will see a new box that has been added there:

You can enter any descriptor into the box.  Just make sure that you DO NOT use ANY special characters and ESPECIALLY not # (pound sign) or . (period).  Once you enter this descriptor (something like blue-background) just click to save the menu.

Next you can go to the either the customizer or use your child theme .CSS file to add your custom CSS.  For this demonstration we will use the following code:

.blue-background a:hover{background:blue; border-radius:5px; color:white;}

This allows us on hovering over the menu item to have a blue background with slightly rounded corners and with the button text white.

Pretty easy right!

If you liked our tutorials then please show your love by following or connecting with us on one of our Social Media Channels!

Advertisement

Leave a Reply

Your email address will not be published. Required fields are marked *