One of the most common things to do with your wp_list_pages, is to use css to create a horizontal navigation. A problem can sometimes occur when you decide later to add another page s a child to an original page. WordPress by default will begin a child ul within the parent li and most of the time, this will break your pretty horizontal styling. The first solution tht comes to mind is to create dropdowns. This is pretty easy to accomplish with the suckerfish method, but sometimes you just want to avoid that solution.

Such was the case in a template I created a few months ago called Resilience. So I set out to discover a way to list the child pages in the sidebar without breaking it’s styling as well.

My first solution was this bit of code:

<li><ul>
<?php wp_list_pages('title_li=&child_of='.$post->ID.''); ?>
</ul></li>

The result was a list of the subpages just like I wanted, but it left an empty list item with an empty ul inside on every single page of my blog besides the one page that actually had child pages. This was easy to fix with a conditional tag:

<?php if ( is_page() ) { ?>

<li><ul>
<?php wp_list_pages('title_li=&child_of='.$post->ID.''); ?>
</ul></li>

<?php } ?>

This removed the extra code from the sidebar on all pages, but still left it on pages that didn’t have child pages to list. So I found the peice of code that would create the list only on pages with child pages, so now I have this:

<?php if ( is_page() ) { ?>

<?php $children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0');
if ($children) { ?>

<li><ul>
<?php echo $children; ?>
</ul></li>

<?php } } ?>

This seemed to give me what I wanted. When I clicked on a page that had no children, the extra code did not display, when I clicked on the page with children, they listed nicely. But when I clicked on one of those child pages, the list of child pages disappeared and I was left having to click on the parent page again to get back to that important navigational list. So I consulted my advisor (Google), and we came up with the solution to once and for all fix the list problems:

<?php if ( is_page() ) { ?>
<?php
if($post->post_parent)
$children = wp_list_pages('title_li=&child_of='.$post->post_parent.'&echo=0'); else
$children = wp_list_pages('title_li=&child_of='.$post->ID.';echo=0');
if ($children) { ?>

<li><ul>
<?php echo $children; ?>
</ul></li>

<?php } } ?>

The final dilemma was that I had a list with no apparent purpose because it had no title. So while I knew it was more information for that parent topic, a viewer might not recognize that at first. Plus, it just didn’t flow with your typical sidebar list. This code wasn’t hard to find and tweak for my purpose and my final result is this:

<?php if ( is_page() ) { ?>

<?php
if($post->post_parent)
$children = wp_list_pages('title_li=&child_of='.$post->post_parent.'&echo=0'); else
$children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0');
if ($children) { ?>

<li>
<h2>
<?php
$parent_title = get_the_title($post->post_parent);
echo $parent_title;
?>
</h2>

<ul>
<?php echo $children; ?>
</ul>
</li>

<?php } } ?>

For anyone that may be interested, the Resilience theme is for sale.