How to display a list of child pages for a parent page

Introduction

As a website owner, you know that your website has many pages containing different content. Even each page itself contains many child pages that show different branches of a large piece of content. If you are looking for a way to display a list of child pages on the parent site or vice versa, then this blog today will help you do that.

Thanks to this, you can make your website layout become more logical, helping visitors have a visual view when accessing your website. In addition, showcasing a list of child pages for a parent page also brings convenience when visitors can surf from parent pages to child pages and vice versa. Now, let’s move on to the methods to do that with the detailed instructions below.

How to display a list of child pages for a parent page in WordPress

Before listing child pages on the parent page, you make sure that you have already known how to create a child page in WordPress. After generating many subpages, let’s follow the 3 ways to showcase a list of them:

• Using a plugin to display subpages on the parent page
• Utilizing code to list child pages on the parent page
• Displaying child pages without using shortcode

Using a plugin to display subpages on the parent page

This is the easiest way we would like to introduce to you first. The following image is an example of child pages. So, you can see that the History page and Team Members page are 2 subpages of the About Us page. Besides, the History page also contains 2 child pages: the Development page and the Establishment page.

Now, we will display the child page list above on the About Us parent page.

First of all, you need to install and activate the Page-list plugin. Let’s go to Plugins -> Add New, then you can looking for the plugin by typing the name on the search bar. After that, press on Install Now -> Activate button to add it to your WordPress site.

After the Page-list installing and activating, you just simply go to the parent page by clicking Pages -> All Pages and choose the parent page you want to edit. In this case, we access the About Us parent page and add the following shortcode to anywhere you want:

[subpages]

Don’t forget to update your changes.

Now, let’s see how the child pages will be displayed on the About Us parent page. You can see that we add the shortcode under the descriptive content, so the subpages will appear at the footer of the content paragraph.

In case you wish to change the look of the list, you are able to do this by adding some custom CSS, the following code is an example:

ul.page-list.subpages-page-list {
list-style: none;
list-style-type: none;
background-color: #eee;
border: 1px solid #CCC;
padding: 20px;
}

In the image below, we use the Simple Custom CSS plugin to add the code. Of course, don’t forget to save your changes with the Update button.

After updating, you can easily see that the subpage list will become more highlighted with a white box.

Utilizing code to list child pages on the parent page

This way is more advanced than the first one because it is related to code. If you want to continue the way, let’s access the site-specific plugin or the theme’s functions.php file. Then, add the following code:

The working principle of this code is that it will check whether a page is a parent page or a child page. If it is the parent page, then it will display the child pages related to it. Conversely, if it is a child page, it will help you to display all other subpages of the parent page. Also, in the case of a standalone page, which has neither child nor parent site, this code will do nothing.

In order to display the list of child pages, you just need to add the shortcode below in a page:

[wpb_childpages]

Furthermore, you can give the subpage list other styles via custom CSS, such as:

ul.wpb_page_list {
list-style: none;
list-style-type: none;
background-color: #eee;
border: 1px solid #CCC;
padding: 20px;
}

Finally, let’s make sure that you have already saved your changes.

Displaying child pages without using shortcode

Another way to display a list of child pages without using shortcodes is to edit the page template file in your theme. This approach will help you automatically display subpages, which is extremely convenient and saves time.

In order to implement this way, you have to edit the main page.php template. Moreover, you are also able to build a custom page template in your theme.

In the page template file, let’s add the code to anywhere you want to showcase the subpages and save it:

<?php wpb_list_child_pages(); ?>

Now, your theme will detect the subpages and then present them in a list automatically without any trouble.

Conclusion

To sum up, we hope that you can display a list of child pages via the 3 methods above. If you have any difficulty or have any query to ask, don’t hesitate to leave your comment below so that we can help you quickly. Last but not least, if you want to get more new themes for your site, let’s take a look at the Free WordPress Themes here.

5/5 - (1 vote)

The post How to display a list of child pages for a parent page appeared first on LTHEME.