Automated Indexes

This site has several areas where there is a page that serves as an index for a bunch of sub-pages. Some good examples seen from this page are the “Features” and “Webcraft” sections of Nerdaphernalia. If you look at those pages they are simply lists of various articles with a short description for each.

Originally I was simply hand-crafting those lists within the normal Page editor screen in WordPress. More recently I’ve been tinkering with a better system, and I’ve finally gotten it working. (It would have worked a lot more quickly, but a third-party plugin involved had a bug, which I had to fix myself — more on that in a moment….) The end result is a straightforward system for fully automated section index pages.

The first thing that needs to be done is to make a page template for the sections. I made a copy of the page.php file in my theme and renamed it section_index.php. Just below the code that displays the main content, I put the following:

<ul class="section_index">
	if(have_posts()) : while (have_posts()) : the_post(); ?>
		<li><a href="<?php the_permalink();?>"><?php the_title();?></a><br />
		<?php the_excerpt(); ?></li>
	<?php endwhile; endif; wp_reset_query(); ?>

Just below that, I removed the Comments code. Depending on your theme, you may or may not have to do that too.

One more thing — in order for WordPress to recognize our new template as a Page Template, we need to put the following up at the top of the file, just inside the opening “<?php” :

Template Name: Section Index

Having done that, our new template will now show up in the Edit Page screen in the “Page Template” list. Not so fast, though! It won’t work quite yet — there’s a bit more we need to do. Let’s back up for a moment and take a look at one line of our template code:


See that “child_of” parameter? That’s not something that WordPress recognizes. If you run a page with that template now, your blog will have an attack of the vapors! We need to teach it a new trick first.

We’re going to need two plugins, which just so happen to be A) highly complementary, and B) programmed by the same person: Peter “westi” Westwood. Go download and install these two plugins:

PJW Page Excerpt is a very straightforward plugin. You know how a blog post can have a custom “excerpt”? Once you activate this plugin, Pages can have them too.

PJW Query Child Of is going to teach WordPress that new trick we were just talking about a minute ago. Once you activate this plugin, the query_posts() function in WordPress will know what to do with the child_of parameter. (As a side note, this was the plugin with the bug I fixed. Peter had accidentally uploaded an earlier version of the file….)

Once you have those both activated, you need to go into the edit screen for each Page in the section, and add a bit of “summary” text in the Excerpt field. This text is going to appear below the Page title in the index.

One last step and we’re done: Go the the edit screen for the section index Page, and set the template to (you guessed it) “Section Index”. You might want to also change the text in the main content area — that will appear above the Page listing itself. For an example of the end result, take a look at the Features page on this site.

After you’ve set this up, making new sections is simple: when you make the section’s main page, set the template to “Section Index”. Then, when making new Pages, remember to write a short description in the Excerpt section. The index Page will automatically populate with new sub-pages as you add them.

One final note: if you don’t want page descriptions in your index, and just want a raw list of Page titles, you can use the pre-existing wp_list_pages() function. It’s part of WordPress already, so you don’t need the plugins to use it. I think the method I describe here is a lot more flexible, but you can save some steps if your needs are simpler than mine.

But Wait! There’s More! Here’s a free bonus tip for you: Copy the following and paste it into your Section Index template file between the <?php the_title();?></a> and the <br />. See what happens! 😉

<?php edit_post_link(__('Edit', 'sandbox'),'<span class="edit-link">','</span>') ?>

Good luck!

[Update: added wp_reset_query(); to the template code above. This is a reset that might avoid some conflicts with other code running on your site.]

This entry was posted in GUI Goodness, Webcraft and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published.