Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
    
Did you try this ? –  mike23 Jul 13 '11 at 16:12
    
i need it to be automatic for the clients sake as they'll be adding new pages/post into the menu at will. So i'll always need the 3rd item to have a class 'last'. Cheers though... –  daniel Crabbe Jul 13 '11 at 17:40
    
How are you trying to structure the Nav? –  Alex Older Jul 14 '11 at 7:51
    
structure is <ul><li>link</li>... </ul> –  daniel Crabbe Jul 14 '11 at 9:08
add comment

4 Answers

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.

share|improve this answer
    
Updated the code, it was only selecting the third element, not every third. (thx to Chris_O's answer) –  mike23 Jul 14 '11 at 8:16
    
Cheers Mike - thought about jquery but using it wont meet our clients' requirements so it has to bee php/css. –  daniel Crabbe Jul 14 '11 at 9:07
add comment

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

share|improve this answer
    
right but that would be a little risky as nth-child in CSS is only supported by the most recent browsers (no IE8 or FF3 for example) –  mike23 Jul 14 '11 at 8:14
    
Yeh - really annoying all the ie browsers (<9) don't support it. IS there not a add_filter approach to this? –  daniel Crabbe Jul 14 '11 at 9:07
    
There are plenty of javascript libraries that add css3 support for older browsers. I like selectivizr –  Chris_O Jul 14 '11 at 9:37
add comment
up vote 1 down vote accepted

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);
share|improve this answer
add comment

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;
};
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.