WordPress – Adding classes to wp_list_pages

Does anyone know how to edit/change WordPress’s wp_list_pages function in order to add classes to the ul and li items?

I’m trying to implement the new version of jquery.treeview which requires <li class="expandable"> and <ul style="display: none;"> on expandable lists and child ul’s.

Read More

I’ve been messing around with this but it aint working too good in that it applies the ‘expandable’ class to all li’s:

$pages = wp_list_pages('title_li=&echo=0' );
        $pages = preg_replace('/class="/','class="expandable ', $pages); //note space on end of replacement string                  
        //output
        echo $pages;

And here is what the outputted html should look like:

<ul class="treeview" id="tree">

        <li><a href="#">Home</a></li>           
        <li class="expandable"><a href="#">Expand 1</a>
            <ul style="display: none;">
                <li class="expandable"><a href="#">Expand 2_1</a>
                    <ul style="display: none;">
                        <li><a href="#">Expanded 3_1</a></li>
                        <li><a href="#">Expanded 3_2</a></li>
                        <li><a href="#">Expanded 3_3</a></li>
                    </ul>                       
                </li>
                <li class="expandable"><a href="#" >Expand 2_2</a>
                    <ul style="display: none;">
                        <li><a href="#">Expanded 4_1</a></li>
                        <li><a href="#">Expanded 4_2</a></li>
                        <li><a href="#">Expanded 4_3</a></li>
                    </ul>  
                </li>                       
            </ul>  

Hope this makes sense and any help greatly appreciated, S.

Related posts

Leave a Reply

2 comments

  1. I guess you are trying to activate a tree view on the page items. As this would require JavaScript you can simply add the class using JavaScript before initializing the tree view:

    $("#tree li").addClass("expandable");
    $("#tree").treeview();
    

    If you also want to hide all ul elements you can use jQuery, too (not sure about the correct syntax):

    $("#tree ul").hide();