Soliloquy - The Best Responsive WordPress Slider Plugin

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

Share This Post

Sometimes you want to be able to style your first and/or last menu items differently from the rest. Maybe you want to remove padding, shift margins, or the like.

I’ve got an easy solution to add custom classes to both the first and last menu items in your menus so that you can style each appropriately. This is done with code on the server side, so the effects applied are instant, and you never have to worry about someone changing classes inside the menu admin area in WordPress.

**Note: I am assuming you are using WordPress 3.0 navigation menus in the tutorial.

The code snippet below will apply the classes to all menus on your site:

If you want to go a step further and limit this to only a particular navigation menu on your site, check out the code below:

This limits the classes being applied to the primary navigation menu only. You could extend this to include or exclude other registered navigation menus for your site.

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.

You can take the logic from the second bit of code and apply it to this as well if you only want this to work on particular menus.

Simply comment out classes that you don’t need (e.g. no custom class on the first menu item), and you should be all set! I use this on basically every project I do, so hopefully you will find it useful too!

Have you enjoyed reading How to Easily Add Custom Classes to Your First and Last Menu Items in WordPress? Sign up below to get regular content updates and also get my "7 Tips to a Professional WordPress Setup" absolutely free!

About Thomas Griffin

I live and breathe WordPress. I create products around WordPress (Soliloquy and OptinMonster), contribute to WordPress core and do lots of fun development around WordPress in general. You can find me on Twitter, Facebook and Google+.

7 Responses to “How to Easily Add Custom Classes to Your First and Last Menu Items in WordPress”

  1. Tanner says:

    Great tutorial Thomas! I also wanted to point out that you can add classes via the menus page in the wp-admin by selecting Screen Options and then CSS Classes. I know that’s not as cool as having WordPress auto add classes, but I know many users are unaware of this feature.

    Keep up the great work!

    • griffinjt says:

      That is a very useful feature indeed! This code is good to automatically give styles to menu items where people may not otherwise remember to add the classes that way, but I do use that method all the time too!

  2. Somehow i dont see any of the code posted in your articles!! i checked this post as well as http://thomasgriffinmedia.com/blog/2012/10/optimize-wordpress-queries/ but none of the ‘code’ blocks are displayed!! I wonder if its my browser ?

  3. Tomas Toman says:

    Thank you very much for this tutorial, Thomas! It is very useful for me, but I have one question. I modified the code as follows:

    add_filter( ‘wp_nav_menu_objects’, ‘tgm_filter_menu_class’ );
    function tgm_filter_menu_class( $objects ) {
    $objects[1]->classes[] = ‘first-menu-item’;
    $objects[2]->classes[] = ‘second-menu-item’;
    $objects[3]->classes[] = ‘third-menu-item’;
    return $objects;
    }

    This code assigns the custom class for first, second, third, etc. menu item. But it works not only for top menu items, but also for all nested menus items. For example, if the first top menu item has 2 nested (dropdown) sub-items, this 2 sub-items get “second-menu-item” and “third-menu-item” classes. The second top menu item then get “fourth-menu-item” class. Is there any way how to apply this code only for top menu items? So that, in the above example taking the second top menu item class “second-menu-item”, regardless of nested sub-menus?

    Thanks in advance for your response.

  4. […] References: Stack Exchange – Adding first last css classes to menusThomas Griffin Media – How to Easily Add Custom Classes to Your First and Last Menu Items in W… […]

  5. Claudio Myst says:

    Thank you for the code, helped immensely.

    But returned an error with DEBUG enabled.
    “Strict Standards: Only variables Should be passed by reference”

    The error refers to line
    $objects[end( array_keys( $top_ids ) )]->classes[] = ‘last-menu-item’;

    Changing this line to the following code, everything is perfect

    $key = array_keys( $top_ids );
    $end = end($key);
    $objects[$end]->classes[] = ‘last-menu-item’;

    I hope I’ve helped.
    Again, thank you.

  6. Pranav Gupta says:

    Hello Thomas, I want to add these First and last Classes to the page menu items, how should I proceed ?

Leave a Reply