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="">this is an example</a>

into this:

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


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:
    $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:


$my_pages = '<li class="page_item page-item-1"><a title="example title" href="">example title</a></li>'


pieces[0] = "<li class="
pieces[1] = "page_item page-item-1"

pieces[2] = "><a title="
pieces[3] = "example title"

pieces[4] = " href="
pieces[5] = ""

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.

Source: Wantusiak Maciej

  1. It is very useful post for wordpress developers, thanks for posting this.

  2. Bonus – this helps folks using “Page Links to” plugin!

    Say you want to make a 3 button nav bar on your front page, AND you want your non-web developer friend to be able to control those three buttons. You simply make 3 pages, use the Page Links to plugin, and use your explode code to grab the needed content, i.e. the title and link.

  3. These are in fact enormous ideas in regarding blogging. You have touched some nice
    points here. Any way keep up wrinting.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: