3

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

4
  • Did you try this ?
    – mike23
    Jul 13, 2011 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...
    – v3nt
    Jul 13, 2011 at 17:40
  • How are you trying to structure the Nav?
    – Alex Older
    Jul 14, 2011 at 7:51
  • structure is <ul><li>link</li>... </ul>
    – v3nt
    Jul 14, 2011 at 9:08

4 Answers 4

2

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.

2
  • Updated the code, it was only selecting the third element, not every third. (thx to Chris_O's answer)
    – mike23
    Jul 14, 2011 at 8:16
  • Cheers Mike - thought about jquery but using it wont meet our clients' requirements so it has to bee php/css.
    – v3nt
    Jul 14, 2011 at 9:07
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

3
  • 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, 2011 at 8:14
  • Yeh - really annoying all the ie browsers (<9) don't support it. IS there not a add_filter approach to this?
    – v3nt
    Jul 14, 2011 at 9:07
  • There are plenty of javascript libraries that add css3 support for older browsers. I like selectivizr
    – Chris_O
    Jul 14, 2011 at 9:37
2

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

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;
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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