WordPress.org

1. RockSoup
   Member
   Posted 4 years ago #

   I am working on a site that requires my horizontal nav have pipe ( "|" ) between the items. I am using wp_list_pages to create the menu and I am applying the pipe characters using css border:right, etc. My problem is that I do not want a border on my final list element. Could someone please show me code to add classes to the first and/or last <li>or anchor tags generated by wp_list_pages? thanks

2. jacobreed
   Member
   Posted 3 years ago #

   Wanted to bump this thread, since I'm having the same problem.

   Can anyone offer advice?

3. llamaman
   Member
   Posted 3 years ago #

   #navigationMenu li {
   	display: inline;
   	/* Add the pipe character "|" after each page link */
   	border-right: 1px solid #CCC;
   }

4. Alex Dunae
   Member
   Posted 3 years ago #

   Try adding something like this in your theme's functions.php. It will add first and last classes to the list items.

   add_filter('wp_list_pages','wp_list_pages_add_first_last');
   
   function wp_list_pages_add_first_last($content) {
   	$content = preg_replace('/li class\=\"/', 'li class="first ', $content, 1);
   	$content_rev = strrev($content);
   	$content_rev = preg_replace('/\"\=ssalc il/', ' tsal"=ssalc il', $content_rev, 1);
   	return strrev($content_rev);
   
   }

5. t31os
   Member
   Posted 3 years ago #

   You don't need to make it that complicated surely....

   Either use the CSS2 :last-child, obviously users not on CSS2 compliant browsers won't have the CSS def applied...

   Or if you have a set amount of items in the list and you know how many LI elements there will be you could do the following...

   #yourID li+li+li+li {border-right:none}
   If the forth LI element
   #yourID li+li+li+li+li {border-right:none}
   If the fifth LI element

   and so on....

   Failing those, you'd need something like Alex suggested...

6. failintheair
   Member
   Posted 3 years ago #

   alexdunae: this is brilliant, thanks for this. My menu is working like a charm with the seperator after each item except for the last one.

   Cheers...

Topic Closed

This topic has been closed to new replies.