WordPress: How to List Child Pages in Sidebar

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.

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:

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:

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:

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:

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?

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?

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.

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.

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.

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 know this a little off topic, but I ended up here in my “quest”… I am trying to get a PAGE that shows 20 or so posts from a category to use wp-page-navi, letting users navigate the content more easily. However, I have noticed that pages don’t paginate their child pages, OR seem to be able to paginate posts with a query.
BUT your portfolio page seems to be doing this quite well though.
Any advice?

Hi Tammy,Fantastic Tutorial!I’m having a little trouble though… Doh. The sidebar functionality is working perfectly. The problem I am having, is that the subpages are appearing in the top navigation.What am I missing?Thanks,Brom

Hi, Tammy!I need some help. :)Firstly, I’m so happy to find this post, because I have a problem. On the other hand, couldn’t slolve it.I would like to list the same menu on the page, and its child page. I need a solution for that, the whole menu is displaying on child pages not just piece of it.Could you help to me?Thanks. :)Barna

Hi Tammy, Thanks for supplying this code, it does what it needs to do. So no complaints there! I am modifying an excising html site to a wordpress system. It’s a site that uses various levels of pages. I have the main menu, all linking to 9 sections. Right below the header we use your code to link the child pages.I used CSS to modify the code to an inline list, to show the pages, as we use no sidebar on the page layouts.However, we want to hide the grandchild pages, unless you are on one. (so just a list of the child pages of the page you are on). If you are on a grandchild link, we would just like to show all the grandchild pages (as it is now). What would be the best way to do this? Thanks!

Oh, turned out it was very simple (thanks to your other articles).$children = wp_list_pages(‘depth=1&title_li=&child_of=’.$post->post_parent.’&echo=0′); else$children = wp_list_pages(‘depth=1&title_li=&child_of=’.$post->ID.’&echo=0′);Very nice!

I am using your code on http://www.towerelevators.com for the sidebar, but I am having trouble making the list spaced apart more. I was trying to add the code &before=&after= to get better spacing, but it is not working. Any suggestions? My code is:>

Hi Tammy, Great tutorial. I have a site in development that utilises this great code (in 2 seperate horizontal nav lists). I now however need to incorporate a third level navigation in the sidebar for ‘grandchildren’ pages. Any thoughts?

Hi Tammy,Thanks for this great tutorial! I’ll be sure to send a link to my students. This is really a fabulous example of how to continue to explore to get the right solution. I’m going to use this code on a website I’m working on now. Thanks!Angela

However, it isn’t quite working right for me. When i include the code from your post, it is just listing every page on my site, so it looks like:

Page 1
Page 2
*subpage a
*subpage b
Page 3

Is that what it is supposed to be? I was understanding it to be that if I am on Page 2 or its children, that it would list the child pages (subpage a and subpage b). I don’t want all of the other pages there as they are in my main navigation.

Sara, This code should do what you’re wanting. Can you link me to you page so that I can try to determine why it may not be?

George, To get something other than the normal page lists that the wp_list_pages function provides, you may want to look into just querying posts of the ‘post_type=page’, so that you can tell it specifically what to output in the loop.

It does not show up on the sidebar if child pages are saved as drafts or if child pages are hidden using the ‘Exclude pages’ plugin (which I have to do for the pages to not appear in the top horizontal menu).

I was looking all over for something like this. Thanks so much for posting it! I was looking for some google ads so I could click them as a thank you, but couldn’t find any. I guess my thanks will have to be enough. You ROCK!

Excellent article! The only tweak I wanted to make was to have the parent page as a link to make it easy to get back to that page as well. Here is my slightly modified solution for anyone who may need it:

Hi Tammy – First I want to say you’ve been a life safer – two of your tutorial – “how to list child pages in sidebar,” and “WordPress: Create a Page Template that Paginates Posts from a Certain Category” have both worked for me. I have a question for you, as I’ve been searching for a couple hours now and can’t figure out what I’m missing. I’ve created 2 page templates that paginate posts from a certain category, in this case, “Upcoming Events”(http://www.preschooladvantage.org/events-information/upcoming-events) and “News” (http://www.preschooladvantage.org/events-information/news). The sidebar is being called but it is empty- the list of child pages is not showing up. Do you know why or what I could do to get the subnav to show up on the left sidebar as it does on the other pages. I know that sidebar widgets are working on these pages – I’ve tested and if I add an arbitrary text widget, etc. it shows up. Is there something I can add to your php above so it also shows up on the Upcoming Events and News page? Thanks so much in advance!

Hi..
Thanks for sharing this information and resources its really help full for me with the help of this we can improve our design & development, and get a new look of my website. great job i am really inspire with this artical so thanks

Hi Tammy! thank you for the codes. i don’t have a problem with it, works great, but.. what i’d like to do is on a parent page, i just want its direct children to be listed, not the grandchildren.. and on the child page, i’d just want the grandchildren… in short, i just want the children one level down.. i hope u get me. thanks once again!

I’m trying to display the Parent page, and all sub pages beneath it. This is my code now, but it will only show the child/grandchild pages, but I want it to show the parent page. I’m NOT good at php, so I’ve included my code below: (I have 5 similar page templetes, so I’m hoping you can help and I’ll just copy your code and can change the page/post #’s)
<?php
/*
Template Name: Commercial
*/

but this code shows all pages, how to exclude pages from it!? Im a wordpress newbie and I dont understand at all how I manage it!
The advantage of this code is that we have our menu showing everywhere, and when we click the parent, child links are shown. I hope you can help me! sorry for my englih!
thanks max

Right now it is sorting the child links in alpha order. Is there any way to sort by page ID or publish date so that I can control the order beyond page title? For example, the first link I want is my “overview” page, but because it is in alpha order, “overview” is the 4th link in the list. Thank you!

Great code!! I’m working on trying to amend this and have it list the sub pages in a horizontal navigation bar that is beneath the Primary navigation, so far it works GREAT but it doesn’t go horizontal, only vertical. Is there a way to adjust this?

for what it’s worth, i did figure out how to display ONLY the child pages or sub pages of the current page using this code:
post_ancestor)
$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) { ?>

Hi Tammy and many thanks for sharing that post with all of us. It works great and was exactly what I was needing.

I have my main nav horizontaly and my sub-nav is going vertically thanks to your code. I have still a question because it lets appear the sub-nav list and the ancestor if and only if there is at least a child. But even if there is no child, I would like to let appear the ancestor in the vertical section. How can I do ?

Hi! I know this is an older article but I see that it’s still decently active. After looking through the comments and searching google for a while I still haven’t found a way to call through active states for this subnav. ie: if you’ve clicked on a subnav item adding a class of ‘active’ or ‘current’ to it . Any insight into this?