[resolved] [closed] Link Before Outside tags (18 posts)

  1. unvolve
    Posted 3 years ago #

    my code

    <?php wp_list_pages('title_li=&depth=1&link_before=<div id="space">|</div>'); ?>

    This produces the exact look I want. However, is there a way so my

    <div id="space">|</div>

    is outside of the <a tags? I don't want them to be clickable, have a hover state, or even be part of the link. I simply want my div with the grep to be text that separates each link.

    I'm open to all suggestions. I want to separate each link with

    <div id="space">|</div>

    I don't really care how.

  2. wpismypuppet
    Posted 3 years ago #

    Why not just style the links with css? You could use css to add a border-left, some padding, and use :first-child to get rid of the left border on the first li element?

    Otherwise you'd have to create a custom Walker for this function as there is no other way to add what you are looking for outside the anchor tag.

    By the way, I am assuming you want the links to look like:

    link 1 | link 2 | link 3


  3. unvolve
    Posted 3 years ago #

    Yes, wpismypuppet, that is how I want them to look. I am styling the links using CSS.

    But css isn't really my problem. I need each individual link to have a grep (|) between them.

    Even with CSS I still need a way to get the | between each link.

    As you can see I'm using a div to surround my grep so I all ready am using css.

    I just need a way to display a grep before each link.

    I'm not sure what you mean about using a child. Creating a border-left just complicates it all.

    Even if I did it that way I still need each link to be affected. If i could affect each link without having to call each individual page id in my menu i wouldn't be having this issue on the first place ya know?

    So rather than complicate it with CSS and border-lefts I'd much rather simply insert the grep in the html before each link, but outside the a tags.

    Creating a border-left is pretty much the same thing as adding the grep before each link. If I can affect each individual link using css why not using html characters?

  4. wpismypuppet
    Posted 3 years ago #

    Well, that's what I mean by the border... instead of a grep, use a border. Let's assume you have something that looks like this:

    <ul class="mylist">
        <li><a href="/">Home</a></li>
        <li><a href="/contact/">Contact</a></li>
        <li><a href="/portfolio/">Portfolio</a></li>

    You simply need to add something like:

    .mylist ul {
        margin: 0;
        padding: 0;
        list-style: none;
    .mylist li {
        margin: 0;
        padding: 0;
        list-style: none;
        float: left;
    .mylist a {
        display: block;
        padding: 3px 10px;
        border-left: 1px solid #000; // this will mimic the grep
    .mylist li:first-child a {
        border-left: 0;

    Obviously your styles will be different, but it gives you a starting point. And :first-child works right down to IE7. If you need it to work for IE6, you're in trouble :) But who codes for that anymore? Even Microsoft gave up support for anything lower than IE7.

    And if you want the border (grep) to be a little shorter than the words, this is done by adding the border to the LI instead of the A and using a height value on the LI to make it look smaller. I can help with that if needed. Let me know if this makes sense.

  5. unvolve
    Posted 3 years ago #

    I understood what you were saying from the start. That is overly complicated for a simple grep before each link. I understand it would work, and so on.

    I want to use a grep inside of a div so i can control certain aspects. I have much more freedom with a special separate div than I do adding css to my li. (I'm wanting to use a div for a reason. And what if down the line I'd like to use something other than a grep? For what I'm doing it makes much more sense to have a special container div and put my grep in it.) And on a side note my grep will be larger than the link text. Which is another main reason I'm using a special div.

    I get what you are saying with the border left. and yes, physically it may not make much difference to you.

    But when it comes to it that is a lot of procedure for a simple piece of text.

    Keep in mind I'm using wp_list_pages and that is an array. So I don't have full control over everything like I would in a loop.

    Maybe I would be better off just coding a php loop to display my navigation.. But that still seems like a lot of work to add a simple piece of text.

  6. wpismypuppet
    Posted 3 years ago #

    And again, this is my point. In order for wp_list_pages to display the

    <div id="space">|</div>

    outside of the anchor tag, you will need to code a custom Walker in PHP which, in my opinion, is WAY more complicated than CSS. I apologize for explaining to you something you already knew. I was just trying to give you the easiest way possible.

    Would you like assistance in creating a custom Walker class?

  7. unvolve
    Posted 3 years ago #

    Yeah, that'd be great. if you could point me to the file or files where that stuff is I could probably read over them and come up with a plan of action.

  8. wpismypuppet
    Posted 3 years ago #

    Here is a tutorial that places a thumbnail for each page link. You could use this information and pump out your grep instead of a thumbnail :)


    Best of luck and please let me know if this helps. Otherwise I can help you write one up.

  9. unvolve
    Posted 3 years ago #

    I simply changed the output in post-template.php. I moved


    in front of the li and outside the a tags.

    Very simple solution. Took 3 minutes.

    I might end up eventually copying the link_before function and renaming it to something else to create a new walker specifically for outside the the a tags. That way i will have two functions. One for inside, and one for outside the a tag. But for now this will do.

    Thank you!

  10. esmi
    Forum Moderator
    Posted 3 years ago #

    I simply changed the output in post-template.php.

    No! Never, ever, edit WordPress core scripts. And do not encourage others to do so. Editing core scripts can bring down your entire site and/or open security holes for hackers to use.

  11. unvolve
    Posted 3 years ago #

    esmi, come on. LOL. I moved one variable from inside an anchor to outside the anchor. It isn't a major change. It won't bring anything down.

    It was

    $output .= $indent . '<li class="' . $css_class . '"><a href="' . get_permalink($page->ID) . '">' . $link_before . apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after . '</a>';

    It is now

    $output .= $indent . $link_before . '<li class="' . $css_class . '"><a href="' . get_permalink($page->ID) . '">' . apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after . '</a>';

    Nothing will be brought down over that. It is an output. i didn't actually change the function. I simply had it output somewhere else.
    If it weren't for changing core files WP could never evolve! I love WP too much to keep it from growing!

  12. esmi
    Forum Moderator
    Posted 3 years ago #

    You should never edit core WordPress files full stop.

  13. unvolve
    Posted 3 years ago #

    What about when making updates to old WP code? Code has to change at some point. Are you telling me WP will never have an update again because core files shouldn't be altered?

    In this situation it made sense to have the $link_before outside the a. I didn't alter any functionality. I simply made it output different on the client side.

    The WP code that makes the function run is still in tact. However, I am using that function somewhere different. Are you saying these functions should never be used for other purposes?

    If one of the WP functions does exactly what I need I shouldn't call it out on my site?

  14. esmi
    Forum Moderator
    Posted 3 years ago #

    What about when making updates to old WP code

    You should be using the latest version of WordPress.

    Are you telling me WP will never have an update again because core files shouldn't be altered?

    Core updates go through a very strict process before they are actually added to the next version of WordPress. That is totally different to you making ad-hoc changes to core files on your site.

    Are you saying these functions should never be used for other purposes?

    I am saying that you should alter the output of core function using filters etc in your theme or plugins. What you are currently doing is Wrong(tm).

  15. wpismypuppet
    Posted 3 years ago #

    Look, what esmi is trying to tell you is that if YOU want to play with core files, that's your concern... just don't POST that here as a valid answer. People who don't really know what they are doing will take it as solid fix advice and wonder why it breaks when they upgrade their installation!

    And unvolve... what you did was EXACTLY what the walker class was designed to do! If you simple copied that code you modified, placed it in a walker extend class in your functions.php file, you'd have the same results. And you won't modify the core files. You have to understand that what you modified in the core is used elsewhere as well and therefor might break another function.

    You claim to know your PHP, but you don't show how well of an OOP programmer you really are. The whole reason we can extend classes is so we don't break functionality in other areas... AND we can reuse code, not rewrite it.

    For anyone else reading this thread and attempting to use this solution as a valid option, please don't. Instead, read the link I posted and use a custom walker class. That is what they are there for.

  16. unvolve
    Posted 3 years ago #

    If anyone actually does read through this here is what I did.

    If you are using the wp_list_pages array along with the link_before class you probably know that link before takes whatever you want to add and puts it before the link inside of the anchor tags.

    This makes it part of the link. But what if you don't want it as part of the link?

    Sure you can write a brand new long complicated class to do this, or you could move one variable that does nothing more than output the link_before state.

    What i did was went in the includes directory, opened post-template.php, and then went to line 1048

    $output .= $indent . $link_before . '<li class="' . $css_class . '"><a href="' . get_permalink($page->ID) . '">' . $link_before  . apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after . '</a>';

    and changed it to

    $output .= $indent . $link_before . '<li class="' . $css_class . '"><a href="' . get_permalink($page->ID) . '">' . $link_before  . apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after . '</a>';

    All i did was tell the $link_before to display outside of the anchor tag rather than inside.

    It wasn't some tremendous change. It took me 3 minutes at the most..

  17. @unvolve I've deleted your profanity laced post and any further posts by you will need to be approved by a moderator before anyone else can see them. That's the second post from you that's been deleted due to your rudeness.

    Just to quickly recap:

    1 - You can and should do whatever you want or like to do on your own installation. You want to edit WordPress core files, please knock yourself out. Honestly. That part is cool, you want to learn and share? That's good.

    2 - You were being cautioned about changing those files on your installation. That's it, just a caution. That caution was based on the fact that You're Doing It All Wrong™ Again knock yourself out, it's your installation and you should do as you please.

    3 - Your account here is being placed in moderation not because you want to edit WordPress files, it's being moderated because of your rudeness and profanity. Reasonable people disagree all the time but if you want to behave like a truculent child then take it somewhere else.

    I'm now closing this thread.

  18. You know, rather than point out how unvolve is silly for changing core files, someone could simply have posted the right answer. It's only like 8 lines of code.

    class Example_Page_Walker extends Walker_Page {
            function start_el(&$output, $page, $depth, $args, $current_page) {
    		$output .= '<div id="space">|</div>';
    		parent::start_el($output, $page, $depth, $args, $current_page);
    $example_walker = new Example_Page_Walker();
    wp_list_pages(array('title_li'=>'', 'depth'=>1, 'walker' => $example_walker));

    That will produce the same results as his core edit, basically, but without the core edit. Obviously, this solution is better because it will survive upgrades and he won't have to be re-editing core all the time.

    Although, I will note that both this and his core edit are wrong in that he's putting a DIV outside the LI's, when it should be inside them. But, if you're going to match results, might as well be exact about it.

    I mean, yes, I get that telling somebody not to edit core is a good thing, but instead of simply showing him the correct alternative, having a many-post-long argument about it really doesn't advance the goalposts here. Leading by example is sometimes a good idea.

    Okay, I'm done. Re-closing.

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.