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.

Will Chatham

Will Chatham is a Cyber Security Assurance Analyst at a government data center. Since Netscape 2.0, he has worked in a wide array of environments including non-profit, corporate, small business, and government. His varied background, from developer to search engine optimizer to security professional, has helped him build a wide range of skills that serve people well in the current web-based world.

2 thoughts on “WordPress First & Last Navigation Items

  1. 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 *