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 }

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: