Recently, one of our users asked how to display a list of child pages for a page in WordPress. Often in the work on a site where there are child pages, you may need to show a list of these very child pages in the sidebar widget or anywhere else in the template. In this article, we will show you how to list the child pages for the parent in WordPress.
You can look at an example of the list of child pages in the screenshot below, which was taken from the OptinMonster website page .
An important feature of the pages is that they can be hierarchical. This means that pages can be parent and have their own child pages (for example, sub-pages), which allows you to group different pages “under” one parent page. For example, if you have a product page on a site, then you can add pages like Function, Price, Support as subsidiaries. Each child page, in turn, may also have its own nested pages.
In order to create a child page, simply create a new one or go to edit an existing one. In the Page Properties meta box, select the parent page from the drop-down menu.
Note: if you do not see this menu, then click on the Screen Settings button in the upper right corner of the page. A menu will appear where you need to check the Page properties item
We Display The Child Pages On The Parent
In order to display the list of child pages under the parent, you will need to add the following code to the theme’s functions.php file:
1 |
function devise_list_child_pages() { |
5 |
if ( is_page() && $post->post_parent ) |
7 |
$childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of='. $post->post_parent . '&echo=0' ); |
9 |
$childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of='. $post->ID . '&echo=0' ); |
13 |
$string = '<ul>' . $childpages . '</ul>'; |
20 |
add_shortcode('devise_childpages', 'devise_list_child_pages'); |
The code above first checks to see if the page has a parent page, or whether it itself is one. If the page is parent, then the code will display the child pages associated with it. If it is a child page, then the code will show all other child pages. And finally, if this is a simple page without nesting levels, then the code will not do anything. In the last line, we added a shortcode so that you can easily display a list of child pages without having to edit the template pages.
In order to show the child pages, just paste this shortcode on the page or in the text sidebar widget:
Dynamically Displays Child Pages Without Any Shortcodes.
Using shortcodes is quite convenient, but the problem appears when you need to add a shortcode to all pages that have parent or child pages. You, undoubtedly, quickly get tired of this, and sometimes you can skip the desired page.
The best solution in this situation would be to edit the page template files in your theme so that you can display the child pages automatically. To do this, you need to edit the main page.php file of the template or create an arbitrary page template in the theme.
In the template file of your theme, you will need to add the following line of code to the place where you want to display the child pages.
1 |
<?php devise_list_child_pages(); ?> |
That’s all. Now your theme will automatically identify child pages and display them.
