Adding Custom CSS to Menus in WordPress

It's WordPress Wednesday!

The easiest things to talk about are the things you experience yourself. Since I use WordPress for this blog, this was an issue I faced. Review Signal has a consistent theme, but WordPress runs very separate from the rest of the site. So in the Menus here I needed to highlight that you were on the blog and have it always be selected.

I created a CSS class called menuselected and then I needed to figure out how to make only that menu item have the CSS. I didn't want to hardcode it into a theme because that would mean extra work every time I wanted to change something. But it wasn't immediately obvious how I could add custom CSS to a menu. WordPress seems to hide a lot of functionality away from the user, but I found it.

Instructions

1. Go to wp-admin/nav-menus.php to edit your menus.

appearance-menus-default

2. Click Screen Options and Check CSS Classes.

appearance-menus-screen_options

3. Click on the menu item and type in your desired CSS class.

appearance-menus_css_classes

 

That's it, your menu will now have your custom css class.  Happy Hacking 🙂

The following two tabs change content below.
avatar
Kevin Ohashi is the geek-in-charge at Review Signal. He is passionate about making data meaningful for consumers. Kevin is based in Washington, DC.
avatar

Latest posts by Kevin Ohashi (see all)






Leave a Reply

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

Current day month ye@r *

Loading...

Interested in seeing which web hosting companies people love (and hate!)? Click here and find out how your web host stacks up.