I’ve tried several navigation plugins to list my Pages in the sidebar. Optimally, and for most sites, I want the top (parent) Pages to be listed in the sidebar, and then if a user goes to one of those pages, its sub-pages then unfold below. Similarly, if a child page (sub-page) is navigated to, I want all the sibling pages unfolded, so the reader can see the parent page, as well as the other pages on the same level as the one being viewed.

There are several great plugins that do some of these things, but not quite what I needed. Then there’s WP-dTree, which is an awesome plugin I’ve used on several sites. It has nifty javascript effects for the folding/unfolding pages (or categories). The only thing is that on some of my sites I don’t want to assume that all visitors will have a javascript-enabled browser. If you don’t mind using javascript for your navigation area, I highly recommend this plugin. Be sure to also download the Scriptaculous plugin (link can be found on the WP-dTree Page above) to take advantage of the optional fold/unfold effects of WP-dTree.

So… after looking for another plugin to handle Page navigation, I finally lucked out and found the Folding Pages Widget. This widget does everything I wanted in a Page navigation plugin for the sidebar. Even better, it’s a widget. You can choose which way the Pages will be sorted, Page Order or Title. IMHO, sorting by Page Order is the best because then you can organize the page and sub-page orders by inputting an integer into the Page Order field of your Write>PagePage screen. (Pages given the same Page Order value will be listed according to page creation dates -descending from latest to oldest ).

If you’re looking for expanding page menus that work with WP 2.7 I suggest installing Fold Page List and using code like this:

<ul>
<?php $thispage = $wp_query->post;
if($thispage->post_parent!=0)
{
wswwpx_fold_page_list("sort_column=menu_order&title_li=&amp;amp;child_of=".$thispage->post_parent);
}
else
{
wswwpx_fold_page_list("sort_column=menu_order&title_li=&amp;amp;child_of=".$thispage->ID);
}
?>
</ul>

Styling

With your choice of expanding page list solution in place, we’re on our way to handy expanding navigation for our pages. I decided I wanted the current pages to be bold and larger than the other pages. Luckily WordPress already gives the current page being view a class of current_page_item. So all you have to add to your theme’s style.css file is a line like this:

#nrs-folding-pages .current_page_item a {font-weight:bold; font-size:1.2em;}

Or you can use the following CSS code for more advanced styling. For example, if the current page is a parent page its title will be made larger, bolded and followed by right-pointing arrows, to indicated that sub-pages follow. Then the children pages are bolded. If viewing child pages, all sister/brother pages are bolded and expanded to show which level of the page hierarchy is being viewed.

ul li.current_page_item a { font-size:1.1em; font-weight:bold;}
ul li.current_page_item a:after { content:” >>”;}
ul li ul li.page_item a { font-size:1.1em; font-weight:bold;}
ul li ul li.page_item a:after { content:” “;}

The code above will work in the default theme. For your theme you may need to prefix each line with the div of your sidebar. And some themes may have more nested list (ul li) layers. If you’re unsure of how many list layers your theme has, you can view the source code of your site using your browser, or better yet, if you use Firefox, you can install this great FF add-on and hit F12 to quickly see the code in question. –you and also right-click on the list area and select ‘investigate element’ and the Firebug add-on will expand that portion of code. If in doubt and the code above is not working , experiment with adding an additional ‘ul li’ after the first ‘ul li’ above.