Add CSS Classes To Menu Items In WordPress

John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

Every once in a while, you might run into a situation where you want to add a CSS class to a specific link in your WordPress navigation menu.

Let’s say you want to make one link in your navigation stand out from the rest, and make it a call to action button.

You could do this by adding a CSS class to the li element enclosing that link, and giving it custom styles.

But how would you add a CSS class to just that link?

One thing many people don’t know is WordPress hides a lot of features under the Screen Options tab at the top of each screen in the back-end (admin) area.

To add CSS classes to a WordPress menu, first go to Appearance > Menus in your WordPress theme.

Next, find the Screen Options tab at the top right of the screen. Click to open the panel, and check the box labelled CSS Classes.

Select the menu you want to edit, and click the link you want to add a CSS class to. You should see a field that wasn’t visible before called CSS Classes (optional).

Add the CSS class to your link, and save the menu.

In the screenshot above, we added the class home-link to the link to our Home page. This is what our menu will look like now.

<ul>
	<li class="home-link"><a href="http://yourwebsite.com/">Home</a></li>
	<li><a href="http://yourwebsite.com/about/">About</a></li>
</ul>

You can then add the appropriate CSS rules to your style sheet.

Congratulations, you have just added custom styles to a specific link in your WordPress menu!

John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.