WordPress: How to dynamically modify the output of the wp_list_pages

Modifying the output of Wordpres’ template tag wp_list_pages

I’ve noticed a lot of traffic to my previous post on this subject: How to style wp_list_pages, which means that there is a lot of interest in this subject.
I recommend reading the previous article as it might explain certain things which I am going to write about here.

For the template that I was recently working on, I needed a modified output of the default <?php wp_list_pages(‘arguments’); ?> tag, in a way that it would change the link into and anchor. For example, instead of this:

<li class="page_item page-item-1"> 
    <a title="thisisanexample" href="http://www.thisisanexample.com">this is an example</a>
</li>

into this:

<li class="page_item page-item-1"> 
    <a title="thisisanexample" href="#thisisanexample">this is an example</a>
</li>

If you are wondering what are anchors for: these are the shortcuts that take you from one part of a page to another part of the same page.
Here’s what I had to start with:

• A number of pages which all had the same parent
• The parent’s ID is 5 (you need to find this number on your own)
• They were all only one level deep (it means that these pages didn’t have any children)
• the powerful wp_list_pages() tag

So, this is how to do it…

• Find your wp_list_pages() tag in the template
• Change the <?php wp_list_pages(‘arguments’); ?> into the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
    $my_pages = wp_list_pages('echo=0&title_li=&child_of=5&depth=1');
    $pieces = explode('"', $my_pages);
    $i = 5;
    $j = 3;
    $limit = count($pieces);
    for (;$i<$limit;) {
        $tmp1 = '#'.$pieces[$j];
        $pieces[$i] = $tmp1;
        $i = $i+6;
        $j = $j+6;
    } 
    $tmp2 = implode('"',$pieces);
    echo $tmp2;
?>

• The above code takes the output of wp_list_pages and assigns it to the variable $my_pages
• The parameters of wp_list_pages: echo=0,so it doesn’t output to the screen, title_li=, so there is no name for the list, child_of=5, so we only get pages, who are children of page no. 5, and depth=1, so we don’t include any children of these pages
• After that, we need to split (explode) the output into separate parts (array), at each of the ” characters:

from:

$my_pages = '<li class="page_item page-item-1"><a title="example title" href="http://www.examplelink.com">example title</a></li>'

into:

pieces[0] = "<li class="
pieces[1] = "page_item page-item-1"
pieces[2] = "><a title="
pieces[3] = "example title"
pieces[4] = " href="
pieces[5] = "http://www.examplelink.com"
pieces[6] = ">example title</a></li>"

• Next, we find what are we going to use: pages[3] and pages[5] – the title and the link
• Also, if we have more than 1 link, then we need to set a limit of how many times the for function will be executed – we can do it easily by getting the number of elements in the pieces[] array:

$limit = count($pieces);

• Then, we set up a for loop which goes through the whole pieces[] array and exchanges every link with its title, preceded with # (the anchor mark):

$tmp1 = '#'.$pieces[$j];
$pieces[$i] = $tmp1;

• The above creates a temporary variable by joining the ‘#’ sign with the title of the link (from pieces[3]), and then changes the value of pieces[5] to that temporary variable, which now is our anchor
• And finally, if you have more than one link (page) then you will need to increase both $i and $j values by 6 – this is how often they are occurring in the pieces[] array
• When there are no more pieces left to go through and the for loop ends, we need to join all the values of the pieces[] array back into one single variable and print it out

And that is it.

It might happen that the wp_list_pages function outputs the title and the link swapped (link comes before the title), then just swap the values of $i and $j, and it should work.

Oh, and it only works with the unmodified output of the <?php wp_list_pages(‘arguments’); ?> tag – it might behave differently when used together with what I have discussed in the previous link on this subject: How to style wp_list_pages

As usual, let me know what you think about this hack (especially since it isn’t the only way of doing it) and ask questions in the comments if you need help.

Thanks
If you found this interesting, please also check out this post on styling wp_list_pages

Comments (2)