How To Show A List of Pages In A WordPress Post

Sometimes you need to display a list of pages in a WordPress post. Perhaps you’re designing a 404 landing page and want to show the user all the pages on your site so they can navigate wherever they want. Or maybe you’re creating a knowledgebase of your site and want to create a user-friendly “sitemap” that people can use to get around.

Whatever the reason, you want this list of pages to change dynamically as your site grows, or pages are deleted. It’s too much effort to manually create links and then risk those links getting out of date. Luckily, there is a way to dynamically generate a list of pages on your site.

We can even create custom queries to display specific child pages, choose the order, and even style the parent pages and child pages separately. Let’s see how to do this via a shortcode.

Step 1: Creating the Page Hierarchy

For this example, I’m going to create a bunch of new pages on my test site.

Step 2: Add the Shortcode to your functions.php

To implement this solution, we’re going to add the following code to functions.php.

function show_pages( $atts ) {
    wp_list_pages( array(
        'title_li'    => '',
        'sort_column' => 'post_date',
        'sort_order' => 'asc',
    ) );
}
add_shortcode( 'showpages', 'show_pages' );

If you don’t know how to do this, read my earlier tutorial with step by step screenshots on inserting custom code into WordPress.

The code above creates a shortcode which acts as a kind of wrapper around the primary WordPress PHP function “wp_list_page”.

Step 3: Use the Shortcode in a Post

The code above allows us to use a new shortcode called [showpages]. It’s pretty basic and merely outputs a complete list of pages on your site. So open up your WordPress editor with a new post and use the shortcode like this:

If you’ve inserted your code correctly, you should get something like this when you preview the post:

As you can see, every single published page is displayed. In the code, I’ve sorted by the post data in ascending order. You can change “asc” to “desc” if you want to show them reverse chronologically.

Showing Child Posts

By default, the shortcode above will automatically show child posts below parent posts. For example, I’ve modified my pages so that Pages 1 and 3 are child posts of the parent “Page 2”:

With this change, the output of the shortcode is shown here:

As you can see, Page 1 and Page 3 are automatically shown below Page 2, even though Page 1 was created before Page 2.

But we can also pass a new parameter called “child_of” to only display child posts of a given parent page. To do that, we modify the shortcode function to be this:

function show_pages( $atts ) {
    global $id;
    wp_list_pages( array(
        'title_li'    => '',
        'child_of'    => $id,
        'sort_column' => 'post_date',
        'sort_order' => 'asc',
    ) );
}
add_shortcode( 'showpages', 'show_pages' );

The second line in bold accepts a page id. In this example, we get the ID of the page that’s displaying the shortcode, but it could be any id.

We can even pass the parent page ID as a parameter and so have multiple page lists on the same WordPress post. Here’s the code for that:

function show_pages( $atts ) {

  $atts = shortcode_atts( array(
		'parent_id' => ''
	), $atts, showpages);

    wp_list_pages( array(
        'title_li'    => '',
        'child_of'    => $atts["parent_id"],
        'sort_column' => 'post_date',
        'sort_order' => 'asc',
    ) );
}
add_shortcode( 'showpages', 'show_pages' );

Now we can use the shortcode to display the child pages of any given parent page like this:

[showpages parent_id=’45’]

Where replace 45 withe ID of the parent page whose children you want to display, and you’ll get an output like in the following screenshot. Here, “45” is the page ID of “Page 2”:

So now you can have multiple sections of child pages on a single page. And these will automatically update whenever you delete a page, add a new one, or modify the title of an existing page. Convenient!