How to Show All the Child Pages of a WordPress Parent Page
Dividing related content across several associated subpages is as much art as it is science. As a WordPress webmaster, you might be tempted to put a lot of content on a singular page, but you should resist that! Reducing clutter will increase the readability of your page. And spreading your content over several pages is one of the most common ways of avoiding a jumble. But, you still need to make it obvious for your visitors that the original page and subsequent subpages are connected. And ensure those subpages can be easily accessed.
You can address that by including an index of all connected subpages on the original page. The index will help website users quickly view the content they are looking for as well as help them pick and choose from the content, or even discover something new.
Creating subpages is quite easy as WordPress has a built-in option to help you do it. It works by assigning one page to be the parent page of another (referred to as the child page). However, the tricky bit is inserting an index of child pages into the parent page. So, in this article, we will be taking a look at how to show an index of child pages belonging to a specific parent page. And we’ll show you how to tackle this issue by breaking it down into several smaller steps. But first, let’s see what child and parent pages are. If you’re already fluent with this, you can scroll down to the practical steps.
What are child and parent pages in WordPress?
Child and parent pages are a way to organize and structure your website’s content hierarchy. They are a feature of the WordPress page system, which allows you to create static pages for your website’s content, such as About Us, Contact, or Services.
A parent page is a top-level page that acts as a container or a category for other pages. It serves as the main page or section under which you can group related subpages or child pages. These child pages inherit certain characteristics from their parent page, such as the parent page’s URL structure and menu placement. Child pages, which can be considered subpages under a particular parent, are indented and nested under their parent page in the editor, maintaining a clear hierarchical relationship.
To learn more about this, check out our piece that explains what parent pages are in greater detail.
You can show an index of all child pages attached to a specific WordPress page using two different methods. The first involves using a convenient plugin and the second entails enabling this feature using custom code. We will show you the steps for both methods. However, we first need to explain how to assign a parent page to another WordPress page.
Start by deciding which page will be the child page. Then open it for editing and navigate to the Page Attributes section on the right. If you are using the default WordPress page builder – Gutenberg, the section will be located in the Document tab. Then, locate the Parent Page option, select a page from the dropdown menu, and press the Update button in the top right corner of the screen to update the page.
This will set the page you selected from the dropdown menu as the parent of the page you were editing. The successful connection can also be seen from the list of All Pages. Child pages are shown below their corresponding parent page and are indented using a dash in front of their name.
You can also assign parent pages to already existing parent pages. This creates child pages of multiple depths. The child depth level is then noted by the number of dashes preceding the page title.
Due to an abundance of WordPress plugins for almost any purpose, you should always try to find a convenient plugin first when adding a new feature or functionality. The plugin we’ll be using in this article is the CC Child Pages plugin. You can use this plugin in two ways after installing it.
The first way requires using widgets. Insert the CC Child Pages widget in your desired widget area and then adjust the available widget options.
You’ll find the CC Child Pages widget near the top of the list of the Available Widgets section. When you’ve added it, you can pick which options will be useful for you. For example, when ticked, the option Show Page Title will replace the static title from the Title field with the name of the current parent page, so the child page index will have a helpful title instead of just saying Child pages. You can choose which pages won’t show by adding page IDs in the Exclude option.
For reference, a page ID is a number that you can find in a page’s permalink, after the part with ?post= in it. In our case, for example, the ID of the Contact Us page is 1114.
Also, by ticking the Show Sibling Pages you will show pages that have the same parent and are on the same child depth.
Here’s an example of how the widget content could look on a website made with the Powerlift theme.
The second way of using the CC Child Pages plugin is to directly insert the shortcode. We will take you through the steps using the Gutenberg page builder. We strongly suggest studying our article on custom shortcodes if you aren’t certain what those are and in which form to use when inserting them into your page. The article also covers inserting a custom shortcode inside your page if you are using Elementor or WPBakery as your page builders of choice.
To insert the custom shortcode within a page, click the + sign to add a Gutenberg block and select a Shortcode block. Then insert the shortcode name within it and press the Update button. The shortcode name is child_pages, so you can simply insert [child_pages]. By doing so, every possible function parameter will be set to its default value, which is defined within the corresponding plugin file. But, you can also insert your arguments to specify some of the parameters. As the list of possible arguments is set as an associative array, you should insert the arguments in the following format: key=’value’. If making multiple entries, you should separate them with a blank space.
As an example, we have set the following:
[child_pages cols=’2’ depth=’0’]
This makes our index list display in 2 columns (cols=’2’) and presents the parent and all child pages in a hierarchical and indented (depth=’0’) list. If you want to know more about the available arguments and how to include them, we suggest going through the official plugin page in detail.
After inserting the example shortcode, we got the following result, shown below.
The drawback of this plugin is that it has very few additional options. For styling purposes, you can choose whether to use the premade plugin styles or not. That’s done by ticking the Yes or No checkbox next to the Enqueue Skin CSS option in Settings > Child Pages.
To improve the stylization of your child page results you can also include additional, tailor-made, CSS in the Custom CSS option below.
After making any changes to the settings don’t forget to press the Update Options button below, for those changes to apply.
Another possible way of creating an index of child pages is through the use of custom-made code. The benefit of this method is the freedom of customization. You can modify the index section of the child pages exactly according to your needs without being reliant on a plugin. However, creating custom code is a method geared predominantly towards more experienced WordPress users.
Before we delve into the steps needed for this method, there are a couple of suggestions we’d like to make. Firstly, we suggest brushing up on your knowledge on the use of FTP. Secondly, it is sound policy to make a backup of your WordPress files in advance, since improper use of code can break your website.
Having said that, let us proceed to the description for this method. First, you would need to connect to your server using your FTP credentials and navigate to your root WordPress directory, often called public_html.
Then, navigate to the /wp-content/themes directory and click on the directory of your current theme to open it.
Find the functions.php file within, right-click on it, and select the View/Edit option.
Open the file using your preferred text editor and insert the code given below at the end of the file.
function qode_children_list() {
global $id;
$child_pages = wp_list_pages( array(
'title_li' => '',
'child_of' => $id,
'sort_column' => 'post_date',
'sort_order' => 'desc',
'echo' => 0
) );
if ( $child_pages){
$output = '<ul>' . $child_pages . '</ul>';
}
else
$output = '';
return $output;
}
add_shortcode( 'children_list', 'qode_children_list', 11 );
Let’s take a closer look at the code included above.
This code is a small custom shortcode called children_list. It displays an unordered list of links leading to corresponding child pages of a page that the shortcode is used on. If that page has no child pages, the code won’t do anything (the output HTML would be empty).
The code relies entirely on the wp_list_pages() function. This function can take many possible parameters although we used very few. The notable ones are the two we used for sorting the appropriate links. More precisely, the links are sorted in descending order following the publish dates of the child pages. Therefore, the entries on the list will start from the newest and go down to the oldest.
We strongly suggest going through the documentation regarding the wp_list_pages() function for more information on its parameters and use. With that being said, let’s see how we can use this shortcode on our website.
If you want to add the shortcode to your page, you can do so using Gutenberg as your page builder. Simply press the + sign to add a new block, select the Shortcode block, and insert [children_list]. Finally, press the Update button in the top right corner of the page. If you prefer Elementor or WPBakery as your page builders, you can find the steps required for them in our article on the use of custom shortcodes.
If you used the same shortcode we gave as our example inside the content of your page, then you will get the following result:
You can also place the shortcode into a Text widget and display the child page index inside your preferred widget area. This use is also described in more detail in our article on custom shortcodes. For now, you can simply add [children_list] inside the Text widget and press the Save button. You can even add a title for your child page index, although we have opted not to do so in our example.
Here’s how the shortcode looked in the Powerlift theme after being inserted into the sidebar area.
You can choose to further stylize the appearance of this list. That can be done by creating some custom CSS. If you opt to do this, we advise you to add it under Additional CSS, which is located in the Appearance > Customize section of your admin dashboard.
Final thoughts
Showing all child pages of a specific parent page has many uses. Making navigation through your website easier and improving user experience, to name a few. Even though showing the child pages of a WordPress parent page might seem easy to achieve, it’s made a bit complicated by the lack of built-in options in WordPress. However, if you follow the steps we outlined in the article, you can manage this quickly and with minimal effort. Additionally, we have done our best to provide a comprehensive explanation of both methods. Now it’s up to you to choose which one you prefer to use.
