Support » Fixing WordPress » How to add a special character between pages in the top nav bar?

  • Hi all,

    I want to add a character, let’s say “|” between listing pages in the top bar, when using the wp_list_pages() function.
    I’ve found some discussions about it, but no one had real good solution for me.

    I tried to use this code for example –

    <?php
    $char = ' | ';
    wp_list_pages('link_before='.$char.'<span>&link_after=</span>');
    ?>

    The problem is the the character is being displayed very close to the page name, and I want it to be in the center between one page to another one.

    Another problem with this, is that the character is part of the link, since it’s being added inside the a anchor tag, so even if there was a way to add some space between the character and the page name, it would all be part of the link to the page, which is not what I want..

    Is there another way to do that? Or I will have to give up using the wp_list_pages() in this case and build a manual list? (which is also not so good at all..)

    Thanks,
    Maor

Viewing 7 replies - 1 through 7 (of 7 total)
  • esmi

    (@esmi)

    Forum Moderator

    Stick with wp_list_pages and try using CSS to display a character or list bullet before each item.

    Thanks for the advise esmi.

    How could I display a character with CSS before each item without making it a background image?

    esmi

    (@esmi)

    Forum Moderator

    Use list-style-image if you want to add a list bullet. Or you can use the before or :after pseudo elements to place generated content before (or after) the link.

    http://www.w3schools.com/css/css_pseudo_elements.asp

    thanks.
    Do you know if the pseudo elements li:before and after support also IE7?

    esmi

    (@esmi)

    Forum Moderator

    Sorry – no. Only the better browsers (and IE8) support this.

    I thought so 🙁
    That’s a problem, since I have to write a code which will support also the nagging IE7 as well..
    Are there any other ideas for that?

    esmi

    (@esmi)

    Forum Moderator

    A list bullet image or perhaps a border-left on the <li> tag would probably be your best (and safest) bet.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to add a special character between pages in the top nav bar?’ is closed to new replies.