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:

  • this is an example
  • into this:

  • this is an example

  • 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:
    • 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 = '
  • example title
  • '


    pieces[0] = "
    • 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.

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


    • Jason says:

      Ok, this is excellent, and almost does exactly what I’m after. That is, how can you add a class to a specific li within the ul.
      Perhaps the first item in the list, or the last, or one (or more) randomly within the list itself?
      Any ideas on how you might achieve this?
      Great article(s) though – impressive.

    • Thanks Jason!
      I would try to get the output of the wp_page_list() into a variable, then split it at each < li > and place it into an array, and do a for() loop on the array, changing the required array data (or just change the required array position, without doing a loop). After that you would have to merge the array back into a variable and output it. Hope this will get you started.
      Let me know how it works for you.
      All the best,

      [EDIT] sorry for the mess with the missing text

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.