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.

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.

• Bio
• Latest Posts

Kevin Ohashi

Founder at Review Signal

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.

Latest posts by Kevin Ohashi (see all)

• Analyzing Digital Ocean’s First Major Move with Cloudways - February 28, 2023
• Removing old companies - June 28, 2021
• WordPress & WooCommerce Hosting Performance Benchmarks 2021 - May 27, 2021