How to Display a List of Child Pages For a Parent Page in WordPress

How to Easily Display Child Pages for a Parent Page in WordPress (2023)

Are you looking to improve the navigation and usability of your WordPress site? One effective way is by displaying a list of child pages on their parent page. This allows visitors to quickly see an overview of the content and dive deeper into topics that interest them.

In this guide, we‘ll explain what parent and child pages are and show you step-by-step how to display a list of child pages on a parent page in WordPress. Whether you‘re a beginner or an experienced developer, you‘ll find an option that works for you.

What Are Parent and Child Pages in WordPress?

WordPress has two main types of content: posts and pages. Posts are timely content pieces, like blog articles, that are typically displayed in reverse chronological order. Pages are for static, evergreen content.

A key feature of pages is that they can be hierarchical. This means you can have "parent" pages with "child" pages nested underneath them. You can even have multiple levels with "grandchild" pages. Some examples of how you might use parent and child pages:

• Services (parent)
  • Web Design (child)
  • SEO (child)
  • Social Media Marketing (child)
• About (parent)
  • Our Story (child)
  • Team (child)
  • Careers (child)
• Products (parent)
  • Product A (child)
    • Features (grandchild)
    • Pricing (grandchild)
    • FAQ (grandchild)
  • Product B (child)

As you can see, parent and child pages allow you to organize your website content into logical sections and hierarchies. But by default, the child pages are only accessible through the navigation menu (if you add them) or if you manually link to them in the parent page content.

By automatically displaying a list of child pages on the parent page, you make it much easier for visitors to navigate through the hierarchy of your content without having to hunt around or guess where to go next. It provides a better user experience and can even boost your SEO by providing links to help search engines crawl your content.

How to Create Child Pages in WordPress

Before we get into displaying child pages, let‘s quickly cover how to set them up in the first place. To create a child page, you first need to have a parent page created.

1. From your WordPress dashboard, go to Pages > Add New
2. Give your page a title (e.g. Services, About, Products)
3. Add your content to the page editor
4. In the Page Attributes box on the right, leave the Parent setting as "Main Page (no parent)" – this will be your top-level parent page
5. Click Publish to create your page

Now to create a child page:

1. Repeat steps 1-3 above to create a new page
2. In the Page Attributes box, select the page you want to be the parent under the Parent dropdown
3. Click Publish

Your page is now set as a child of the selected parent page. Repeat these steps to create additional child pages. You can also create multiple levels by selecting a child page as a parent for a new page (grandchild).

With your parent and child pages set up, let‘s look at how to display the child pages on the parent page. We‘ll cover three methods, starting with the easiest.

Method 1: Use a Plugin to Display Child Pages

By far the easiest way for beginners to display child pages is by using a plugin. There are a few good ones, but we recommend Page-List. It‘s free, actively maintained, and has all the features you need. Plus it works with any WordPress theme.

To get started:

1. Install and activate the free Page-List plugin
2. Edit the page where you want to display the list of child pages
3. Click into a content block where you want the list to appear and type in the shortcode [subpages]
4. Update the page and view it – you‘ll now see a simple bulleted list of child pages!

Easy right? But maybe not the most attractive. To style your child page list, you can add additional shortcode parameters and/or custom CSS.

Some useful shortcode parameters:

• [subpages depth="1"] – set how many levels of child pages to display
• [subpages sort="title"] – sort the list by page title rather than the default menu order
• [subpages exclude="32,41"] – exclude certain pages by ID
• [subpages siblings="yes"] – display sibling pages on child pages

Check the plugin documentation for a full list of shortcode parameters to customize as needed.

To further style the appearance of the list, you can add custom CSS to your theme stylesheet or in the WordPress Customizer Custom CSS box. For example:


ul.subpages-page-list {
list-style: none;
margin: 0;
padding: 0;
}

ul.subpages-page-list li {
margin-bottom: 10px;
}

ul.subpages-page-list a {
display: block;
background: #f2f2f2;
padding: 10px;
border-radius: 5px;
color: #333;
text-decoration: none;
}

ul.subpages-page-list a:hover {
background: #ddd;
}

This CSS removes the default list styling, adds spacing between items, and styles the links in a button-like fashion. Feel free to customize the colors, spacing, etc. to fit your theme design.

Method 2: Manually Insert a Shortcode to Display Child Pages

If you prefer not to use a plugin, you can also manually create a shortcode that will display a list of child pages. This method requires editing your theme files and having a basic understanding of PHP, but it allows for more customization.

To start:

1. Open the functions.php file in your currently active theme or child theme. You can do this by going to Appearance > Theme Editor in your WordPress dashboard.

2. Paste the following code at the bottom of the file:


function wpb_list_child_pages() {
global $post;
if ( is_page() && $post->post_parent ) {
$childpages = wp_list_pages( ‘sort_column=menu_order&title_li=&child_of=‘ . $post->post_parent . ‘&echo=0‘ );
}
else {
$childpages = wp_list_pages( ‘sort_column=menu_order&title_li=&child_of=‘ . $post->ID . ‘&echo=0‘ );
}

if ( $childpages ) {
$string = ‘

‘ . $childpages . ‘

‘;
}

return $string;

}

add_shortcode(‘wpb_childpages‘, ‘wpb_list_child_pages‘);

3. Save the changes to the functions.php file.

This code first checks if the current page is a parent or child page. If it‘s a child page, it displays a list of its sibling pages (other child pages from the same parent). If it‘s a parent page, it displays a list of its child pages.

The wp_list_pages parameters define how the list is output:

• ‘sort_column=menu_order‘ displays the list in the order set in the Page Attributes box
• ‘title_li=‘ omits the default "Pages" title
• ‘child_of=‘ sets the parent page to display children of
• ‘echo=0‘ returns the output rather than echoing it

Finally, the list is wrapped in a

tag with a CSS class for styling and returned by the function. The add_shortcode line creates a shortcode [wpb_childpages] that executes this function.

So to display the child page list, simply edit the parent page and type in the shortcode [wpb_childpages] where you want the list to appear.

You can further customize the output by adding parameters to the wp_list_pages function or by adding CSS to style the wpb-page-list class. See the previous section for CSS examples.

The advantage of this method over the plugin is you have more control over the output and don‘t have to worry about a plugin breaking or becoming outdated. The disadvantage is it‘s not as user-friendly to set up.

Method 3: Automatically Display Child Pages in Your Page Template

For more advanced users, you can automatically display child pages by modifying your WordPress theme template files. This has the benefit of not requiring you to insert any shortcode. The child page list will display on the parent page without any extra steps.

However, this method involves directly editing your theme files, so it‘s a good idea to use a child theme. That way your changes won‘t be overwritten if the parent theme is updated. See our guide on how to create a WordPress child theme if you need help.

Once you have a child theme set up:

1. Copy the page.php file from your parent theme into your child theme folder. This is usually located under /wp-content/themes/your-child-theme/.

2. Open the page.php file in a text editor.

3. Find the line that looks like:


<?php while ( have_posts() ) : the_post(); ?>


And paste this code directly after it:


<?php
if ( $post->post_parent ) {
$childpages = wp_list_pages( ‘sort_column=menu_order&title_li=&child_of=‘ . $post->post_parent . ‘&echo=0‘ );
}
else {
$childpages = wp_list_pages( ‘sort_column=menu_order&title_li=&child_of=‘ . $post->ID . ‘&echo=0‘ );
}
if ( $childpages ) { ?>
<ul class="subpages-page-list">
<?php echo $childpages; ?>
</ul>
<?php } ?>


This is the same code used in Method 2 to check if the current page is a parent or child and display the appropriate list of pages. The only difference is it‘s not wrapped in a shortcode function.

4. Save the changes to the page.php file.

Now when you view a page on your site, if it has child pages, the list will automatically display at the top of the content area. You can move the placement of the code in the page.php file to position it elsewhere on the page (e.g. below the content or in the sidebar).

Like the previous methods, you can customize the output by modifying the wp_list_pages parameters or adding custom CSS to style the subpages-page-list class.

This method provides the most seamless experience as the child page lists appear automatically without any extra steps. But it does require advanced knowledge of editing theme files and using a child theme.

Examples of Effective Child Page Navigation

Now that you know how to display lists of child pages in WordPress, let‘s look at a few examples of it done well.

The WordPress.org About page lists its child pages in a grid format with thumbnail images. This makes it easy to see all the subpages at a glance and entices visitors to click through and learn more.

The Apple support page takes a different approach – it displays the child pages in a sidebar navigation panel. This allows visitors to jump to different support topics without leaving the page.

Finally, the WhiteHouse.gov site uses a combination of a sidebar navigation and in-content links to child pages. This approach caters to different user preferences and encourages visitors to go deeper into the content.

As you can see, there‘s no one "right" way to display child pages. Consider your site content, audience, and design when deciding on the best approach.

Bonus: Breadcrumb Navigation

In addition to displaying child pages, you can further improve your site navigation by implementing breadcrumb links. Breadcrumbs show the path to the current page, with each level linking to the parent page. For example:

Home > Products > Widgets > Widget XYZ

Breadcrumbs are helpful for visitors to orient themselves on your site and navigate to higher-level pages. Like child page lists, you can add breadcrumbs to your WordPress site with a plugin like Breadcrumb NavXT or Yoast SEO. For more advanced users, you can add breadcrumbs directly to your theme – see this tutorial on WPBeginner.

Conclusion

Displaying child pages on your WordPress parent pages makes it easier for visitors to find the content they‘re looking for and encourages them to explore your site further. Whether you‘re a beginner or an experienced developer, there‘s a method that will work for you:

1. Use a plugin like Page-List for the easiest implementation.
2. Manually create a shortcode to display child pages if you want more control than a plugin offers.
3. Automatically display child pages in your page template for the most integrated solution.

Whichever approach you use, be sure to style your child page lists to fit with your theme design. Look at other sites for inspiration on effective ways to display child page navigation.

Finally, consider implementing other navigation aids like breadcrumbs to further improve your site usability and SEO.

Do you have any other tips or examples of child page navigation done well? Let us know in the comments!