How To List WordPress Child Pages Only On That Parent Page

How To List WordPress Child Pages Only On That Parent Page

September 3, 2009 2:56 pm 30 comments

How to create a dynamic list of page title links when you are on a page that has sub pages, ie: If using a gallery for a page, were each sub-page is a gallery of images

When you have multiple pages in your wordpress website, either using it as a blog or as a complete CMS, this quick tip will help show you how to:

Only show those child pages of the parent page,

Only when you are on that Parent page!

Below is the HTML framework for our sidebar navigation…

  • Gallery
    • page 1
    • page 2
    • page 3
    • page 4
    • page 5
<ul>
   <li>Gallery
     <ul>
        <li>page 1</li>
        <li>page 2</li>
        <li>page 3</li>
        <li>page 4</li>
        <li>page 5</li>
     </ul>
   </li>
</ul>

When on the “PARENT” page,

The code in the sidebar, navigation menu or page,
will be populated with a list of Child Sub pages for THAT current PARENT page only…

Copy the code below into your sidebar, and try it…

  <?php if ( is_page() ) {
      if($post->post_parent)
      $children = wp_list_pages('sort_column=menu_order&title_li=&child_of='.$post->post_parent.'&echo=0');
else
      $children = wp_list_pages('sort_column=menu_order&title_li=&child_of='.$post->ID.'&echo=0');
      if ($children) {
   ?>
      <div class="sidebar">
<h2>Sub-pages of Current Page</h2>
<ul>
      	<?php echo $children; ?>
      	</ul>
      </div>
   <?php
} // End If Post
       } // End if is page
   ?>

As long as your Page has at least one associated child page, the list will be shown, if there are no child pages then the menu will not be shown.. this is handy if you’re sidebar is quite packed with elements/ads, this will be generated only on that parent page…

you can check out the example on the Shugtech Gallery website.
Each Gallery Album is a child of Gallery, so each image gallery is a separate wp page were the list of other Albums available is on the right hand sidebar…

As always feedback is welcome..

The following two tabs change content below.

Marty

Web Developer
Senior Web Developer who combines passionate coding skills, strategic vision with strong hands on leadership and enormous personal drive. I create re-usable industry standard code that is used time and time again, producing outstanding results for every project I work on! I also like Classic Motorbikes, Quad bikes, Downhill Mountain biking & Learning electronics using the Arduino.

Latest posts by Marty (see all)

30 Comments

  • Lars Holmqvist

    I see it. However, I would be able to enter the appearance in the main menu and select options menu, to be able to drag and drop the pages of the menu.

  • Lars Holmqvist

    Hello,

    Good script, I Avander below skrip and have a small question.

    How do I do if I want the child pages to be sorted by the order that I put in the menu on appearance?

    post_parent)
    $children = wp_list_pages(‘sort_column=menu_order&title_li=&child_of=’.$post->post_parent.’&echo=0′);
    else
    $children = wp_list_pages(‘sort_column=menu_order&title_li=&child_of=’.$post->ID.’&echo=0′);
    if ($children) {

    • Hi Lars,
      you should be able to use the ‘sort_column=menu_order’
      please see http://codex.wordpress.org/Function_Reference/wp_list_pages

      • Lars Holmqvist

        Hi Marty,

        Have a look at that link, but I do not really understand how I applisera it to the script above. Someone who wants to cook it in the script above and post here?

        • Hi Lars, the code is already in there,,

          $children = wp_list_pages(‘sort_column=menu_order&title_li=&child_of=’.$post->post_parent.’&echo=0′);

          you set the order of pages, when creating the page. using a number for each!
          ie: homepage = 1, about us = 2, contact us = 3, this will be used when populating the wp_list_pages array.
          then you can use the sort=ASC, or DESC to list by Highest to lowest or vice versa..

Leave a reply

You must be logged in to post a comment.