How to Display a List of Child Pages on a Parent Page in WordPress: A Step-by-Step Guide

Displaying a list of child pages on a parent page in WordPress can be useful for creating navigation menus, displaying related content, or simply providing an organized way to showcase your site’s content., and can also improve the user experience. Fortunately, WordPress makes it easy to display child pages using a shortcode.

In this tutorial, we will walk you through the steps to create a shortcode that displays a list of child pages on a parent page. We will use a code snippet that utilizes WordPress functions to retrieve the child pages, and then display them in an unordered list with hyperlinks. Additionally, we will optimize the code snippet by using the rel bookmark attribute and the aria-label attribute for improved accessibility and SEO.

Before proceeding with any customizations in WordPress, it’s essential to set up a child theme. A child theme acts as a safe and efficient way to make modifications without affecting the parent theme. If you haven’t set up a child theme yet, follow this tutorial on How to Create a Child Theme for Customization. It will guide you through the process and ensure that your customizations remain intact even after theme updates.

Let’s get started!

To use this code snippet, you can add it to your WordPress functions.php file or a custom plugin. Here are the steps to add the code to your functions.php file:

1. Log in to your WordPress dashboard and navigate to Appearance > Theme Editor.
2. On the right-hand side of the screen, select the functions.php file.
3. Copy and paste the code snippet at the end of the file.
4. Save the changes by clicking the Update File button.

Create the Shortcode

First, we need to create a function that will generate the list of child pages. This function will take a post_parent parameter, which will be used to get the child pages of a specific parent page. Add the following code to your theme’s functions.php file:

function child_pages_shortcode( $atts ) {
	$atts = shortcode_atts(
		array(
			'post_parent' => get_the_ID(),
		),
		$atts
	);

	$args = array(
		'post_type'      => 'page',
		'posts_per_page' => -1,
		'post_parent'    => intval( $atts['post_parent'] ),
		'order'          => 'ASC',
		'orderby'        => 'menu_order',
		'exclude'        => '',
	);

	$child_pages = new WP_Query( $args );
	$output      = '';

	if ( $child_pages->have_posts() ) {
		$output .= '<ul>';
		while ( $child_pages->have_posts() ) {
			$child_pages->the_post();
			$link    = esc_url( get_permalink() );
			$title   = esc_html( get_the_title() );
			$output .= '<li><a href="' . $link . '" rel="bookmark" aria-label="' . $title . '">' . $title . '</a></li>';

		}
		$output .= '</ul>';
	}

	wp_reset_postdata();

	return $output;
}
add_shortcode( 'child_pages', 'child_pages_shortcode' );
Code language: PHP (php)

This code defines a shortcode called child_pages that uses the WP_Query class to query the child pages of a parent page. The shortcode takes an optional post_parent attribute that defaults to the ID of the current page.

We’ve also added the rel="bookmark" attribute to the link, which indicates that the link leads to a bookmark within the page. This can be useful for assistive technologies such as screen readers. Additionally, we’ve added an aria-label attribute to provide a descriptive label for the link.

Use the Shortcode

Now that we’ve created our shortcode function, we can use it in our posts and pages. To use the shortcode, simply add the [child_pages] shortcode to the post or page where you want to display the list of child pages. You can also specify a post parent by passing the post ID as an attribute, like this:

[child_pages post_parent="123"]
Code language: PHP (php)

Additionally, you can customize the output of the child pages shortcode by using shortcode attributes. The post_parent attribute is already included in the code snippet above, but you can add more attributes to further customize the output.

For example, you can add a sort_by attribute to sort the child pages by a specific field, such as date or title. You can also add a sort_order attribute to specify the order of the sort, such as asc or desc.

Here’s an example of how to add these attributes to the shortcode:

function child_pages_shortcode( $atts ) {
	$atts = shortcode_atts(
		array(
			'post_parent' => get_the_ID(),
			'sort_by'     => 'menu_order',
			'sort_order'  => 'ASC',
			'exclude'     => '',

		),
		$atts
	);

	$args = array(
		'post_type'      => 'page',
		'posts_per_page' => -1,
		'post_parent'    => intval( $atts['post_parent'] ),
		'order'          => $atts['sort_order'],
		'orderby'        => $atts['sort_by'],
		'exclude'        => $atts['exclude'],
	);

	// rest of the code here.
}

Code language: PHP (php)

In this example, the shortcode now accepts sort_by, sort_order and exclude attributes, and defaults to sorting by menu_order in ascending order if no attributes are specified.

By adding these shortcode attributes, you can make the child pages shortcode even more flexible and customizable to fit your needs. For example:

[child_pages post_parent="123" orderby="date" order="DESC" exclude="456,789"]
Code language: PHP (php)

Style the List of Child Pages

Finally, we need to style the list of child pages to match our site’s design. You can do this by adding CSS to your theme’s stylesheet. Here’s an example of how you could style the child pages list:

ul.child-pages {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.child-pages li {
  margin-bottom: 10px;
}

ul.child-pages li a {
  color: #333;
  text-decoration: none;
}
Code language: CSS (css)

That’s it! In this tutorial, we’ve shown you how to display a list of child pages on a parent page in WordPress using a shortcode. We’ve also optimized the code for SEO by using the rel bookmark and aria label attributes for the links. By using this shortcode, you can create a better user experience for your visitors and make it easier for them to navigate your site.