What's WP
Our everything is about WordPress - best choice of WordPress users!
How to Display an Index of Child Pages on a Parent Page in WordPress

How to Display an Index of Child Pages on a Parent Page in WordPress

Child page, also called subpages, is a page subject to a parent page, which contributes to adding more sections to a page and sets all content in perfect order. Many webmasters tend to create multiple child pages but have no idea how to showcase all child pages on a parent page properly.

To find a way out of this puzzle, we brief you on the following guide and that introduces three methods to beat the target. However, since some readers have not yet learned how to create a child page, we would like to settle this matter at first.

How to Create a Child Page?

The whole process of creating a child page can be completed via your WordPress dashboard. Go to Pages > Add New and create a new page that is used as a child page. Name this page properly and then move to Page Attributes mode on the right page. Select a parent page from the drop-down list and this page is the one that the newly created child page will be subject to. Click “Publish” button if you have all settings done.

For example, we name our first child page as “Web Hosting Review” and include it in the Review page. In this way, the “Web Hosting Review” page has become a child page of the “Review” page.

create child pages

In the same way, you can create as many child pages on a parent page as you need. And then, go back to Pages > All Pages to check if all child pages have been created as planned. The following screenshot shows you a list of child pages that have been created just now.

child pages example

Display Child Pages with WordPress Plugins

There are two WordPress plugins available for you to display a list of child pages on the current page properly including Child Pages Shortcode and Child Page Navigation. Both options are out of the box and come with rich features.

Child Page Shortcode

The Child Pages Shortcode plugin is recognized as the first choice by most webmasters to display a list of child pages on a parent page. Since you have installed and activated this plugin on your website, you are able to display all child pages on a parent page by using the given shortcode [child_pages].

Besides, this plugin also enables a series of customizable features to add more functions to the default HTML template. In this way, you are allowed to modify the width of the child pages block or make some other change on the post thumbnail size. And now, let’s get it started!

child pages shortcode plugin

First of all, log into your WordPress dashboard and search for Child Pages Shortcode plugin via Plugins > Add New. Install this plugin now and activate it anyway. If this plugin has worked for your website successfully, then you can add the above-mentioned shortcode to a parent page.

Here, we also take Review page as an example. Go to Pages > All Pages and “Edit” the Review page. And then, add the shortcode [child_pages] to the blank and then “Update” this page.

add shortcode to parent page

“View” this page and check if all child pages are displayed on the parent page successfully. In general, an index of child pages should be shown as below.

child pages sample

Besides, you can modify the width of each child page displayed on the current page by using [child_pages width=”33%”]. Note that, you are required to adjust the width of the child page thumbnail so as to make it go with the whole web page perfectly. For example, we set the width as 25% and then the child pages should be displayed as the following screenshot.

child pages display

Here, we suggest you to add featured images to all child pages and make the child page list more attractive. We would like to show you an example as below.

child pages list sample

Child Page Navigation

Child Page Navigation makes way for a list of child pages on the parent page. Unlike the Child Pages Shortcode plugin showing all child pages on the forefront of a page, Child Page Navigation enabless a widget including all child pages on your website navigation bar. What’s more, there is no need to use any code.

Go to Plugins > Add New and install Child Page Navigation on your site step by step. And then, go to Appearance > Widgets and pitch on the option “Child Page Navigation”. Drag and drop this widget to your sidebar and set it at anywhere according to personal needs. You can rename it by entering a new name in the Title field. Finally, “Save” it and go back to website frontend.

child page navigation

When your visitors access to a page that includes child pages, they can view a list of child pages on the sidebar. For the pages without any child pages, there is no child pages list brought out.

Display Child Pages with Coding Stuff

If you have a perfect command of coding stuff, then you’d better have a try to display child pages with lines of code. You are required to add the given code to the functions.php file and then make adjustments if needed. Go to Appearance > Editor and open the functions.php file. Add the following code to this file and save it since you have all changes done.

function wp_childpages() 
{
    global $post;

    if (is_page() && $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)
        $outputHtml = '<ul>' . $children . '</ul>';

    return $outputHtml;
}

add_shortcode('wp_childpages', 'wp_childpages');

Note that, the above-mentioned code is only true of the parent page that includes a series of child pages. To make it work for your website properly, you just need to add the shortcode [wp_childpages] to the parent page. And then, all child pages going with this parent page are displayed automatically.

Include a List of Child Pages in the Menu Bar

In addition to showing a list of child pages on a parent page conspicuously, you are able to display the child pages list on the menu bar. There is no need to make use of any WordPress plugins and coding stuff if you pitch on this method. Thus, this method is created for people who lack understanding on code and have lost interest in plugin.

Log into your website backend and go to Appearance > Menus. Check the parent page and all of its child pages from the Pages section, and then click “Add to Menu”.

add child pages to menu

Drag and drop all child pages slightly to the right and let them subject to the parent page as what we’ve done in the following screenshot. Finally, click “Save Menu” button to confirm all changes.

set child pages as sub items

Go to your website frontend and check if the parent page has been included in the menu bar. If so, move your mouse onto this item and check if there is a list of child pages as the following example.

child pages list example

Author

Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.

Close

Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *