WordPress.org

1. ragulka
   Member
   Posted 2 years ago #

   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.

2. stvwlf
   Member
   Posted 2 years ago #

   check this plugin
   http://www.technokinetics.com/plugins/page-lists-plus/

3. vidanov
   Member
   Posted 2 years ago #

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

4. fiksie
   Member
   Posted 1 year ago #

   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 :)

5. kuroi
   Member
   Posted 1 year ago #

   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.

6. wpdeveloper
   Member
   Posted 1 year ago #

   This should be a default in wp_nav_menu function. Way too important for navigation styling.

Topic Closed

This topic has been closed to new replies.