Blog: WordPress
Closeup of HTML

Add CSS Classes To Menu Items In WordPress

Avatar for 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.

Screenshot of the Screen Options panel open in the Menus screen of a WordPress admin area

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).

Screenshot of a WordPress menu being edited, with a specific link panel open

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!

Avatar for John Locke

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

4 comments on “Add CSS Classes To Menu Items In WordPress

  1. Hey man, I have a problem with this… I’ve seen most posts and people suggesting to do it this way, but when I go to my screen options at the top of the page I get no checkbox for CSS classes… Any ideas?

  2. Hi Cato:

    What’s your site? And what theme are you using? Is this a self-hosted website?

    I’ve never heard of that checkbox not being present on the Screen Options of the Appearance > Menus screen, but it’s possible the theme might have something to do with it.

    1. Hi Aswani:

      Yes, you can add multiple CSS classes to menu items in WordPress. Simply add them as described in the post above, with a space separating each class name.

      Thanks,
      John

Join the Conversation

Your email address will be kept private. Required fields marked *.