WordPress: How to style wp_list_pages

Applying styling to dynamically generated lists (or any content) in WordPress.
Recently, I was in a need of changing the default outcome of the <?php wp_list_pages(‘arguments’); ?> tag in WordPress – as you’ll see, it’s a really simple procedure. I needed to change the wp_list_pages outcome, but this technique can be applied to other tags as well.

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

Comments (30)