WordPress.org

Support

Support » Themes and Templates » [Resolved] Using wp_list_pages(), Is there a way to add a string after the a?

[Resolved] Using wp_list_pages(), Is there a way to add a string after the a?

  • I am trying to create a menu that displays as TECH | FOOD | MUSIC | ARTS | HOME, but i can’t figure out how to add the pipe character after the a element, and further more, how to exclude the pipe for the last a (though that will probably be done with jquery).

    Is this possible? Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • <div id="nav">
    <ul  >
        <li><a href="#">Tech</a></li>
        <li><a href="#">food</a></li>
    	<li><a href="#">music</a></li>
    </ul>
    </div>
    <style type="text/css" >
    #nav ul{
     list-style-type: none;
    }
    
    #nav li{
    	 float:left;
    }
    a{
    	display:block;
    	padding: 0px 5px 0px ;
    	border-right:solid 1px red;
    	text-decoration:none;
    }
    </style>

    yes remove the last li with jquery..

    style:border-right:none;

    Thanks for the suggestion, but is there no way to add separating characters after each li?

    esmi

    @esmi

    Forum Moderator

    Not using wp_list_pages. The link_before and link_after parameters only allow you to add characters inside the <a>. You could try using something like:

    <ul id="nav">
    <?php wp_list_pages('title_li'); ?>
    </ul>

    Then use CSS to generate the pipe character using the :after pseudo class.

    #sidebar a:after { content:"|";}

    However, this will only work in the newer browsers like FF2+ and IE8.

    Hmm, thanks anyway, I appreciate it.

    nipponese how do you remove the last pipe character with jquery?

    nipponese how do you remove the last pipe character with jquery?

    Well, I ended up just using border-left, then:

    jQuery(document).ready(function($){
    	  $('ul#navBottom li a:last').css({
    		'border-right': '0'
    	});
     });

    Sorry, meant:

    jQuery(document).ready(function($){
    		$('ul#navBottom li a:last').css({
    			'border-right': '0'
    		});
    	 });

    I know it’s late, but there you go for you who are still searching.
    This is pseudo class that will remove border on last child element (in this case in last li element).

    #nav ul li {
    border-right: solid 1px #000;
    }
    #nav ul > li:last-child {
    border-right: none !important;
    }

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Resolved] Using wp_list_pages(), Is there a way to add a string after the a?’ is closed to new replies.
Skip to toolbar