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

Just lately one in all our customers requested us the best way to show youngster pages of a WordPress Web page? Usually when engaged on a website that has pages with youngster pages, chances are you’ll wish to present these youngster pages on the father or mother web page in a sidebar widget or one other location in your template. On this article, we’ll present you the best way to show a listing of kid pages for a father or mother web page in WordPress.

To see an instance of a listing of kid pages on father or mother web page, see the screenshot beneath that we have now from OptinMonster’s The way it Works web page. You too can see this in use on gyanhigyann’s Blueprint web page.

Earlier than we get begin, for many who will not be conversant in Baby Pages, please take a look at our information on the distinction between Posts and Pages in WordPress. One of many essential function of pages is that they are often hierarchical. Because of this a web page can grow to be a father or mother web page and has youngster pages (i.e sub-pages) below it. This lets you group totally different pages collectively below one father or mother web page. For instance, when you’ve got a Product Web page on a web site, then you’ll be able to add pages similar to Options, Pricing, and Assist as youngster pages. Every youngster web page can have its personal youngster pages as nicely.

To create a toddler web page, merely create or edit a web page in WordPress such as you would usually do. Beneath the Web page Attributes meta field, select a father or mother web page from the drop down menu.

Word: If you don’t see the Web page Attributes menu, then please click on on the Display Choices button on the highest proper hand nook of your display screen. It would show a menu the place it is advisable to be sure that Web page Attributes is checked.

Displaying Baby Pages on the Mum or dad Web page in WordPress

To listing youngster pages below a father or mother web page, it is advisable to add the next code in a site-specific plugin, or in your theme’s capabilities.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' );
    $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 web page has a father or mother or the web page itself is a father or mother. If it’s a father or mother web page, then it shows the kid page related to it. If it’s a youngster web page, then it shows all different youngster page of its father or mother web page. Lastly, if that is only a web page with no youngster or father or mother web page, then the code will merely do nothing. Within the final line of the code, we have now added a shortcode, so you’ll be able to simply show youngster page with out modifying your web page templates.

To show youngster page merely add the next shortcode in a web page or textual content widget within the sidebar:


In some circumstances, your theme might not be able to execute shortcodes in a textual content widget. If it isn’t working, then see this tutorial on the best way to use shortcodes in WordPress sidebar widgets.

You May Also Like : How to Add a Bitcoin Donate Button in WordPress using BitPay

Dynamically Show Baby Page With out Any Shortcode

Utilizing shortcode is handy, however the issue with utilizing shortcodes is that you’ll have to add shortcode in all page which have father or mother or youngster page. Chances are you’ll find yourself having shortcodes in a number of page, and typically chances are you’ll even overlook so as to add the shortcode.

A greater method could be to edit the web page template file in your theme, in order that it could actually robotically show youngster page. To do this it is advisable to edit the primary web page.php template or create a customized web page template in your theme.

In your web page template file, it is advisable to add this line of code the place you wish to show youngster pages.

<?php wpb_list_child_pages(); ?>

That’s all. Your theme will now robotically detect youngster page and show them.

In case you are utilizing father or mother page with a number of youngster page which have their very own youngster page, then the WordPress admin view can get complicated. For a greater technique to arrange father or mother and page attempt utilizing admin column view.

We hope this text helped you listing youngster pages in WordPress. Tell us when you’ve got any questions or suggestions by leaving a remark beneath.

1 thought on “How to Display a List of Child Pages For a Parent Page in WordPress”

  1. Pingback: How to Fix WordPress Keeps Logging Out Problem

Leave a Comment

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