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

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!

Enjoy? See Inside my WordPress Toolbox

Over 20,000 people have purchased my WordPress products. Get absolutely FREE access to regular updates and my toolbox - a collection of WordPress-related products and resources that every WordPress professional should own.

  • Tanner

    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

      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!

  • webdeveloperswall

    Somehow i dont see any of the code posted in your articles!! i checked this post as well as but none of the ‘code’ blocks are displayed!! I wonder if its my browser ?

  • Tomas Toman

    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.

  • Pingback: Spike » Change iNove default menu with one in pure CSS()

  • Claudio Myst

    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.

  • Pranav Gupta

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