Style WordPress 3.0 Menu Items | Menu Classes

I never took much notice to this until today but, WordPress has several useful menu item classes that can be used to style menu items individually. This comes in very handy for anyone using WordPress 3.0+ menu feature. For example, lets say I had a link in my menu I wanted to highlight, or just style differently.

If I go to the menu area in admin, click the “Screen Options” link at the top, and check the “CSS Classes” each menu will display a new text area which I can add my own CSS class to.

menu item css

I’ve used “home-button” for the class name for my menu item in the screenshot. Then in your css use .home-button { } and style it how you want. EX: .home-button {background-color: green; }

Here’s a list of a few other useful menu classes.

.current_page_item{} // Class for Current Page
.current-cat{} // Class for Current Category
.current-menu-item{} // Class for any other current Menu Item
.menu-item-type-taxonomy{} // Class for a Category
.menu-item-type-post_type{} // Class for Pages
.menu-item-type-custom{} // Class for any custom item that you added
.menu-item-home{} // Class for the Home Link

9 thoughts on “Style WordPress 3.0 Menu Items | Menu Classes

  1. Carol

    This is great, I am excited to try this. Should I add the .mystyle class to the #access items in my CSS, or just list it separately? Also, do you know how to access the CSS of the dropdown menus? I have styled the menu bar with a custom font and spacing, but it seems the dropdown menus are now all spaced out, and I can’t seem to separate them in the CSS.
    Thanks so much!
    http://www.stanton-studio.com
    is the site I am working on.

    -Carol

    Reply
    1. Zeaks

      Post author

      You can find all of the menu classes in Twenty Eleven style.css. I’m not good with menus, but I would imagine adding your font to #access ul would work.

      Reply
  2. wiz kid

    umm… sorrz to buzz you but i’ve followed this post and it doesn’t change anything. i want to use an image instead of text i’ve tried it with the .ownsite { background: url } thing … and no results…

    Reply
  3. Patrick

    Thanks so much for this tut! I’ve been searching everywhere for a solution and came upon this.

    I have changed the css field in the menu button Donate to donate button.

    Went into the css and added this:

    #donate-button {
    color: #F2CE52;
    font-weight: bold;
    margin-left: 3px;
    }

    and my changes are not working!

    Can you help?

    It would be greatly appreciated!!!

    Reply
    1. Zeaks

      Post author

      Hi Patrick. The menu classes are classes, not Id’s, change #donate-button to .donate-button and it should work.

      Reply
  4. flutchyworld

    hi,
    in my menu, i have some PAGES, that obtain ‘current-menu-item’ class when they’re active, and some page LINKS, for other pages (as i needed to customize their buttons with images), but these links (to pages), do not obtain the ‘current-menu-item’ class, as they’re not pages but links. so their buttons don’t highlight in the menu when active.

    does anyone have an idea for this, please ?

    thank you !

    Reply

Leave a Reply

Please use the forums for questions that do not relate to this post.
Wrap all code in [code] Your Code Here [/code] tags.

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>