Day 17: Using custom category templates and query_posts

Right now I’m working on a site for a local video production company called Reeltime Videoworks. As part of the spec for the site was the ability for the owners Sue and Don to add testimonials to the site that would be featured on a testimonials page as well as in short version on the front page. There are many ways of doing this, and it can be done for a lot of topics, not just testimonials, but I chose to use a custom category template plus some nifty coding on the front page to make it all work. On this 17th Day of WordPress I’ll give you a preview of how it all fits together and some tips along the way to get you going on your own custom categories.

Mapping it out

Before starting on a project it’s a good idea to think through what is going to happen. That way you get a clear idea of how you want to store the information and where you want to display it. In this case I had three major components that needed to be addressed:

1. The owners want to be able to add and manage testimonials easily
2. All the testimonials should be displayed on a page as a list
3. The front page should have a box where excerpts of testimonials appear, different each time the page is loaded

To make this all work I decided to go the easiest way possible: Make a category called Testimonials, create a custom category template for the Testimonials category and create a small query that pulls the excerpt from a random post within the Testimonials category and displays it on the front page.

Creating a custom category template

I’m going to assume you know how to make posts and categories so I’ll jump right to creating a custom category template. Custom category templates are one of those well kept secrets of WordPress. Most people just ignore them completely and rely just on the main category template, but you can do a lot of fun stuff with the custom versions.

When it comes to what template to use when displaying a category list WordPress operates with a strict hierarchy:

1. category-slug.php
2. category-ID.php
3. category.php
4. archive.php
5. index.php

This means to create a custom category template for a category called “Testimonials” all you have to do is create a copy of the category.php file and name it either category-testimonials.php or category-ID.php (where ID is the numerical ID of that category) and you’re ready to start customizing.

Now the whole point of creating a custom category template is that it displays differently than other categories. In the case of this project I wanted a picture of the quoted person with his or her name and company affiliation displayed on the right with the actual quote displayed on the left in a stylized form. To make things as easy as possible for the Reeltime crew I set it up as follows:

• The post title is the name of the person
• The post body is the quote itself
• The post excerpt is the best part of the quote to be displayed on the front page
• A custom field is added with the key companyTitle that is filled with the company title and affiliation info
• The photo of the person or a company logo is added as the Featured Image

The custom category template in turn calls the information and puts it in the page in the order I want it. For your reading pleasure (or confusion?), here is the actual loop from the template:

<?php while ( have_posts() ) : the_post() ?>
	<div class="testimonialPost group">
		<div class="testimonialThumbnail">
			<?php if ( has_post_thumbnail() ) {
				the_post_thumbnail('thumbnail');	// the current post has a thumbnail
			} else {
				get_thumbnail($post->ID, 'thumbnail', 'alt="' . $post->post_title . '"');
			}
			?>
			<div class="label">
				<div class="name">
					<?php the_title(); ?>	
				</div>
				<div class="company">
					<?php echo get_post_meta($post->ID, 'companyTitle', true); ?>
				</div>
			</div><!-- END .label -->
		</div><!-- END .testimonialThumbnail -->
		<div class="bigBubble">
			<?php the_content(); ?>
		</div><!-- END #bigBubble -->
	</div><!-- #testimonialPost -->
<?php endwhile ?>

The result is the display you see above. Note how none of the items contain a link to the actual post for that quote. The only way anyone will ever land on a single post view of the item is if they get there through a search engine or a lucky guess with a URL. And if they do they land on a custom post template, but that’s a whole different tutorial.

Displaying the excerpt from a random post on the front page

Now that the custom category template is in place and there are testimonials, the next step is to display the excerpt and the name and company affiliation of one person on the front page, and display a random one each time the page is loaded. For this we need to make a custom query on the front page. And for that we use the very useful query_post() function.

The query_posts() function allows you to dictate exactly what posts WordPress should poll when a certain action happens. In this case I created a query to go in a custom page template for the front page that did three things at once: Tell WordPress to only call one post, make that a random post, and call it from the testimonials category. Once the post is called I could run a standard loop on it. And when the loop is finished the code wraps up by resetting the query. You’ll notice in the code below that though the loop is different it is displaying roughly the same content as the previous code example:

<?php
query_posts('showposts=1&orderby=rand&category_name=testimonials'); 
	
	if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<div id="bubble" class="group">
			<div id="bubbleCenter" class="group">
				<?php the_excerpt(); ?>
			</div><!-- END #bubbleCenter -->
			<div id="bubbleBottom" class="group">
				<div class="name">
					<?php the_title(); ?>
			        </div>
				<div class="company">
					<?php echo get_post_meta($post->ID, 'companyTitle', true); ?>
				</div>
			</div><!-- END #bubbleBottom -->
		</div><!-- END #bubble -->
	<?php endwhile; endif;
 
wp_reset_query();
?>

The proverbial tip of the iceberg is right here

What I’ve done here is just a small taste of what you can do with some creative uses of custom category templates and queries. Using similar setups I’ve created photo galleries that poll Flickr sets, video galleries that show videos in lightboxes and even post galleries that show up as photo galleries using the Featured Image function. This is one of those times when the only limitation really is your imagination.

This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.