For a classic PHP-rendered WordPress menu, use the wp_nav_menu_objects filter to identify the first and last top-level menu items and add CSS classes to their class arrays. WordPress carries those classes onto each item’s <li>, where your CSS can target the link. The example below adds menu-item-first and menu-item-last.
Add classes to the first and last top-level items
Place this code in a small site-specific plugin or your child theme’s functions.php. It treats “first” and “last” as the first and last top-level items, excluding submenu items.
As an Amazon Associate I earn from qualifying purchases.
function example_add_first_last_menu_item_classes( $items, $args ) {
$top_level_items = array();
foreach ( $items as $item ) {
if ( 0 === (int) $item->menu_item_parent ) {
$top_level_items[] = $item;
}
}
$count = count( $top_level_items );
if ( 0 === $count ) {
return $items;
}
$top_level_items[0]->classes[] = 'menu-item-first';
$top_level_items[ $count - 1 ]->classes[] = 'menu-item-last';
return $items;
}
add_filter( 'wp_nav_menu_objects', 'example_add_first_last_menu_item_classes', 10, 2 );wp_nav_menu_objects filters the sorted menu-item objects before WordPress generates the HTML. The core Walker_Nav_Menu then applies nav_menu_css_class to the classes for each item’s <li>. Updating the objects’ class arrays is therefore more direct than modifying the rendered HTML. See the wp_nav_menu() reference and Walker_Nav_Menu reference.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use CSS selectors that account for the classes being on the list items:
#1 Best Overall
.menu-item-first > a {
/* styles for the first top-level link */
}
.menu-item-last > a {
/* styles for the last top-level link */
}Menus displayed with wp_nav_menu() can be styled through their classes; inspect the generated markup if your theme changes the usual structure. The WordPress Theme Handbook’s navigation menu guide describes the classic menu output path.
Choose what “first” and “last” mean
Top-level menu only
The example checks whether menu_item_parent is zero, so it assigns the classes to the first and last top-level items only. This is usually what a horizontal site navigation needs.
First and last within each submenu
If each submenu also needs its own first and last classes, group items by their parent and determine positions separately within each group. A single first/last calculation across the whole item list does not identify the ends of every submenu.
A menu with one top-level item
With one qualifying item, the same item is both first and last, so the snippet adds both classes. If your styling requires only one class in that case, add an explicit condition for a count of one.
Limit the change to the intended menu
The snippet applies to the menu items passed through the filter. If the site renders multiple menus, scope the change to the desired menu or theme location using the filter’s $args, and leave other menus unchanged. WordPress’s wp_nav_menu() reference documents that a menu can be selected by menu or registered theme location.
Also check what happens when a requested menu or location is missing: WordPress can use a fallback callback to render a page menu. If the output looks unexpected, verify the menu assignment, the fallback behavior, and the actual generated HTML.
Rank #4
- Keep track of everything from attendance to test scores
- Spiral bound
- Measures 8-1/2" x 11"
Use the filter that matches the change
wp_nav_menu_objects is useful when the logic depends on relative position in the complete sorted item list. For a condition that can be decided one item at a time, nav_menu_css_class filters the classes for an individual <li>. By contrast, wp_nav_menu_items receives the rendered list HTML as a string, so it is less direct for assigning item classes. See the wp_nav_menu_items hook reference.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsA custom walker is generally unnecessary for this class change; consider one only when you need broader changes to conditional menu markup. This code applies to classic PHP-rendered menus using wp_nav_menu(). For a block-based navigation implementation or a theme with a custom walker, inspect how that implementation renders classes before using the snippet unchanged.
Quick Recap
Verify the result
- Save the code in a site-specific plugin or child theme, not WordPress core.
- Load the page that displays the intended menu and inspect its rendered HTML.
- Confirm that
menu-item-firstandmenu-item-lastappear on the expected<li>elements. - Check that your CSS selector matches the theme’s actual markup and that other menus were not changed.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
