WordPress.org

Ready to get started?Download WordPress

Forums

wp_list_pages add class on <li> (6 posts)

  1. RockSoup
    Member
    Posted 6 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 6 years ago #

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

    Can anyone offer advice?

  3. llamaman
    Member
    Posted 5 years ago #

    #navigationMenu li {
    	display: inline;
    	/* Add the pipe character "|" after each page link */
    	border-right: 1px solid #CCC;
    }
  4. Alex Dunae
    Member
    Posted 5 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 5 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 5 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.

About this Topic