Skip to content

WordPress First & Last Navigation Items

I used to have a function which I would include in my WordPress functions.php file that would add a unique CSS class to the first and last menu items. This would be so you could assign them unique styles, such as padding or borders, for better looking menus in your themes.

With the advent of WordPress’s Menu system in version 3, I found it necessary to add some more functions for given situations: calling wp_list_pages(), wp_list_categories(), or wp_nav_menu().  So here they are:

First and Last Class for wp_list_pages();

// adds a unique class to the first and last items in the list
function add_markup_pages($output) {
$output= preg_replace('/page-item/', ' first-page-item page-item', $output, 1);
$output=substr_replace($output, " last-page-item page-item", strripos($output, "page-item"), strlen("page-item"));
return $output;
}
add_filter('wp_list_pages', 'add_markup_pages');

First and Last Class for wp_list_categories();

// adds a unique class to the first and last items in the list
function add_markup_categories($output) {
    $output= preg_replace('/cat-item/', ' first-cat-item cat-item', $output, 1);
    $output=substr_replace($output, " last-cat-item cat-item", strripos($output, "cat-item"), strlen("cat-item"));
    return $output;
}
add_filter('wp_list_categories', 'add_markup_categories');

First and Last Class for wp_nav_menu();

// adds a unique class to the first and last items in the list
function add_first_and_last($output) {
  $output = preg_replace('/class="menu-item/', 'class="first-menu-item menu-item', $output, 1);
  $output = substr_replace($output, 'class="last-menu-item menu-item', strripos($output, 'class="menu-item'), strlen('class="menu-item'));
  return $output;
}
add_filter('wp_nav_menu', 'add_first_and_last');

Disclaimer: I don’t remember where I picked up these functions from along the way, so I apologize if there is credit due to someone, somewhere.

Published inWordPress

2 Comments

  1. Katy Katy

    Thank you thank you thank you, this was clean, easy and allowed me to do what I wanted in about 30 seconds. Appreciated 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *