Creating a thumbnail index page from child pages

One of the features of my latest project, Contempora Corner, was the creation of a custom page template that is used as an visual index page for a specific category of content. These are essentially landing pages with links to all of the respective child pages. I try to organize sites to not use these as much as possible, but sometimes they’re just unavoidable.

I wanted to automate this template as much as possible, avoiding the need to manage even more content than what already existed on the child pages. Because much of this particular project is a visual showcase, associating images with the links was a requirement. In the past, this would have meant defining an image URL in a custom field and then displaying it. Fortunately WP 2.9′s new thumbnail feature provides a very accessible alternative.

Important: I use the Thematic framework as the base for most all of my WordPress development. The code examples below may need to be modified to work with WP’s default themes or other frameworks.

First, enable post/page thumbnails in your functions file:

// Add WP2.9 thumbnail support
if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );

Then, define a thumbnail image for each child page.

Using page.php as a starting point, create a new PHP page template file in your theme’s directory. The heart of the new template is the following code, which comes after the main loop:

<div id="section-container">
<?php
$pages = get_pages('child_of='.$post->ID.'&parent='.$post->ID.'&sort_column
=menu_order&sort_order=asc');
foreach($pages as $page)
{ ?>
<div class="section-page">
  <div class="section-thumb"><a href="<?php echo get_page_link($page->ID) ?>">
    <?php echo get_the_post_thumbnail($page->ID, array(150,100)); ?></a>
  </div>
  <div class="section-text">
    <div class="section-title"><?php echo $page->post_title ?></div>
    <div class="section-desc"><?php echo get_post_meta($page->ID,
      'section-desc', true); ?></div>
  </div><!--section-text-->
</div><!--section-page-->
<?php }
?>
</div><!--section-container-->

You could of course replace the main loop with something like this, but keeping it allows you to use the page title and content for introductory material or anything else you want above the thumbnails.

The get_pages query identifies the first-level child pages of the current page and sorts them by menu order, then starts looping through each identified page.

I’ve wrapped each of the actual content pieces in individual div’s to help control the layout. I know that some don’t like this practice, but I find it helpful to start verbose and strip out what I don’t need later.

Within “section-thumb”, I define my link to the child page as well as show the post thumbnail. I had been playing with different image sizes on the index page, so including the array statement is useful, even though I ended up using my default thumbnail size. If you wanted, the permalink could be placed almost anywhere in this template, including as a block element around the entire thumbnail and text.

Within “section-title”, I’m simply calling the page title. I actually want to fuss with this a little bit because I often use verbose page titles that aren’t useful navigation labels. I use the Page Lists Plus plugin to set different nav labels, but those aren’t getting called here.

The “section-desc” is calling a custom field set on the child pages. I really wanted to avoid using custom fields, but I haven’t been able to get my page excerpts to display. I’m using a function that adds the excerpt entry box to the Edit Page screen:

// add excerpts to pages (not just posts)
function add_page_excerpt_meta_box() {
add_meta_box( 'postexcerpt', __('Excerpt'), 'post_excerpt_meta_box', 'page',
'normal', 'core' );
}
add_action( 'admin_menu', 'add_page_excerpt_meta_box' );

But it doesn’t work when trying to display the defined text when using get_the_excerpt. So I’ve put my “excerpt” text in a custom field and set the section page template to read and display it. It may be that using a legitimate plugin to add excerpt functionality to pages may give me an actual function to use and display the text automatically.

So that’s it in a nutshell. You can see examples of this implementation by clicking the URL link above and selecting one of the main content areas from the primary nav, or simply go to the portfolio section of this website.