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.
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.
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:
If you also want to hide all ul elements you can use jQuery, too (not sure about the correct syntax):
Maybe this Plugin (Classy wp-List) helps. I haven’t tried it yet but it says it will let you define a class for each page in the backend.
good luck.