How To List WordPress Child Pages Only On That Parent Page

by

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

Advertisement

Tags: , , , ,

24 Responses to “How To List WordPress Child Pages Only On That Parent Page”

  1. owen says:

    site only begining!!!! Thansk for the code, it great, no plugin needed!!! how do you get the name of the parent page to show as well? thanks owen

  2. Bob says:

    This does not work for me. It shows ALL pages on the site with sub pages indented as planned, but I need a menu that shows only CURRENT parent page and sub pages. Do you know if anything changed for 2.9.2?

    Thanks,
    Bob

  3. Chris says:

    I know this is an old post, but I was looking for something similar to this in WP3.0 and came acrose Sub Pages widget. Works Great!

  4. Emerson says:

    @bob
    I had the same problem. I hacked a bit of a rough solution by deleting a line of code and creating a slightly different template page so only the Parent and Sub pages are shown (especially in child pages of child pages). Just delete line 2,3,&4 in the code you add to your new template. Hope that helps.

    Great helpful code by the way 5*


    ID.'&echo=0');
    if ($children) {
    ?>

    Sub-pages of Current Page

  5. Emerson says:

    ^oops, I seem to have broken it (not the first time)

    Anyway, just delete line 2,3 and 4 and add the code where required :)

  6. webcornten says:

    “It shows ALL pages on the site with sub pages indented as planned, but I need a menu that shows only CURRENT parent page and sub pages. Do you know if anything changed for 2.9.”
    You can see more about that?

  7. azukah says:

    Hey Marty, how can this work for Categories? Can the code be made to include options for Pages and Categories?

    • Marty says:

      Hi azukah, im not sure what you mean by categories, do you want to list categories based on what page you are on? or listing subcategories of a category which belongs to a certain page/post?

  8. azukah says:

    That’s right marty, listing subcategories of a category which belongs to a certain page/post?

  9. azukah says:

    That’s right marty, listing subcategories of a category which belongs to a page/post being viewed.

    • Marty says:

      Hi Azukah if you want to show the sub categories on a certain page called ‘News Reel’ and you had your categories set up like..
      News (top level category)
      –Feature (sub cat)
      –Fiction (sub cat)
      –Fact (sub cat)

      All you do is: check to see if you are on that page/post, check to see if that post or page has the category of the top level category ie: news id=1,

      if ( is_page('news-reel') && in_category('news') ){
           echo "<ul>";
           wp_list_categories('orderby=id&child_of=1&title_li=');
           echo "</ul>";
      }
      

      All that dose is print out the categories who are a child of ID 1, which in our case is News.. and print out like:

    • Feature
    • Fiction
    • Fact
    • That something that could help?

  • azukah says:

    Oh my!!! Is there a way to have the code you listed in the article to check if its a page or a post, and then list children of that page or category?

    For instance, a page called Africa may have the following as children: Algeria, Cameroon, Nigeria, South Africa. And a post (Baseball) is a child of Sports, where Baseball, Gymnastics, Soccer are children of that category.

    Now, on the sidebar, when the post Baseball is being viewed, the sidebar lists Baseball, Gymnastics, Soccer. And when the page, Algeria is being viewed, the sidebar lists Algeria, Cameroon, Nigeria, South Africa.

    That’s what am trying to achieve.

    • Marty says:

      Hi Azukah.

      trying something along these lines..

      <?php
      		if( is_single() ) {
      
      			$this_category = get_the_category($cat);
      			$parent_category = get_the_category($this_category->category_parent);
      			$getParentCatId = $parent_category->cat_ID;
      
      			wp_list_categories('depth=2orderby=id&title_li=<h2>More Categories</h2>&child_of='.$getParentCatId);
      		}
      		if( is_page() ) {
      			$category = get_the_category();
      			$catname  = $category[0]->cat_name;
      			$category_id = get_cat_ID($catname);
      
      			if($post->post_parent)
            			$children = wp_list_pages('sort_column=menu_order&title_li=<h2>Sub Pages</h2>&child_of='.$post->post_parent.'&echo=0');
      				else
            			$children = wp_list_pages('sort_column=menu_order&title_li=<h2>Sub Pages</h2>&child_of='.$post->ID.'&echo=0');
            		if ($children) {
      				echo "<ul>";
      				echo $children;
      				echo "</ul>";
      			}
      		}
      		?>
      

      So if you are on a page, (Africa) it will display :

      Sub Pages
      o Algeria
      o Cameroon
      o Nigeria
      o South Africa

      If you are on a single post page, were the current category is Baseball


      More Categories
      -Sports
      o Baseball
      o Gymnastics
      o Soccer

      hopefully you can make use of this… good luck :)

  • azukah says:

    Great. Its works just fine. You’re the best, Marty.

    One more thing, how do I remove the header that says “More Categories” and “Sub-Pages”? Also, I noticed the sidebar displays all the categories regardless of their parent. How can we have just the children of that parent displayed instead of the whole family tree? Lol

  • Marty says:

    good stuff.. :)

    well to remove the More Categories and Sub Pages title..
    just remove the call to them in the

    wp_list_categories('depth=2orderby=id&title_li=<h2>More Categories</h2>&child_of='.$getParentCatId);
    

    so it reads just..

    wp_list_categories('depth=2orderby=id&title_li=&child_of='.$getParentCatId);
    

    As for the rest, do you have a link to your test site?

    ill edit the comment to remove it, if you dont want it published?

  • azukah says:

    Its an e-comm site xxx and Yes, please remove the link. I won’t be using paypal or any e-payment.

    – comment edited

    I already tried to remove the titles. Didn’t have much success.

    • Marty says:

      hi Azukah, appologies, i edited the comment and lost your link :|

      to take the titles off just remove the bit in the code were it says title_li=
      and leave that value blank, so just remove

      <h2>More....</h2>

      also if you want to email a copy of your sidebar.php file I can edit the changes :)
      marty@martin-gardner.co.uk

  • Great post Marty.

    I successfully integrated the most recent code from the comments and it works like a charm, slight issue though. When I click on a child, which are page posts essentially, it shows the list of child pages towards the bottom of the page.

    Is there any way for it to show only page itself.

    ie. Go to my footer, click Journal and that takes you to the parent page called Journal Essays, then you’ll see the children below as your code describes. Then click on any of those child pages and you’ll enter those pages with all their corresponding information but towards the end it shows all the child pages of the Parent page.

    My goal would be for the child pages not to have those entries in the bottom, so the reader essentially has to click Journal in the footer to enter the parent page.

    Looking forward to your response. thanks,

    regards,
    JL

  • demon spin says:

    thanks for posting this. looking for this all day :D

  • Marty says:

    hi Pete,

    i would really need to see your site, but normally, this code would be placed in your header.php file, just were you want it placed?

  • Pete says:

    Hi Martin, I tried in the header file initially but didn’t seem to work. I’m using quite a complicated theme which would be why it won’t work. I’ll email you the site details throgh the contact form if that’s ok?

  • Pan X says:

    I got the same problem as Bob and it was cause its in the sidebar…
    This solution works for me:
    post->post_parent) {

    $children = wp_list_pages(‘sort_column=menu_order&title_li=&child_of=’.$wp_query->post->post_parent.’&echo=1′);
    }
    else {
    $children = wp_list_pages(‘sort_column=menu_order&title_li=&child_of=’.$wp_query->post->ID.’&echo=1′);
    }
    /*
    $page_id = $wp_query->post->ID;
    $children = wp_list_pages(‘sort_column=menu_order&title_li=&child_of=’.$page_id.’&echo=0′);
    */
    if ($children) {
    ?>

  • Pan X says:

    ups corrected code:

    if ( is_page() ) {
    global $wp_query;

    if($wp_query->post->post_parent) {

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

    if ($children) {
    ?>

    <?php
    } // End If Post
    } // End if is page

  • You can also use the Hierarchical Pages widget which lets you list only children of the current page… and optionally all the top-level pages, plus a variety of other options. It also includes a Hierarchical Taxonomy widget that works for built-in Categories and user-defined taxonomies.

  • Leave a Reply

    Advertisement
    
    Tracker by Hobo-Web