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.

103 thoughts on "WordPress: How to List Child Pages in Sidebar"

  1. Good site I “Stumbledupon” it today and gave it a stumble for you.. looking forward to seeing what else you have..later

  2. nate says:

    Nice post, I was having the exact same issues. Thanks for posting.

    >nate

  3. Anonymous says:

    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?

  4. NΓΊria says:

    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?

  5. tammyhart says:

    Nuria,

    Handling a third level is a bit complicated, but I do plan on writing about that soon and sharing what I have learned.

  6. judi knight says:

    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.

  7. David says:

    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

  8. tammyhart says:

    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.

  9. David says:

    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.

  10. tammyhart says:

    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.

  11. David says:

    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.

  12. SasQ says:

    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]

  13. Jaki Levy says:

    This is the best tutorial on setting up child pages / parent pages on WordPress I’ve seen so far. Thank You!!!

  14. tammyhart says:

    @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! πŸ™‚

  15. David says:

    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.

  16. tammyhart says:

    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

  17. David says:

    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.

  18. Jaki Levy says:

    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.

  19. Krunal says:

    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?

    1. Tammy Hart says:

      Can you show me exactly the pages where it is happening?

  20. Heather says:

    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

    1. Tammy Hart says:

      That is a plugin called “SyntaxHighlighter Plus” which you can find in the plugin repository, or here: http://thislab.com/2007/12/16/release-wordpress-plugin-syntaxhighlighter-plus/

  21. mrSeanG says:

    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?

  22. tammyhart says:

    That is a great question, I think I’ll write up a post on that right now! πŸ™‚

  23. benedito says:

    i liked so much.

    how can i format the menu to show a table with 3 columns and a image inside each cell?

  24. tammyhart says:

    I’m not sure I follow you

  25. Fritsie says:

    Hi,

    I was wondering if you already have some kind of solution for displaying grandchildren pages, even on a page that is a grandchild itself. I can’t seem to figure it out myself.

    Thanks.

  26. 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

  27. Aah, it’s ok. I had to change the wp_list_pages on the page itself to:

  28. Tammy Hart says:

    glad you were able to get it, let me know if you need any more help.

  29. Barna says:

    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

  30. Tammy Hart says:

    Barna, I’m not sure what the issue you’re having is. from what I can understand, the code above should be exactly what you need. Can you explain further?

  31. 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!

  32. 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! πŸ™‚

  33. Chad says:

    Cheers mate, worked puurfectly

  34. Andrew says:

    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:>

    post_parent)
    $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′);
    if ($children) { ?>

    post_parent);
    echo $parent_title;
    ?>

  35. Tayler says:

    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?

  36. Angela says:

    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

  37. Eelco says:

    Hey Tammy,Thanks for the tutorial! I love it..One question, do you know how I can add an anchor to each childpage?Eelco

  38. JLFA says:

    Great solution! Looking forward to hear from you about listing “grandchildren” pages. Keep up the good work.

  39. Mamoun Elkheir says:

    Thanks a lot, I have been looking for such a code for a while.

  40. Paris Vega says:

    Thanks Tammy! Excellent post. Much more thorough than other posts on this topic.

  41. Miranda says:

    Thanks so much! This is the best tutorial about this topic I’ve read yet and it works perfectly! (:

  42. Jeff says:

    Amazingly useful, thank you for sharing.

  43. Sara says:

    Hi, Tammy! This is a great tutorial.

    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.

    Thanks!

  44. george says:

    This is great, just what I needed!

    Is there a way to list page slugs instead of page titles?

    Thanks in advance!

  45. Daniel says:

    Hello,

    great tutorial. Just my question is. I have a menu that is on the left, en I want to display my childpages in a top menu.

    Any thoughts how I could fix this? Been searching for a long time now.

  46. Tammy Hart says:

    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.

    Daniel, Are you talking about doing a horizontal menu? Try this tutorials here on my blog: http://www.tammyhartdesigns.com/tutorials/wordpress-how-to-use-pages-in-a-horizontal-navigation-bar/

  47. daniel says:

    What I mean is: I have a vertical menu, but some of the pages have childpages. I want to display those childpages in a horizontal menu.

    Just the other way around… Hope you know what I mean. English is not my mother language, so my writing in it may be a bit confusing for you.

  48. Tammy Hart says:

    Okay, so in a flyout I guess. You should check out the suckerfish tutorial, I beleive it explains how to do flyouts as well. http://htmldog.com/articles/suckerfish/dropdowns/

  49. daniel says:

    not exactly…

    made an example, hope you can understand what I mean.

    http://www.birgitdekker.nl/example.png

  50. Tammy Hart says:

    He, so just use the tutorial above and then integrate that with the example css from the other tutorial I mentioned.

  51. Morgyface says:

    Just wanted to say a big thank you for this! It has helped me immensely!

  52. Radek says:

    Thanks a million, that’s exactly what I needed, you’ve saved my time.

  53. Matt says:

    Thank-you!! πŸ™‚ Fantastic — exactly what I needed and works like a dream.

  54. Kasper says:

    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).

    Otherwise it would have been perfect

    Any way I can fix this?

  55. Tammy Hart says:

    this fix uses wp_list_pages which only lists pages with permission to be viewed.

  56. pkv-guy says:

    Hi Tammy,
    I think there’s a typo in your 4th code example. In line 5 it says:
    $children = wp_list_pages(‘title_li=&child_of=’.$post->ID.’;echo=0′);

    But it should rather be:
    $children = wp_list_pages(‘title_li=&child_of=’.$post->ID.’&echo=0′);

    The difference is the & before ‘echo’.
    Great tutorial, though! Thanks!

  57. Sarah says:

    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!

  58. Jimmy T says:

    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:

    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) { ?>

    “>post_parent); echo $parent_title; ?>

  59. ashley@decorology says:

    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!

    1. Tammy Hart says:

      Hi Ashley, I’m so glad you’ve been able to find my blog useful! πŸ™‚

      Try adding wp_reset_postdata(); after your endwhile; in the loops used for the category pages you made.

  60. Robb says:

    Thanks Tammy – nice code. I modified to work in a css and javascript drop-down and it was easy-peasy. Thanks for the time-saver!

    1. Tammy Hart says:

      No problem, Robb!

  61. Chetaru says:

    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

  62. rob says:

    thank you for this! you’ve made life easier

  63. monk says:

    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!

  64. Kenneth Watt says:

    Hi
    Great article!
    How can I make it so that the parent in the is linked – so that if you are on a child page you can click on the title?
    Cheers
    Kenneth

  65. Biyified says:

    Super Awesome ..thanks a bunch

  66. Ashley Zaverucha says:

    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
    */

    // Remove Page Title
    remove_action('genesis_post_title', 'genesis_do_post_title');

    // Moves the Breadcrumbs in the proper place
    remove_action('genesis_before_loop', 'genesis_do_breadcrumbs');
    add_action('genesis_before_content', 'genesis_do_breadcrumbs');

    // Add a dynamic child page menu on the left side of the page
    add_action('genesis_before_content', 'landmark_commercial_menu');
    function landmark_commercial_menu() {
    echo "”;
    echo “”;
    wp_list_pages(‘title_li=&sort_column=menu_order&child_of=16778’);
    echo “”;
    echo “”;
    }

    // Use the Genesis page.php template
    // require_once(PARENT_DIR . ‘/page.php’);
    ?>

  67. Ally says:

    Thanks Tammy, exactly what I needed!

  68. Tre says:

    thanks for the code, but how can I apply this to categories? I though having wp_list_categories instead of wp_list_pages would fix it but I was wrong.

    1. Tammy Hart says:

      wp_list_categories uses different attributes. You will need to change the child_of to the category id, rather than the post ID.

  69. lenny says:

    hi

    i’m a complete newbie.
    sorry for dumb question: i’d like to show links to sub pages. where do i paste this code?

    i tried on the body of the page (in html) or as a widget (text) and i still see the code itself.

    sorry …

    thanks

    1. Tammy Hart says:

      This code is meant to be used in your template. I suggest sidebar.php.

      There are no dumb questions, only unasked ones. πŸ™‚

  70. lenny says:

    now it makes sense.
    (-:

    thank you very much

  71. max says:

    I wanted to show my secondary menu in my wordpress site, momentanly I have it on my localhost, I found a core to get my side menu working.

    ID;
    while($parent)
    {
    $theParent = $parent;
    $parentPost = get_post($parent);
    $parent = $parentPost->post_parent;
    }
    $args=array(‘child_of’ => $theParent);
    $pages = get_pages($args);
    foreach($pages as $key=> $value)
    {
    $allpages .=$value->ID.”,”;
    }

    $pages = get_pages(‘parent=0’);
    foreach($pages as $key=>$value)
    {
    $allpages.=$value->ID.”,”;
    }
    $allpages = substr_replace($allpages ,””,-1);

    if ($allpages) { ?>

    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

  72. max says:

    how can i add php!? the code is displayed in a wrong way! I post a link where you can see the code!

    http://pastebin.com/YrJwHAzW
    thanks

    1. Tammy Hart says:

      this code belongs in your sidebar.php template

    2. Juanito says:

      I am hianvg trouble when putting more than one photo up. When I do it, I can’t seem to get the words to go with it up in the status bar. Does anyone know how I do this?

  73. Jason says:

    Hi Tammy,

    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!

  74. Chris Schnedl says:

    Thx, great job πŸ™‚

  75. Dan says:

    Tammy,

    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?

  76. Lars Cabrera says:

    @Tammy Hart and @Kris Van de Sande:

    Thank you thank you thank you thank you thank you thank you thank you thank you. Just what I needed. Really, thank you both.

    However, on a 3rd lvl (grandchild-pages), I seem to loose the navigation (the 2nd lvl / child-pages navigation), and it creates a 3rd lvl nav instead.

    I can see why it would do this, but I don’t know how to avoid it. To be clear, I’d like it to display the 2nd lvl nav whilst on a 3rd lvl page. The current code I mixed together is this:

    post_parent)
    $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′);
    if ($children) { ?>

    Any ideas? Again, thank you!

    1. Tammy Hart says:

      Third level is a bit trickier. Essentially, you need to get the post_parent of the post_parent.

  77. Lars Cabrera says:

    K,thanks. I think you might have got me on the right track. I’ll post what I find out in case others wonder as well.

    -L

  78. andrew says:

    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) { ?>

  79. andrew says:

    and one more try… πŸ˜›

    <?php
    if($post->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) { ?>
    <ul>
    <?php echo $children; ?>
    </ul>
    <?php } ?>

  80. Gui says:

    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 ?

    Thanks again and greetings from Sweden.

    1. Tammy Hart says:

      Gui,
      To do this, move lines 3-7 to line 16, and line 22 below line 19. This will put the ancestor title outside of the conditional.

  81. Gui says:

    Hey Tammy, you’re a genius πŸ˜€
    Many thanks for your quick answer, it works great!

  82. Sherri says:

    thank u boss πŸ˜€ .. it was whaat that exactly i want …

  83. dsdeur says:

    Thanks! Just what I needed. Great work!

  84. joe.moJito says:

    Greate one πŸ˜‰

  85. Lina says:

    To list level 3 aswell:

    post_parent){
    $children = wp_list_pages(“title_li=&child_of=”.$post->ID.”&echo=0″);}
    else{if($post->ancestors){
    $ancestors = end($post->ancestors);
    $children = wp_list_pages(“title_li=&child_of=”.$ancestors.”&echo=0″);}}
    if ($children) { ?>

  86. Lina says:

    post_parent){
    $children = wp_list_pages(“title_li=&child_of=”.$post->ID.”&echo=0″);}
    else{if($post->ancestors){
    $ancestors = end($post->ancestors);
    $children = wp_list_pages(“title_li=&child_of=”.$ancestors.”&echo=0″);}}
    if ($children) { ?>

  87. Dylan says:

    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?

Leave a Reply

Your email address will not be published. Required fields are marked *