wp_nav_menu, add class to every nth item?

Question

is there a way to add a class to every nth item in a menu using wp_nav_menu?

Trying to create columns but need to add a 'last' class to the 3rd item.

cheers! Dc

Answer 1

You can use jQuery to do that. Try this in your header :

$(document).ready(function() {
    $("#mymenu li:nth-child(3n+3)").addClass("last");
});

Note : for this to work you need to have enqueued jQuery.

Answer 2

Nth is already a class, it's a pseudo class.

Why don't you just change whatever css applied to .last and apply it to #nav li:nth-child(3). If you need to target every third menu item it would be #nav li:nth-child(3n+3)

Edit:

Oh yah I forgot to mention support for those pesky stone age browsers.

Luckily there are some good javascript libraries and jQuery plugins that add css3 support to IE < 9

• jQuery Extended Selectors
• Selecivizr
• ie7js

Answer 3

got this working like this in the end...

function add_nthclass($items, $args){

  $scb = get_object_vars($args);

  switch($scb['menu']) {

        case 'mainpages':
            $nth = 2;
            $items = explode('</li>',$items);
            $newitems = array();
              // loop through the menu items, and add the new link at the right position
              foreach($items as $index => $item)                  {

                if(($index+1) % $nth == 0){
                    $newitems[] =  str_replace('class="', 'class="last ', $item);
                }else{                      
                $newitems[]= $item;                 
                }
              }
              // finally put all the menu items back together into a string using the ending <li> tag and return
              $newitems = implode('</li>',$newitems);

        case 'footer':
         // footer menu nth funcs...
        default:

            $newitems = $items;

    } // End switch

    return $newitems;    
}    
add_filter('wp_nav_menu_items', 'add_nthclass', 10, 2);

Answer 4

If you just want to add class .last to the last menu item, this is a much shorter way to do it:

/**********************************************************/
/* add .last to last menu item                            */
/**********************************************************/

add_filter('wp_nav_menu', 'add_last');

function add_last($output) {
  $output = substr_replace($output, 'class="last menu-item', strripos($output, 'class="menu-item'), strlen('class="menu-item'));
  return $output;
};

If you also have submenus, you can use the following code (thanks to this article).

add_filter('wp_nav_menu', 'add_last');

function add_last($menuHTML) {
  $last_items_ids  = array();
  // Get all custom menus
  $menus = wp_get_nav_menus();
  // For each menu find last items
  foreach ( $menus as $menu_maybe ) {
    // Get items of specific menu
    if ( $menu_items = wp_get_nav_menu_items($menu_maybe->term_id) ) {
      $items = array();
      foreach ( $menu_items as $menu_item ) {
        $items[$menu_item->menu_item_parent][] .= $menu_item->ID;
      }
      // Find IDs of last items
      foreach ( $items as $item ) {
        $last_items_ids[] .= end($item);
      }
   }
}
  foreach( $last_items_ids as $last_item_id ) {
    $items_add_class[] .= ' menu-item-'.$last_item_id;
    $replacement[]     .= ' menu-item-'.$last_item_id . ' last';
  }
  $menuHTML = str_replace($items_add_class, $replacement, $menuHTML);
  return $menuHTML;
};