How to Add the First and Last Class to WordPress Navigation Menu Items

How to Add the First and Last Class to WordPress Navigation Menu Items
Naomi Pratt

Recently while working on a custom design project, we found a need to add some custom styling to our WordPress navigation menu items. This design in particular required different styling for the first menu item and the last menu item. Now we could easily go in the WordPress admin and add a custom css class to the first and last menu item. But because we are delivering this to a client, it is very likely that they might rearrange the order of menus in the future. Using the admin panel way of adding classes was not the most efficient method. So we decided to do it by using filters. In this article, we will show you how to style your first and last WordPress menu items differently by adding a .first and .last CSS class.

How to Easily Add Custom Classes to Your First and Last Menu Items in WordPress
Renea Bedford

Now if you have noticed above, these two pieces of code are really only effective for top level menus (e.g. menus with no dropdowns). If you want to add the same class structure to nested menus, use the code below. It will do the exact same thing as above, except for it will apply the logic to all nested submenus in your menu structure.

Add CSS Classes To Menu Items In WordPress
Perla Thorne

Hey man, I have a problem with this… I’ve seen most posts and people suggesting to do it this way, but when I go to my screen options at the top of the page I get no checkbox for CSS classes… Any ideas?

Be the first to comment

Leave a Reply

Your email address will not be published.