Aweber - Email Marketing Made Easy
Add a Custom Class to Each Item in the WordPress Menu

Add a Custom Class to Each Item in the WordPress Menu

February 25, 2011 · 49 comments

in Web Design, WordPress

Thesis 1.x Notice: Thanks for reading this post! So, here's the deal. I wanted you to be aware that this post was written prior to the release of Thesis 2. So that means the instructions or other information provided applies specifically to Thesis 1.x and not the latest 2.x version. Thanks!

Here’s a little know feature with WordPress Menus. Well, it was little known to me at least. I’m working on a site for a client which requires each item in the WordPress main navigation to have a different background color. I’m using the WordPress menu system, and not the standard Thesis menu system.

By default there are a bunch of classes that are assigned to each item in the menu list, but I needed to assign a custom class to each one. Well, here’s how it’s done.

How to Add a Custom Class to Each Item in a WordPress Menu

Step 1: Enable CSS Classes on the Menu

Click “Menus” under the “Appearance” link in the WordPress Dashboard”. Then look at the top right and you will see a link that says “Screen Options.” Click that. Now check “CSS Classes” to enable this feature. It looks like this:

CSS Classes for WordPress Menu Items

Step 2: Enter Your Unique Class

Now open up one of the items in your menu and notice the new field called CSS Classes. Just enter your unique class in that field and click the “Save Menu” button. See below:

CSS Classes on WordPress Menu Items

Amazing huh? Now you can target the classes you have assigned from within your stylesheet. I think it’s pretty cool. If you have a different way of doing this sort of thing let us know in the comments.

Source: wpveda

Was this post helpful? Consider subscribing to my blog via RSS or

This Site Runs on the Thesis WordPress Theme

Thesis Theme thumbnail

If you're someone who doesn't understand a lot of PHP, HTML, or CSS, Thesis will give you a ton of functionality without having to alter any code. For the advanced user, Thesis has incredible customization possibilities via extensive hooks and filters. And with so many design options, you can use the template over and over and never have it look like the same site.

If you're more familiar with how websites work, you can use the fantastic Thesis User's Guide and world-class support forums to make more professional customizations than you ever thought possible. The theme is not only highly customizable, but it allows me to build sites with a much more targeted focus on monetization than ever before. You can find out more about Thesis below:

{ 48 comments… read them below or add one }

Jamie March 25, 2011 at 6:24 am

I knew there was a way to do this. It’s sad that you post was 9th in the Google results and a post with less relevance and over a year old was number 2. Anyway Thanks! I knew it was there somewhere.
Jamie recently posted..10 Impressive &amp Beautiful iTunes Visualizers MacAppStorm

Reply

Thesis-Blogs.com March 25, 2011 at 8:02 am

Hi Jamie… Yeah, I hear you on this. Well, at least you managed to find this solution. Thanks for commenting.

Reply

romuloctba April 23, 2013 at 2:07 am

Wow… 2 years after written, this article still helped me. Thank you

Reply

dashaft April 1, 2011 at 8:44 am

Wou! amazing! jajjajaaa the more elemental thinks aren’t wrote anywhere! Thanks!!!! Only a doubt… Why i can’t write styles with _ ? example -> each_menu
Automatically wp erase my _ … you know how i can fix it?
dashaft recently posted..1er año juntos- ¡muchas gracias a todos!

Reply

Thesis-Blogs.com April 1, 2011 at 9:21 am

Not following you here. To style the menu, just target the selector and write the css in your custom.css file.

Reply

David June 28, 2011 at 3:41 am

Aha brilliant, thought I would have a quick google to see if there is a solution before I dived into coding something up. Such a simple answer haha. Thanks for the post.
David recently posted..Hello world!

Reply

Nathan June 28, 2011 at 7:25 am

Thanks for this. As Jamie said, it sucks that this wasn’t at the top. I was actually contemplating reimplementing the menus myself.

Reply

ZByte July 15, 2011 at 10:24 pm

Awesome. Who would have thought it would be that easy. Thanks for the good find.

Reply

Kaffeekatz July 26, 2011 at 10:15 am

Like others, wish I had seen this a couple of weeks ago, and saved myself the searches…however, I’m catching up on the coding for the newer WP verion, and I guess I need it completely spelled out where how to write and insert custom CSS: I added a class to each main nav tab, but when I put

.[myclass] {
background-color: B72567;
}

I got no result. Same with inserting this code directly into the style.css file. What am I missing?

Thanks!

Reply

Thesis-Blogs.com July 26, 2011 at 10:52 am

I will need to see your site with the css and class in place in order to answer this question.

Reply

Arko Elsenaar March 7, 2012 at 11:29 am

It’s either the square brackets you placed, however I think you put them there only for us to know its an replacement, or its the # ur missing, it should be:

background-color: #B72567;

Reply

Kaffeekatz July 26, 2011 at 3:03 pm

Hi, I’m working with “graphene” right now, here:

http:/www.juliarosspt.com

Thanks!

Reply

Thesis-Blogs.com July 26, 2011 at 3:10 pm

I don’t know what your custom classes are, but I assume this would be one of them: newnav-sat-preparation. If so, try this:

.custom #header-menu .newnav-sat-preparation {
      background: #B72567;
}

Actually, as I was typing this out, I just noticed you’re missing the # sign on your pasted code above. If that’s really missing in your code, then you’ll want to add it.

Reply

Kaffeekatz July 30, 2011 at 1:22 pm

Thanks, I was able to make the changes with the code parameters you gave me–oddly, though, I couldn’t use the classes I assigned. Instead, I used the menu item numbers. I checked the code with Firebug, and apparently all my previous attempts at adding classes with various plugins had given the items really long, complicated classes, but the new ones I assigned in Menus were not part of them. Any thoughts on how to remove classes, as an academic issue…?

Reply

Thesis-Blogs.com July 30, 2011 at 1:39 pm

There should be no reason why you cannot target the custom classes you assigned. If an element has a class, you can target that class in your css. Regardless of that, at least you have it working how you want. As to removing classes, you shouldn’t need to. If you absolutely want to, then go back to the plugin or whatever is inserting the classes and disable it if it isn’t needed. There’s also probably a way to remove classes using jQuery, but I’m not certain.

Reply

Michael August 2, 2011 at 12:50 pm

I have a page menu generated class in the class box and I want to add another class ..I have added a comma and the new class and saved ..when I recheck the class box it is not saved … I tried by adding a space between the class names and saved .. still it disappears and is not saved … your article does not mention anything about adding multiple class neames ..please could you tell me why I cannot seem to save any new class names in my page menu classs box..am I doing it wrong?? many thanks

Reply

Thesis-Blogs.com August 2, 2011 at 1:25 pm

Well, you definitely don’t want to add a comma between the classes. I just tried this myself with a space, and it works just fine. Both classes are added to the list item.

Reply

Michael August 2, 2011 at 2:21 pm

well I checked the menu list item source code and it definitely is not there and is not being saved in the class box .. oh well …another hit and miss feature… thanks

Reply

Iamronan August 30, 2011 at 1:15 am

Wicked..Just what I was looking for…Great stuff

Reply

Sam September 8, 2011 at 7:22 am

Thanks for the info… I knew it could be done… but I keep forgetting about turning on those additional options when I set up new WP sites…. making mental note again now.

Reply

chantal September 12, 2011 at 11:50 am

Genius

Thanks. I was about to try and “trick” wordpress using a long and complicated method :)

Reply

Wade October 13, 2011 at 6:07 am

Thanks for this. It really opens up the possibilities for customization. So easy too!

Reply

Simon Vincent January 12, 2012 at 6:41 am

Great! Works a treat.

Reply

Andi North January 16, 2012 at 10:28 am

Just what I was looking for! Such a simple solution, that I would have never thought about! You are a genius!

Reply

Thesis-Blogs.com January 16, 2012 at 10:35 am

Thanks!

Reply

Vonn February 9, 2012 at 10:52 pm

Thanks a lot for this!

Reply

Thesis-Blogs.com February 9, 2012 at 10:56 pm

No problem!

Reply

Spencer Cross February 16, 2012 at 6:07 pm

Sorry. Typed that in a rush and didn’t see the notes about HTML below the comment box. What I was trying to say is the unfortunate part of this is that it adds the class to the menu item’s <li> rather than it’s <a>, which, if you’re trying to style your primary nav only while leaving the submenus alone, is a bummer because the submenu is nested in the primary nav’s <li> so you can’t use it as a way to target the primary nav‘s <a> specifically.

Reply

Thesis-Blogs.com February 16, 2012 at 6:12 pm

Try use a child combinator selector and see if that will do it. You can read more here: http://css-tricks.com/child-and-sibling-selectors/

Reply

Spencer Cross February 16, 2012 at 6:17 pm

Fantastic, thanks a million! My CSS newbness is showing.

Reply

Thesis-Blogs.com February 16, 2012 at 6:23 pm

No problem… with css you pretty much learn something new every day. We’re all just students no matter where we’re at.

Reply

Hank March 18, 2012 at 8:54 am

I am still struggling with what code to exactly to put in the custom.css to change my nav menu’s color. “test2″ is my custom class that I assigned my nav menu. The color on the second nav menu is just not changing. I want one color for the top nav menu and a different color for the bottom one. Thanks for any help/advice you can provide.

Here is the code that I have in custom.css now…

.test2 {
background-color: #FF4A4A;
}

Reply

Thesis-Blogs.com March 18, 2012 at 1:45 pm

I had a look at your site and you have a class of “test2″ on every single link in that second nav menu. You really don’t need to do that if you want to target all elements inside the 2nd nav menu.

You use a custom class if you’re looking to style one of the link differently to all the others.

Regardless of that, you have to target the specific element with something like this:

.custom #menu-second-nav-menu .test2 {
    background-color:#fff
}

What you have above is actually also correct. You don’t necessarily need to be as specific as the code I just provided above. I don’t know what you’re trying to target here, but if it’s the color of the anchor tag, then you need to add an ‘a’ after the ‘.test2′ above.

You should also use Firebug.

Reply

Damanjit Singh April 17, 2012 at 12:12 am

Wow! I was just looking for this.

Thanks.
Damanjit Singh recently posted..How To Bypass Adf.ly Waiting time in Google Chrome? [Extension]

Reply

randy April 18, 2012 at 1:27 pm

This is great, but isn’t there a way to add a custom class for the entire menu? Not just each individual menu item?

Reply

Thesis-Blogs.com April 18, 2012 at 1:30 pm

Why would you need to do that?

Reply

randy April 18, 2012 at 1:44 pm

Trying to style a custom menu’s and tags, and I use the menu in 2 different places through the theme, so essentially if I duplicate the menu and give it a different class I can keep the widgets the same.

Reply

Thesis-Blogs.com April 18, 2012 at 1:57 pm

If you’re adding more than one menu using the WordPress Menus, then the <ul> element of each menu will be given a unique ID. You can target them through that.

Reply

Sorosh June 22, 2012 at 4:40 am

Just what I was looking for! Thanks ;)

Reply

Karim August 14, 2012 at 1:42 am

Hi,

What a great post this is. Thanks.

If i ad this “background-color: #FF4A4A;” from your example it works fine.
But can anyone tell me what I need to ad if i like to change the placement of one of my menu items?
Lets say for example that I like to ad more space between “about” and “home” in my menu..

Thanks,
Karim

Reply

Thesis-Blogs.com August 14, 2012 at 7:44 am

You can add some margin to the list items. For example:

.menu li { margin-bottom:5px; }

Reply

Karim August 15, 2012 at 3:22 am

Great. Thank you.
Do you know if it’s possible to place a menu item anywhere on the screen, like top right.

Anyway, thanks.
Karim

Reply

Thesis-Blogs.com August 15, 2012 at 9:24 am

Yes, just use a Thesis hook to place the menu where you want.

For example, you can add this to your custom_functions.php file:

// secondary menu
register_nav_menu('secondary', 'Secondary Menu');

function sec_nav() {
	wp_nav_menu( array( 'menu' => 'Secondary Menu' ) );
}
add_action('thesis_hook_header','sec_nav');

You will need to use css to style and place it.

Reply

Karim August 20, 2012 at 2:01 am

Thanks for your time!

Reply

cory August 20, 2012 at 1:55 pm

sweeet! this spared me from more headache after losing a “home” icon on a template that I bought from template monster. they fixed it but never told me how to fix it myself, after I demanded that tell me. Can believe I never saw this after all the years of working with wordpress.
cory recently posted..CoryChurch.net – new for designs

Reply

six October 19, 2012 at 9:17 am

Tnx for the tip mate ;)

Reply

Szyam October 19, 2012 at 3:24 pm

Wow. Feeling stupid right now…. I never look at those drop downs! Lol… Thought I needed some functions.php stuff. Glad i dont. Cheers

Reply

cadu higueras November 7, 2012 at 8:20 am

very nice tip. Thanks

Reply

Leave a Comment

When commenting, you can use basic HTML tags. If you are pasting in any code, please escape it here and then include that code within <pre></pre> tags. Thanks!

CommentLuv badge

{ 1 trackback }

Previous post:

Next post: