Add Custom CSS Classes to WordPress Menus – Custom Style Menu Items
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.
6 Comments On This Topic
Leave a Reply
Recent Work
September 19, 2011 at 12:05 am
Thank you! This was exactly what I was looking for- thanks for pointing out this helpful little menu!
December 9, 2011 at 8:37 pm
jajaja, right in front of our eyes, i was looking for a plugin jajaja. thank you
January 6, 2012 at 6:17 am
Ah so obvious! Cheers
April 4, 2012 at 5:00 pm
Hi There, I have looked around for examples on how to implement the CSS on each menu item to either give a different color or an image but there is no example of step by step built on how to implement it. Like where do you get the Class= from or what needs to go in the CSS field of the menu item. The reason behind wanting to change the color is the restriction to display 4 sub menu when using jQuery Vertical Mega Menu. Cheers
May 8, 2012 at 12:41 am
Thank you!! you saved me a lot of time in searching!!
June 16, 2012 at 5:15 pm
thank you. this is very helpful