By on in Design & Dev & Tutorials

How to display subpages of a WordPress page with their custom meta

When working with WordPress as a CMS, pages are likely to be used far more often than the typical blogging-focused WP installation. A WordPress as CMS implementation could have hundreds of pages, so one of my favorite tricks for making those pages structured and navigable is to display the subpages of a WordPress page with their meta, such as title, publication date, featured thumbnail, custom fields, excerpts and, of course, permalinks to the subpages.

One example use is on this page of Seattle Photographer Clara Ganey’s portfolio. The portfolio page displays all of its subpages in a multiple column list (another favorite technique of mine) of the subpages’ featured thumbnails with the subpage titles and excerpts showing on hover.

Seattle Photographer Clara Ganey Portfolio

Here’s a peek at the code that generates that portion of the page. Just drop the code necessary to display the meta for each subpage in the commented area below, and a page template with this code in it will display its subpages the way you’d like:

<?php
$args = array(
'orderby' => 'menu_order', // Allows users to set order of subpages
'order' => 'ASC',
'post_parent' => $post->ID,
'post_type' => 'page',
'post_status' => 'publish'
); $postslist = get_posts($args);
foreach ($postslist as $post) : setup_postdata($post); ?>

// Enter code to display for each subpage here. For example, list items
// containing featured thumbnails, page titles and permalinks to
// the pages.

<?php endforeach; ?>

Have you used a similar technique in a creative way or need help implementing something similar within a theme? Tell me!

Update: Hawaii asks in the comments what some example code for displaying subpages and their meta would look like. Here’s an example that would display a thumbnail linked to the page:

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail( 'thumbnail-name'); ?>
</a>

Comments (14)

  1. This looks promising, and clean! Would you be willing to post an example of the PHP code that would go into the display area? I'm sure a link, image tag, and alt tag is pretty rudimentary stuff to call out, but I'm below rudimentary. Thanks, either way!

    Respond

    • Sure! The code that would go in the space noted in the example for a link and image (alt tag included) is a couple of WordPress template tags and HTML. I've updated the post above with an example, since the comment system wasn't cooperating with me dropping in PHP.

      Before using some code like this, though, you would have to activate thumbnails for your theme and for pages if you haven't already. If you have, replace the "thumbnail-name" part with the handle for the appropriate size in your functions.php file.

      Here's a good tutorial for adding thumbnail support to your theme: http://joshl.us/64d

      Respond

  2. Wow! Thanks for the… impossibly swift yet thoroughly useful response! This is just enough to start experimenting, and hopefully not causing anything to explode. Mahalo!

    Respond

  4. I am using this code and it's working great for me, but for some reason it won't post more than five subpages. how would I specify that all sub pages should be shown? thank you so much!

    Respond

  5. Looks like you can use:

    'numberposts' => '10',

    Simply add this to the top of the array, and change to the number you'd like to display. Changing this number to "0" will display all.

    Respond

  8. How would I do this if I want to show the subpages on a page that is not the parent? I want to show the last 5 portfolio pieces on my home page.

    Respond

  10. I followed your code and after creating a new template (a clone of my basic bpage template), I then pasted the above code inside the content area, with your example code for displaying subpages and their meta. However nothing displays on the front end. Just a blank page.

    Am I missing something in between?

    Respond

Post a Comment

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