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

On default, after calling this script, we recieve something along these lines:

<ul>
    <li class="page_item current_page_parent"> 
        <a href="#">Link</a>
    </li>
    <li class="page_item"> 
        <a href="#">Link2</a>
    </li>
</ul>

On some ocasions you will probably wish to add a <class> or a <span> to each link. Too bad that the wp_list_pages() tag doesn’t take as arguments strings to go before and after each link.

So, this is the way that you can go around this problem:

• 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

<?php
    $my_pages = wp_list_pages('echo=0&title_li=');
    $var1 = '<a';
    $var2 = '<span class="testClass"><a';
    $var3 = '</a';
    $var4 = '</a></span>;';
    $my_pages = str_replace($var1, $var2, $my_pages);
    $my_pages = str_replace($var3, $var4, $my_pages);
    echo $my_pages;
?>

• The above looks for strings $var1 and $var3 and changes them with $var2 and $var4, respectively in the $my_pages variable (which is the outcome of the wp_list_pages() tag)
• It is important to pass echo=0&title_li= as arguments because the output would be otherwise not stored as the &my_pages variable (echo=0) and the list would have a title – typically “Pages” (title_li=)
• After this operation the previous code looks like this:

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

<ul>
    <li class="page_item current_page_parent"> 
        <span class="testClass">
            <a href="#">Link</a>
        </span>
    </li>
    <li class="page_item">
        <span class="testClass">
            <a href="#">Link2</a>
        </span>
    </li>
</ul>

And this is it! Simple yet powerful. This litlle trick can have many applications (like, for example, creating a hover effect with some script on the menu) and it is up to you what to do with it next. If you are going to use it for something – it’s always appreciated if you could share your ideas.

Update! I’ve noticed that a lot of interest is paid to this post. If some of you would like me to explain something in more detail, then ask for it in a comment. I hope that I will be able to help :)
Update 2! I have written a new post about modifying the outcome of the wp_list_pages tag – have a look here: WordPress: how to dynamically modify the output of the wp_list_pages tag
Take care!

Maciek

Q1: How would one style an element inside a link?
Here is a little modification of the script to include styling of parts of a link, as suggested by Ben, although Ben’s problem was a little more complex.
The problem is how to style one part of a link, for example: The link is “WordPress Rocks!” and we want to apply style only to the word “WordPress”, to be… mmmm…. bold and green! That’s how to do it:

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

<?php
    $my_pages = wp_list_pages('echo=0&title_li=');
    $var1 = '<a';
    $var2 = '<span class="testClass"><a';
    $var3 = '</a';
    $var4 = '</a></span>;';
    $var5 = 'Wordpress';
    $var6 = '<h10>Wordpress</h10>';
    $my_pages = str_replace($var1, $var2, $my_pages);
    $my_pages = str_replace($var3, $var4, $my_pages);
    $my_pages = str_replace($var5, $var6, $my_pages);
    echo $my_pages;
?>

As you can see, I have wrapped the word “WordPress” in <h10> tag. Why not <span>? Because for what I know it creates a bunch of gibberish as outcome (try it and you’ll know it). <h10>, or any <h> tag which is not being used, is a simpler solution.
Don’t forget to style it in your CSS file. If the <h> tag breaks your line, use “display:inline;” in your style sheet to fix it.

h10 {
    font-weight: bold;
    color: Green;
    display: inline;
}

Oh, and I am assuming that the word “WordPress” is a constant output from the wp_list_pages(). This means, that wp_list_pages() always outputs the word “WordPress”.

Q1: How to add a line between to <li> elements?
Here’s how:

1
2
3
4
5
6
7

<?php
    $my_pages = wp_list_pages('echo=0&title_li=');
    $var1 = '/li><li';
    $var2 = '/li> whatever you want to add here <li';
    $my_pages = str_replace($var1, $var2, $my_pages);
    echo $my_pages;
?>

UPDATED!!! 25.04.2009

Q2: How do you create a dynamic submenu?
Marc Wiest was kind to share wit us a solution to this problem, based on the above hack and work by Gabriel Svennerberg.
Here is how to create a dynamic submenu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<?php  
    $has_subpages = false;  
    // Check to see if the current page has any subpages  
    $children = wp_list_pages('&child_of='.$post->ID.'&echo=0');  
    if($children) {  
        $has_subpages = true;  
    }  
    // Reseting $children  
    $children = "";  
    // Fetching the right thing depending on if we're on a subpage or on a parent page (that has subpages)  
    if(is_page() && $post->post_parent) {  
        // This is a subpage  
        $children = wp_list_pages("title_li=&include=".$post->post_parent ."&echo=0");  
        $children .= wp_list_pages("title_li=&child_of=".$post->post_parent ."&echo=0");  
    } else if($has_subpages) {  
        // This is a parent page that have subpages  
        $children = wp_list_pages("title_li=&include=".$post->ID ."&echo=0");  
        $children .= wp_list_pages("title_li=&child_of=".$post->ID ."&echo=0");  
    }  
?>  
<!--Check to see if we have anything to output-->  
<?php if ($children) { ?>  
    <div class="subNav">
	<ul>
    	    <li>
            <!--modified wp_list_pages-->
	        <?php
                    $var1 = '<a';
                    $var2 = '<span class="testClass"><a';
                    $var3 = '</a>';
                    $var4 = '</a></span>';
                    $children = str_replace($var1, $var2, $children);
                    $children = str_replace($var3, $var4, $children);
                   echo $children;
                ?>
                <!--end of modified wp_list_pages-->
            </li>
        </ul>  
    </div><!--subNav-->  
<?php } ?>

I didn’t get a chance to test out this code (but it looks alright to me and it works for Marc), so if you run into any problems, let me know in the comment.
Also you are welcome to share your problems and solutions.
Again, thanks Marc!

If you found this post interesting, have a look at the one about dynamically modifying the wp_list_pages output