WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
  • Deals
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Tutorials» How to Display a List of Child Pages For a Parent Page in WordPress

How to Display a List of Child Pages For a Parent Page in WordPress

Last updated on January 20th, 2015 by Editorial Staff
74 Shares
Share
Tweet
Share
Special WordPress Hosting offer for WPBeginner Readers
How to Display a List of Child Pages For a Parent Page in WordPress

Recently one of our users asked us how to display child pages of a WordPress Page? Often when working on a site that has pages with child pages, you may want to show those child pages on the parent page in a sidebar widget or another location in your template. In this article, we will show you how to display a list of child pages for a parent page in WordPress.

To see an example of a list of child pages on parent page, see the screenshot below that we have from OptinMonster’s How it Works page. You can also see this in use on WPBeginner’s Blueprint page.

A parent page with a list of child pages

Before we get start, for those who are not familiar with Child Pages, please check out our guide on the difference between Posts and Pages in WordPress. One of the important feature of pages is that they can be hierarchical. This means that a page can become a parent page and has child pages (i.e sub-pages) under it. This allows you to group different pages together under one parent page. For example, if you have a Product Page on a website, then you can add pages such as Features, Pricing, and Support as child pages. Each child page can have its own child pages as well.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

To create a child page, simply create or edit a page in WordPress like you would normally do. Under the Page Attributes meta box, choose a parent page from the drop down menu.

Creating a child page by assigning it a Parent page in WordPress

Note: If you do not see the Page Attributes menu, then please click on the Screen Options button on the top right hand corner of your screen. It will display a menu where you need to make sure that Page Attributes is checked.

Displaying Child Pages on the Parent Page in WordPress

To list child pages under a parent page, you need to add the following code in a site-specific plugin, or in your theme’s functions.php file:

function wpb_list_child_pages() { 

global $post; 

if ( is_page() && $post->post_parent )

	$childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
else
	$childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );

if ( $childpages ) {

	$string = '<ul>' . $childpages . '</ul>';
}

return $string;

}

add_shortcode('wpb_childpages', 'wpb_list_child_pages');

The code above first checks to see if a page has a parent or the page itself is a parent. If it is a parent page, then it displays the child pages associated with it. If it is a child page, then it displays all other child pages of its parent page. Lastly, if this is just a page with no child or parent page, then the code will simply do nothing. In the last line of the code, we have added a shortcode, so you can easily display child pages without modifying your page templates.

To display child pages simply add the following shortcode in a page or text widget in the sidebar:

[wpb_childpages]

In some cases, your theme may not be ready to execute shortcodes in a text widget. If it is not working, then see this tutorial on how to use shortcodes in WordPress sidebar widgets.

Dynamically Display Child Pages Without Any Shortcode

Using shortcode is convenient, but the problem with using shortcodes is that you will have to add shortcode in all pages that have parent or child pages. You may end up having shortcodes in lots of pages, and sometimes you may even forget to add the shortcode.

A better approach would be to edit the page template file in your theme, so that it can automatically display child pages. To do that you need to edit the main page.php template or create a custom page template in your theme.

In your page template file, you need to add this line of code where you want to display child pages.

<?php wpb_list_child_pages(); ?>

That’s all. Your theme will now automatically detect child pages and display them.

If you are using parent pages with lots of child pages that have their own child pages, then the WordPress admin view can get confusing. For a better way to organize parent and pages try using admin column view.

We hope this article helped you list child pages in WordPress. Let us know if you have any questions or feedback by leaving a comment below.

Source: Thomas Griffin

74 Shares
Share
Tweet
Share
Popular on WPBeginner Right Now!
  • Step by Step Guide: How to Start a Podcast with WordPress

    How to Start Your Own Podcast (Step by Step)

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • Why Build Your Email List Today

    Revealed: Why Building Your Email List is so Important Today!

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

The Ultimate WordPress Toolkit

59 Comments

Leave a Reply
  1. Boris Budeck says:
    Jan 5, 2018 at 2:43 pm

    I am using Generatepress Theme (created a child theme from it for customizing) and I can’t get this to work. The shortcode is displayed in the output page, it seems it is not even ercognized as being a shortcode. I use Elementor widgets and neither text nor shortcode widgets work.

    Any idea of how to make it work when using elementor widgets?

    Reply
    • WPBeginner Support says:
      Jan 5, 2018 at 9:58 pm

      Hi Boris,

      Please try adding this code to your theme’s functions.php file or a site-specific plugin.

      add_filter('widget_text', 'do_shortcode');
      
      Reply
  2. Frederic says:
    Dec 30, 2017 at 1:05 pm

    a great post, it’s exactly what I’m looking for since many hours ! and it works like a charm, just adding the code in the function.php of the theme then adding the short code in the page where I want the sub pages to appear, and voilà!!!
    wonderful, thanks a lot for your generosity !!

    Reply
    • WPBeginner Support says:
      Dec 30, 2017 at 5:18 pm

      Hi Frederic,

      Glad you found it useful :) You may also want to subscribe to our YouTube Channel for more WordPress video tutorials.

      Reply
  3. Mariano says:
    Nov 17, 2017 at 3:15 pm

    Hi!

    Thanks for the code. How can I display the featured image of each child page?

    Reply
  4. Ron says:
    Aug 31, 2017 at 12:02 pm

    Like with so many of the snippets we find, one has to go through all the comments in order to get it to work. What’s wrong with testing what you write?

    Reply
  5. Alicia says:
    Aug 29, 2017 at 8:32 pm

    Can you do a drop down menu for parent/child pages on wordpress.com, or does it have to be the .org version?

    Reply
  6. Razvan says:
    May 5, 2017 at 7:22 am

    What if I want to display child posts, not child pages?

    Reply
  7. Rudy says:
    Apr 11, 2017 at 12:18 am

    Using this code ends up displaying the parent page along with the child pages, which is redundant. As I understand it, what we really need is to display only the child pages, not the parent page. Any suggested modification that can do this?

    Reply
  8. Michael Feske says:
    Mar 14, 2017 at 7:51 am

    Great, but it works not :-(

    add_shortcode is correct or must it be add_filter http://www.wpbeginner.com/wp-tutorials/how-to-use-shortcodes-in-your-wordpress-sidebar-widgets/ ?

    with add_shortcode is error Fatal error: Uncaught Error: Call to undefined function add_shortcode()
    with add_filter is no error but it works nort

    Reply
  9. Milos says:
    Jan 9, 2017 at 7:54 am

    On plugins update, for some strange reason I always get an error:

    Fatal error: Cannot redeclare wpb_list_child_pages() (previously declared in …/wp-content/themes/pagelines/functions.php:25) in …/wp-content/themes/pagelines/functions.php on line 34

    Reply
  10. Jeffrey Fry says:
    Oct 27, 2016 at 6:55 pm

    How can you also display the date of the child page?

    Reply
  11. ethann says:
    Sep 8, 2016 at 11:28 am

    Hello great article,
    Can you please help me creating a dropdown of child pages in parent page.I need this functionality for one of my wordpress project and i am totally newbie to wordpress.

    Reply
  12. Alex says:
    Aug 18, 2016 at 3:17 pm

    Am I the only one that cannot get it to work?

    I have the following structure

    About
    — Page 1
    — Page 2
    — Page 3

    When on the “About” or a child page (1, 2 or 3) I would like to have a list with my parent page (About) and all children (1, 2, 3) – Anyone got that working?

    Thanks! :)

    Reply
    • Kendra says:
      Sep 16, 2016 at 4:40 pm

      OMG sorry this is annoying Please ignore my other posts. Didn’t realize you couldn’t paste code into the comments.

      I was NOT able to get it to work with wpb_list_child_pages();

      I WAS able to get it to work with echo do_shortcode( ‘[wpb_childpages]’)

      And to get the title of the parent page, i inserted this above the child page list:
      $current = $post->ID;

      $parent = $post->post_parent;

      $grandparent_get = get_post($parent);

      $grandparent = $grandparent_get->post_parent;

      PHP if ($root_parent = get_the_title($grandparent) !== $root_parent = get_the_title($current)) {echo get_the_title($grandparent); }else {echo get_the_title($parent);

      Reply
  13. Jean Bishop says:
    May 24, 2016 at 11:22 am

    I am using this code and it works great. Is it possible to also display categories in menus along with pages?

    Reply
  14. Michelle says:
    Mar 2, 2016 at 7:36 am

    Hi,

    I want to do the following

    Parent page must be either for sale and or for rent
    Then I want the child for example a province (gauteng) to link to the for sale and the for rent parent.
    How do I do that?

    Michelle

    Reply
  15. Zakhar says:
    Feb 14, 2016 at 10:09 am

    How can i create shortcode with param, for example, [wpb_childpages id=”1″], where id=”1″ is an id of parent page?

    Reply
  16. Strand says:
    Oct 9, 2015 at 9:11 am

    Hi,

    Is it possible to limit the links to a specific number such as maximum 12 child pages?

    Thanks

    Reply
  17. Aander says:
    Oct 3, 2015 at 3:39 pm

    Thank you,

    Could you explain, please, how can I organize child pages in drop down list that would be accessible through the parent page? (I don’t want the visitors could see all child pages in a form of a blogroll.)

    I.e., on the parent page I want to create drop down list (listbox) to which child pages would be added in predefined order (say in alphabetical order). After reading Introduction a visitor can proceed by choosing any page from the list at her wish (child pages has no logical connection so in any case she will search the exact page).

    Is ‘my dream’ realizable?

    Thank you again.

    Reply
  18. Quantum-mecha says:
    Sep 28, 2015 at 1:13 pm

    How do I add pagination for Child Page?

    Thanks!

    Reply
  19. Astrid says:
    Sep 23, 2015 at 2:06 pm

    Hi WPBeginner Staff,

    I used the code you guys provided with the “short code option” and it worked (links to child pages). However, I wanted to use the permanent option, and that didn’t work.

    When I added this line of code [ ] the parent page returns a 500 error and no child pages are displayed at atll.

    What am I doing wrong?

    On a side note if I wanted to display and excerpt with its respective image how would I go about it? Thanks!

    Reply
    • Astrid says:
      Dec 7, 2015 at 5:31 pm

      I was able to figure this out.

      I added the code snippet then added this shortcode [wpb_childpages] to the parent page where I wanted the child pages displayed. Awesome!

      Now in order to display excerpts and an image would I use the same queries– just like posts under a category.

      Thanks in advance :)

      Reply
      • Jade says:
        May 24, 2016 at 9:53 am

        Hey I was wondering what you meant by ‘query’? How exactly did you get the excerpts and images to display in the parent page?

        Thanks!

        Reply
  20. Mehar says:
    Sep 7, 2015 at 10:09 pm

    Really useful. Thank you.

    Reply
  21. Pradeep says:
    Jul 13, 2015 at 9:53 am

    Could someone confirm that the example page used in this tutorial http://optinmonster.com/how-it-works/ uses this feature or not? To me it looks like it they are using tabs, instead of child pages.

    If I’m right, could someone direct me to a resource to get that feature, as I’m desperately looking for a fluid solution like the one they have in that page?

    Many thanks,

    Pradeep

    Reply
  22. Andrew Roberts says:
    Jul 1, 2015 at 1:51 am

    For the non-shortcode option, you might want to let users know they need to either change
    return $string; to
    echo $string; or
    in their page template echo out the function
    echo page_list_child_pages();

    Thanks to Erik for pointing this out above

    Reply
    • Meredith Adams says:
      Feb 18, 2016 at 12:16 am

      Thank you!

      Reply
    • Gaby says:
      Jul 4, 2016 at 1:15 am

      Thank you! I was wondering why the code wouldn’t work…

      Reply
  23. Howard says:
    May 25, 2015 at 5:47 am

    Hi, I can get this to work when I am visiting my domain with a subdirectory (e.g – example.com/home) but when viewing the site without this (example.com) the list of sub pages is not listed. Can anyone point me as to where I am going wrong?

    Thanks in advance – very new to WordPress.

    Reply
  24. Emily Jennewein says:
    May 23, 2015 at 8:23 pm

    How do you get this function to display the parent page itself at the top of the list along with the list of child and grandchild pages? On the child pages it does not list the parent page.

    Reply
  25. Michael says:
    Apr 24, 2015 at 4:24 am

    how can i customized this to just display the child page of a specific page?

    Reply
  26. Yester says:
    Apr 13, 2015 at 5:29 am

    How do u add a active class on the current ?

    Reply
  27. Jenny says:
    Mar 25, 2015 at 11:06 pm

    Is there now a plugin that can do same ?

    and also can we decide where the box with submenus pages will go in any are of the page not just top of page? Using a plugin

    Reply
  28. WPBeginner Staff says:
    Mar 12, 2015 at 8:58 pm

    Yes it can be used for custom post types. Like this:


    function wpb_list_child_pages() {

    global $post;

    if ( 'movie' == get_post_type() && $post->post_parent )

    $childpages = wp_list_pages( 'post_type=movie&sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
    else
    $childpages = wp_list_pages( 'post_type=movie&sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );

    if ( $childpages ) {

    $string = '' . $childpages . '';
    }

    return $string;

    }

    add_shortcode('wpb_childpages', 'wpb_list_child_pages');

    Reply
  29. Daniela says:
    Mar 9, 2015 at 7:22 pm

    This is great! Is there a way to do the same for Custom Post Types that have child posts?

    Reply
    • Caroline says:
      Sep 3, 2015 at 9:40 am

      Also wondering!

      If anyone knows, please help!

      Reply
  30. dpc says:
    Mar 9, 2015 at 7:13 pm

    Is there a way to modify this in order to print custom post type child posts on a custom post type post page? Thanks, it is very handy!

    Reply
  31. Sokeara says:
    Mar 5, 2015 at 10:50 pm

    It’s very greate for me! Anyways I would like to know how can I display title and thumbnail of child page to parent page.

    Reply
    • Ashley Bell says:
      Aug 14, 2015 at 10:01 am

      Hi, I have the same query. I really like how the list is styled on the Beginners Blueprint page but I have no idea how to start. Can someone recommend an article to read or give some advice, thanks.

      Reply
  32. Razvan Zamfir says:
    Dec 22, 2014 at 5:55 am

    Hello!
    Nice snippet, but how do I list only grandchild pages?
    Thank you!

    Reply
  33. amitabha197 says:
    Dec 14, 2014 at 3:28 am

    There is an error in the pages which are not having child pages so I have slightly modified
    if( count($childpages) != 0 ) {
    $string = ” . $childpages . ”;
    }

    instead of
    if( $childpages ){
    $string = ” . $childpages . ”;
    }

    Reply
  34. WPBeginner Staff says:
    Jul 24, 2014 at 1:05 am

    In order to execute a shortcode in WordPress templates you need to add it like this:

    Reply
    • Matt Rock says:
      Aug 21, 2014 at 11:26 am

      I couldn’t get the template code “wpb_list_child_pages();” to work, but echo shortcode did the trick. Cheers!

      Reply
      • Erik says:
        Oct 14, 2014 at 3:14 pm

        Just change the “return $string” to “echo $string” (this will print out the pages).

        Reply
        • fariha says:
          Jun 19, 2015 at 9:51 am

          thanks, it worked

  35. Coen Siebenheller says:
    Jul 21, 2014 at 2:52 pm

    I’ve added the code to the functions.php and when i add the [wpb_childpages] shortcode in side my text it works. But when try to add to one of my templates it doesn’t show a thing. Anybody knows what i’m doing wrong?

    Reply
  36. Elena Rapisardi says:
    Jul 13, 2014 at 8:45 am

    Great explanation!!
    Is there a way to display always the parent pages?

    Reply
  37. Quin says:
    Apr 25, 2014 at 6:20 am

    This is brilliant, thanks.

    Is there a way to adapt it so the Parent displays the Grandchild, and not the Child?

    Reply
  38. Dejan says:
    Apr 24, 2014 at 11:53 am

    Great function , thanks !

    Reply
  39. Richelly Italo says:
    Apr 24, 2014 at 4:59 am

    The great idea, thanks dude.

    Reply
  40. Steph says:
    Apr 2, 2014 at 11:04 am

    Can you tell us how to stop the list at the first level? I’d like to show all the subpages of that parent, but not the subpages’ children. Thanks.

    Reply
    • Stefan says:
      May 21, 2014 at 9:41 am

      Just add &depth=1

      sort_column=menu_order&title_li=&child_of=’ . $post->post_parent . ‘&echo=0&depth=1

      Reply
  41. Martin Capodici says:
    Mar 3, 2014 at 4:14 am

    Great. I love this idea of a site plugin and seeing the code you are adding (so you know it is clean and doesn’t do bad stuff) rather than relying on some plugin that could be installing anything.

    For something as simple as listing child pages I agree it should be part of a larger plugin rather than just one plugin otherwise you end up with so many plugins it is hard to keep track.

    Reply
  42. Rishi Gangoly says:
    Feb 10, 2014 at 12:14 am

    This is great. I had a page on my website called “Services” and was manually linking the sub-pages, but not any more. Awesome. Thanks for this tip. Worked like a charm and did exactly what I was doing manually. :)

    Reply
  43. Bojan says:
    Feb 9, 2014 at 1:41 pm

    This is great! Putting it in a plugin is great feature and great opportunity to extend functionality by adding:
    – child page featured image (as thumbnail)
    – child Title
    – rest of the meta (author, date, comment count)
    – styling in columns maybe
    and so on

    This way, we would have almost complete Portfolio plugin – portfolios made of Pages rather than just made of custom post types.

    Thank you..

    Reply
  44. Ivica says:
    Feb 8, 2014 at 3:25 pm

    The Best plugin for displaying child pages on a sidebar for those who want even faster and “cleaner” child-pages-navigation:
    http://wordpress.org/plugins/child-page-navigation/

    Reply
  45. yousef mayeli says:
    Feb 7, 2014 at 12:14 pm

    hi there
    thanks it was very useful . but if you could show it by video it was very more useable.as tyler moor would do
    thanks
    yousef

    Reply
  46. Nancy says:
    Feb 7, 2014 at 11:28 am

    This is great! I have a lot of manually added links to child pages, and this is going to make maintaining our site MUCH easier. I’ve just been testing in my development environment, and I’d like to tweak the function a little bit, so that on a child page, when the shortcode is included, all of the children of the same parent are listed EXCEPT for the currently displayed page. I’m really still learning PHP, so while I’ll be trying to figure this one out on my own, I’d welcome any assistance in making that change to the code.

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 600,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
OptinMonster
OptinMonster
Convert website visitors into email subscribers. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 25 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2018 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2018)
    • Which is the Best WordPress Slider? Performance + Quality Compared
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • 5 Best VPN Services for WordPress Users (Compared)
    • HostGator Review - An Honest Look at Speed & Uptime (2018)
    • SiteGround Reviews from 1032 Users & Our Experts (2018)
    • Bluehost Review from Real Users + Performance Stats (2018)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Start a Podcast with WordPress (Step by Step)
    • How to Choose the Best Domain Name (8 Tips and Tools)
    • How to Setup a Professional Email Address with Google Apps and Gmail
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2018 – Step by Step Guide
Deals & Coupons (view all)
MaxCDN
MaxCDN Coupon
Get 25% off MaxCDN, the same service that we use to make our site super fast.
WPForms Logo
WPForms Coupon
Get 10% off WPForms, the most beginner friendly WordPress contact form plugin available in the market.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • List25
  • Awesome Motive
  •  

Copyright © 2009 - 2018 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

WordPress hosting by HostGator | WordPress CDN by MaxCDN | WordPress Security by Sucuri.