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
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It only takes a minute to sign up.
Sign up to join this communityis 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
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.
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)
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
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);
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;
};