Adding a class to first and last menu items

  • Hi,

    I want to achieve a fairly simple thing. To make the first and last menu tiems have a class. Something like this:

    <ul class="menu>
<li class="first"></li>
<li></li>
<li class="last"></li>
</ul>

    Now, it would be even better if I could also give each menu item a class name based on it’s number. And i do not mean the page id.
    Like this:

    <ul class="menu>
<li class="item-1 first"></li>
<li class="item-2"></li>
<li class="item-3 last"></li>
</ul>

    I’ve searched all over and I couldn’t find anything that would make this possible. I hope someone can help me on this.

Viewing 5 replies - 1 through 5 (of 5 total)

  • check this plugin
    https://www.technokinetics.com/plugins/page-lists-plus/

    vidanov

    (@vidanov)

    For pages (wp_list_pages) first-page-item and last-page-item class:

    Put the following code in the functions.php of your theme

    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');

    And the same for the categories (wp_list_categories) first-cat-item and last-cat-item

    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');

    For the menu in 3.0 version of WordPress you must place the following code:

    function add_markup_pages($output) {
    $output= preg_replace('/menu-item/', 'first-menu-item menu-item', $output, 1);
	$output=substr_replace($output, "last-menu-item menu-item", strripos($output, "menu-item"), strlen("menu-item"));
    return $output;
}
add_filter('wp_nav_menu', 'add_markup_pages');

    It gives “first-menu-item” under id while it gives “last-menu-item” under class. If anyone can correct this it would be great. Not a big deal though. As long as it works ??

    Slightly better would be

    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');

    This forces the extra markup to be added to the class list for the respective elements, rather than having more than one ID for a tag.

    Feels like there should be a more elegant solution though.

    This should be a default in wp_nav_menu function. Way too important for navigation styling.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adding a class to first and last menu items’ is closed to new replies.