• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

How To Show A List of Pages In A WordPress Post

Bhagwad Park

Published on: October 29, 2018

Categories: WordPress 0

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.

List of Pages

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:

Using the Shortcode Inside a Post

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

Final Output with Pages

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”:

Creating Child Pages of Page 2

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

Child Pages are Displayed Underneath Parents

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”:

Show List of Specific Child Pages

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!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Security
  • Website Development
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA