Wednesday 22 February 2012

Add Custom CSS Classes to WordPress Menus – Custom Style Menu Items

menus

So I had a real head scratcher today, and figured there was a good change someone else out there may encounter the same issue.

I was trying to setup a main menu in WordPress that had a different color for each menu item. After giving it some thought, I decided the best course of action would be to add a custom class to each of the menu items – ideally, in the menu manager. This way I could match up menu styles and colors to the styles and colors being used for each section.

So in typical fashion, I spent about half hour searching around online and skimming through 10-15 articles that were incredibly out of date, and not really what I was looking for. I mean, someone has to have had this idea before me right?

Yep, they sure did!

Turns out the ability to add individual styles to each of the items in my menu was sitting right there in front of me… In the Screen Options panel.

At the top right of the page when looking at your menu manager in the WordPress backend, you will see a fly out menu for the screen options of the page. Under this menu, all I needed to do was turn on the CSS Classes under the Advanced Menu Properties.

About the author

Founder of Eos Designs and co-founder of iPrintEasy and a number of other web businesses - an entrepreneur with over 10 years of experience in Internet Marketing - Zach understands what it takes to be successful online and specializes in the development of advertising campaigns and marketing plans for start-ups.
  • Leslie

    Thank you! This was exactly what I was looking for- thanks for pointing out this helpful little menu!

  • Mora

    jajaja, right in front of our eyes, i was looking for a plugin jajaja. thank you

  • Chris

    Ah so obvious! Cheers

Powered by WordPress | Privacy Policy | Web Design Miami