Add Classes & More to WordPress Menu Items

I am a little embarrassed to write this post as it is something I should have known about long ago, but it could certainly prove very helpful to others, as I’m sure I’m not the only one who didn’t realize these simple built-in WordPress Menu features.

One of the little nuances that always bugged me when working with the WordPress menus was not being able to add classes to specific menu items and not being able to have certain links open in a new window (ie. adding target=”_blank”). To target specific items in a WordPress menu I would typically use the :nth-child CSS:

.nav-primary ul.menu li:nth-child(3) {
     border-bottom: 5px solid #ccc;     
}

This would allow me to target specific list items and it works well…the caveat is if the client decides to add a menu item in the future that is before the 3rd menu item, the :nth-child(3) will now apply to the wrong menu item. Thus, this is not a great solution. It works perfectly for when a site is handed over to a client, but I don’t want sites to easily break when a client wants to do something as simple as update their menu. I build all menus (header, footer, etc…) using the built-in WordPress menus specifically so they are easy to edit for a client, so I REALLY don’t want to use :nth-child if I don’t have to when it comes to menus.

The other issue I’ve always had is how to get specific menu items to open in a new window. If a client wants to link to an external registration page, or has social media links in a menu, they typically want them opened in a new window. I resorted to a combination of :nth-child and jQuery to add the target=’_blank’. This is certainly not a good solution, but it got the job done:

<script>
jQuery(document).ready(function() {
  jQuery('.nav-primary ul.menu li:nth-child(3)').attr('target','_blank');
});
</script>

Again, this solution works, but we run into the same :nth-child issue mentioned above AND we are adding a script to the page that really isn’t necessary.

 

Alleluia, the default WordPress Menu functionality already has it…

Well, little did I know (and I really SHOULD have known this long ago), WordPress already has this taken care of. All I needed to do was click on the ‘Screen Options’ dropdown and WordPress offers a variety of advanced menu properties.

Menu Screen Options

Everything I could possibly want is offered. We can add classes to any specific list item and we can target specific list items to open in a new window, among other things. When those checkboxes are clicked the extra fields are displayed directly on the menu item:

Menu items

As you can see we now have a handy checkbox for Open link in a new window/tab as well as a simple input box to add a class to any list item. Now instead of using :nth-child we can target list items using classes, so any CSS applied to these items won’t rely on the order of the list items.

.nav-primary ul.menu li.my-class {
     border-bottom: 5px solid #ccc;     
}

I really wish I would have discovered this sooner, and I’m a bit ashamed that I didn’t! I’m extremely pleased that I did find it though as it has already come in handy a few times in the last few days. Hopefully this post helps someone else out there!

Leave a Reply

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