Using pipe (' | ') to separate nav links when including certain pages (7 posts)

  1. jennifinch
    Posted 6 years ago #


    I am using this line of code to create a navigation including only certain page titles and wrapping them in an li:
    <div class="menu top"><ul><?php wp_list_pages('include=2,4,8,6&title_li='); ?></ul></div>

    and this bit of css to create a "pipe" in between each page listed.

    .menu li:after {color:#fff; content: " | "}
    li:last-child:after {content: "";}

    It works in the modern browsers, but I wish to find a solution that would create the pipe by writing code in the php code.

    Thx in Advance!

  2. stvwlf
    Posted 6 years ago #

  3. chriswm
    Posted 5 years ago #


    Just wondering if you ever made this work. I have tried both methods with varying success but nothing which satisfies my designer.

    Using link_after, I can't get the spacing I need between the navigation links. And using li:after, I run into issues with the pipe appearing below the navigation link.

    I have also tried using a border-right, but run into issues with the sizing due to a hover state image spacing above my link.


  4. dcannon1
    Posted 5 years ago #

    chriswm, you could add something like this in link_after:
    <span class="navSep">|</span>

    then add something like this to your stylesheet:
    .navSep { padding:0 5px; }

    I didn't actually try that code, but something like that should accomplish what you need.

  5. chriswm
    Posted 5 years ago #

    I thought of trying something like that as well, but the navigation links are being pulled using wp_list_pages. I am thinking, I may need to do some actually editing of the pulling function to get the pipe to show properly.

  6. alaetra
    Posted 5 years ago #

    Why not just add a border left or border right to the list items? Then you can use li:last-child or li:first-child to remove the first or last one (depending on if you do border left or right) if you want.

  7. Michael
    Part-Time Forum Moderator
    Posted 5 years ago #

    here is a more complicated solution (no child pages allowed):

    <?php	// wp_page_list with separator element
    	$args = array(
    		'title_li' => '',
    		'sort_column'	=> 'menu_order',
    		'sort_order'	=> 'asc',
    		'exclude'		=> '120,121',
    		'child_of'	=> 0,
    		'parent'		=> 0,
    		'exclude_tree'	=> '',
    		'hierarchical'	=> 1,
    		'echo' => 0 );
    	$pgl=wp_list_pages( $args );
    	$sep=' | '; // optional separator
    	$rep='</li>'.$sep; // adding separator to replacent for </li>
    	$pgl=str_replace('</li>',$rep,$pgl); // add separator after all closing li
    	if($sep!='') :
    	$pgl=strrev($pgl); $sep=strrev($sep); // this is needed for removing the last separator
    	$pgl=explode($sep,$pgl,2); // this is needed for removing the last separator
    	$pgl=implode('',$pgl); $pgl=strrev($pgl); // this is needed or removing the last separator
    	echo $pgl; // echo pagelist
    ?>	</ul>

    $sep=' | '; could be anything, for instance $sep='<span> | </span>';

    you could turn the whole snippet into a function and hide it in functions.php of your theme.

Topic Closed

This topic has been closed to new replies.

About this Topic