Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

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

Last updated on by
Elegant Themes
How to Add the First and Last Class to WordPress Navigation Menu Items

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.

All you have to do is open your theme’s functions.php file. Then paste the following the code:

function wpb_first_and_last_menu_class($items) {
    $items[1]->classes[] = 'first';
    $items[count($items)]->classes[] = 'last';
    return $items;
}
add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');

Another way to style the first and last menu items differently would be to use CSS selectors which works in most modern browsers.

ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }

Note: if you have a lot of users on older browsers (Internet Explorer), then you probably want to avoid the following technique.

We hope that this article has helped you. We have created a cheat sheet on default WordPress generated CSS classes which may come in handy when styling menu items as well.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Georgios Panagiotakopoulos says:

    Thanks! This works great!

  2. Munkhbayar says:

    Thanks for code. Works for me.

  3. mad_doc says:

    Thank you for idea & help!

  4. Charles says:

    Thanks for this nice code…

    What about child menu first and last item?
    It applied only for parent manu.

    Do you have any idea about child last item?

  5. jordi says:

    Anyone have any tip about use add_filter(”); for wp_nav_menu using STARKERS?
    can’t make it works :( JS and CSS are fine to do that, it is just frustrating to don’t be able to fix it from the back…
    thanks to share anyway!!

  6. Jake says:

    This does not work reliably if you have nested menus.

    • Editorial Staff says:

      Hmm, will look into a fix for this.

      • Olivier says:

        It works when the menu item is the last, or the last child of a last menu item.
        It does not work when the menu item is a last child of a menu item that is not the last.

  7. Olivier says:

    Together with some other additions to functions.php that i’ve tried, this code fails to tag a menu item as first or last menu item when they are in a submenu. A fix for this would be great!

  8. Elliott Richmond says:

    Nice! Would usually use CSS but this is a good tip

  9. Mattia says:

    Great! This is particularly interesting because I have to class more than 2 menu items…
    Now I got it!

    Thanks

  10. karen says:

    Thanks for this! Forgive me if I missed it – but – is there an example of the menu to see the difference in the nav created by this class? Thank you again!

    • Editorial Staff says:

      The site we designed for our client is not live yet. But the main reason was that we wanted to have a border left to the first menu item. All other items had border right element with a specific padding and margin. We used the last class to remove the margin right and the border right because there was no need for it. It was hitting the wrap container. Hope you can visualize it.

  11. Ivo Minchev says:

    I’ve tried this at the site http://aurorachalet-switzerland.com/ and I cannot see the effect. I’m using the “Twenty Eleven” theme for this site. Where is the problem?

    • Ivo Minchev says:

      Pobably because of the #yourmenuid tag. I tried some ID’s but none of them worked.

    • Editorial Staff says:

      Don’t think that you are using the wp_nav_menu. From the looks of it, it seems that your site is using the fall_back menu by listing all pages. Can you confirm that you have gone into Appearance > Menu and created a menu there. Then specified that menu as a primary location??

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.