WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. nipponese
    Member
    Posted 4 years ago #

    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!

  2. li9ht
    Member
    Posted 4 years ago #

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

  3. nipponese
    Member
    Posted 4 years ago #

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

  4. esmi
    Theme Diva & Forum Moderator
    Posted 4 years ago #

    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.

  5. nipponese
    Member
    Posted 4 years ago #

    Hmm, thanks anyway, I appreciate it.

  6. webrulon
    Member
    Posted 4 years ago #

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

  7. nipponese
    Member
    Posted 4 years ago #

    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'
    	});
     });
  8. nipponese
    Member
    Posted 4 years ago #

    Sorry, meant:

    jQuery(document).ready(function($){
    		$('ul#navBottom li a:last').css({
    			'border-right': '0'
    		});
    	 });
  9. peterbra
    Member
    Posted 4 years ago #

    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;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic