HOWTO: Add Custom Classes to Individual Items (wp_nav_menu)
The WordPress function wp_nav_menu() is a great way to give users the ability to control their menu items (WordPress 3.0+). You can easily add/delete/move menu items by using the WordPress admin. I recently was working on a site where I wanted to add a class to the first menu item – as the padding/border for this item needed to be different than the other menu items. Fortunately – this was very easy by doing the following:
- Click on the “Screen Options” tab at the top right of the admin panel when on the Menu admin page (Appearance > Menus).
- Select “CSS Classes” under “Show advanced menu properties”. (Also there are options to add a link target, description, and a link relationship).
- Edit your menu items and now notice there is a spot to add a class for each individual item.
This is a great way to add a “first” or “last” or anything else you want to add on certain items.
Why not just use the IDs?
I specifically did this because I was using multiple menus (same menu class) and instead of using the list item IDs to add custom CSS for multiple IDs – I simplified it by adding a “first” class that would then cover all my menus.
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Thank you so much for posting this! you’ve saved me from pulling all my hair out! 🙂
I hear you!
Thanks for pointing out the hidden Advanced Menu Properties box! I was all set to add some custom PHP code to insert an additional class for the first and last LI elements of a WordPress menu. This is much more flexible and reliable.
No problem – I am glad it helped both of you. There are lot’s of great “hidden” things like this. I will try to cover more of them in my future posts.
It’s frustrating that they would hide this option. A lot of things about the backend seem over complicated. Having to click open the menu item to delete it for example. It almost feels like I should be able to drag it to a trash can.
I understand. The best thing you can do is to leave comments/suggestions and if enough people agree – you may see changes.
nice tipp, thankyou.
assigning a class is only applied to the -elements.
does anyone have a solution to assign a custom class for the -element within the wp_nav_menu?
e.g.
…
…
…
Thanks! I was building custom functions, all sorts of crazy stuff looking for this. BOOKMARKED.
Rock on!
Thank you! You saved me a lot of searching.
nice sharing.Thanks
Just what I need for my deadline next morning.
Thanks!
i have wordpress site i need to change page tile in to images how can i do it pls give me reply
Thanks for this, wordpress could have made that so much more obvious! ‘Screen options’ is a lame label for what you can do in there…
Thankyou so much for this trick.
I always keep overlooking that screen options menu!
Thanks for this easy fix.