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.


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


2. Click Screen Options and Check CSS Classes.


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



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

The following two tabs change content below.
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.

Leave a Reply

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

Current day month ye@r *


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