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