Support » Themes and Templates » Adding a class to first and last menu items
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.
-
check this plugin
http://www.technokinetics.com/plugins/page-lists-plus/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.
- The topic ‘Adding a class to first and last menu items’ is closed to new replies.