wordpress-page
Wordpress

How to display child page in a parent page in WordPress

You may have come across a situation where you need to display your child pages in your WordPress website pages but you don’t know a way or a plugin to do the work for you.

Meanwhile, you may want to show the child pages in your parent page or in a sidebar widget or in another location in your WordPress theme template. In this article, i am going to show you how you can display a list of child pages in your parent page in WordPress.

To see an example of a list of child pages on parent page, you can view the screenshot below to see how it looks like in your screen.

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.

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 flexi_display_child_pages() {

global $post;

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

$childpages = flexi_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;

}

function display_child_pages_deactivation(){
        flush_rewrite_rules();
    }
     
     register_deactivation_hook(_FILE_, ‘display-child-pages’);
     
    add_shortcode(‘flexi_child_pages’, ‘flexi_display_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:

[flexi_child_pages]

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, thereby creating a child theme.

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

 <?php flexi_display_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.

Let me know if you have any questions or feedback by leaving a comment below. As i hope this article solve the issue of listing child pages in your WordPress.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.