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.
Good site I “Stumbledupon” it today and gave it a stumble for you.. looking forward to seeing what else you have..later
Nice post, I was having the exact same issues. Thanks for posting.
nate’s last blog post..Top 3 college website designs
Hi, nice approach! But what to do if the childs had childs also, and may be more! And we don’t want to lose the first parent and all his hierarchy while the user be in any of the child pages or grandson pages….
Any idea?
Nuria,
Handling a third level is a bit complicated, but I do plan on writing about that soon and sharing what I have learned.
I like your post, I like that you are at a similar stage of working this stuff out but a bit ahead, I like to read how to’s from people like yourself. Thanks. And we did add Grayson’s home page button to top and bottom navigation and gave her a favicon.
Hi Tammy
I’m not completely gifted in php, so I’m a little confused to what page this goes in. Also, is it replacing anything?
Thanks,
David
This code should go in sidebar.php, most likely close to the top. It shouldn’t replace anything, especially if you are already using a horizontal navigation.
Thanks for your response – however, they are still just appearing under the horizontal nav, not in the sidebar.
http://humanfiles.com/wp/
Thanks for your help – let me know what I’m overlooking if you have time.
the only thing this fix does is list child pages of a parent page, when you are on that parent page. You will only see the list show up if you are on a parent page that has child pages, or a child of a parent page.
that’s what I want it to do, but I want the children to show up in the sidebar. I must be doing something wrong.
And how to display a list of subpages for some parent page, but not only the titles on the list, but also the images associated with them? [first image on the page]
This is the best tutorial on setting up child pages / parent pages on Wordpress I’ve seen so far. Thank You!!!
@David
With the code I have provided, the children will only show up in the sidebar if you are on the parent page or a sibling page, they will not show up if you are on just any page.
@SasQ
That will take another full tutorial that’d I’d be happy to write up sometime. It’s also something that will be covered in my upcoming book.
@Jaki
Thanks!
I’m getting close, trying to replicate the function of your Imageless theme, but I’m still struggling. No doubt I’m getting closer though!
Looking forward to the book.
Btw, I see this type of comment box a lot (everything under “Leave a Reply). Is it produced by a plugin or just a custom design? That’s all the information I want to require for commenting.
I’m not sure what you mean about my comment box. The subscribe to comments is a plugin, other than that, it’s just the basic form. The text, “Didn’t find the answer you’re looking for? Have something to add?” was added directly to comments.php
Oh, I just presumed that types of forms / comment boxes might be products available through plugins. I guess not – I jut need to find the right form code and put it in the right place, since I don’t like the form with the template I’m using.
Hi Tammy,
I’m using Thesis and I tried putting in this code into my site. For some reason, it listed out all the pages. Every page is appearing the same. The site is in dev here: http://lattice.arrowrootmedia.com/wordpress
I’m not sure if you’ve used Thesis before, but I’m using the Thesis Open-Hooks plugin to put in PHP code in certain specific places. The plugin seems to be working fine and handles other PHP code, but I’m having issues with this here. I’ll keep working on this and let you know if I find any answers.
I want to show list of child pages only on pages which have child, not on other pages..
I’ve implemented this in sidebar, but it shows all pages …
Is am I doing something wrong?
Hi Tammy,
I was wondering how you added the code snippets with the show source, print, and help icons. Is that a plugin?
Thanks,
Heather
Can you show me exactly the pages where it is happening?