Introduction
As a website owner, you know that your website has many pages containing different content. Each page may even contain 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 page or vice versa, today’s blog will help you do that.
Thanks to this, you can make your website layout more logical, giving visitors a clear overview when accessing your website. In addition, showcasing a list of child pages for a parent page is also convenient, as visitors can move 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, make sure that you already know how to create a child page in WordPress. After generating many subpages, follow one of these 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, so we will introduce it first. The following image is an example of child pages. 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 look for the plugin by typing its name in the search bar. After that, press the Install Now -> Activate button to add it to your WordPress site.
After installing and activating Page-list, simply go to the parent page by clicking Pages -> All Pages and choose the parent page you want to edit. In this case, we open the About Us parent page and add the following shortcode wherever we 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 added the shortcode under the descriptive content, so the subpages will appear at the end of the content.
In case you wish to change the look of the list, you can 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 stands out more 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 involves code. If you want to use this way, open your site-specific plugin or your 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 display all other subpages of the parent page. Also, in the case of a standalone page, which has neither a child nor a parent page, this code will do nothing.
In order to display the list of child pages, you just need to add the shortcode below to 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, make sure that you have 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.
To use this method, you have to edit the main page.php template. Alternatively, you can build a custom page template in your theme.
In the page template file, add the code wherever you want to show 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 questions, don’t hesitate to leave your comment below so that we can help you quickly. Last but not least, if you want more new themes for your site, let’s take a look at the Free WordPress Themes here.
