Using Template Files In WordPress

Oct 3rd, 2009 | By | Category: How-To

For some reason my clients always have weird requirements for pages.  Thankfully, WordPress has a way.  I remember reading a post on a forum recently where a user asked the question, “I created a Page and on that Page I want to list all posts in a specified category. How do I do this?”  Naturally, one user decided to tell the guy it was impossible and that he should just stick to the status quo.  This post is more for that doofus than it is for the guy who asked.

First, you need to know a few things about the way WordPress finds all the pretty things it displays.  If code makes you wince and or recoil in fear, first, grow up, and second, use the famous “cut, copy, paste” features we all know and love.

If you’re over it, we’ll move on…

The goal here is to list all the posts in a specific category on a page which you need to create.  Let’s take a useful example like a portfolio.  It could be a portfolio of images or words (or both).  The assumption here is that you won’t change the text at the top / bottom, or that there won’t be any, and that you have such a category with posts in it already.  This will make the process easier.

Either use a dev copy of your site, or backup before doing this stuff (or any stuff you read from some random stranger on the intertubes).

Open your favorite text editor (not Word) and create a file called portfolio.php (or whatever you want to call it) and make it look like this.

< ?php
/*
Template Name: Portfolio
*/
?>
<?php get_header(); ?>
<div id="content">

</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Notice that we have all the elements of a good PHP page here, but the thing WordPress cares about is the “Template Name: Portfolio” bit. Change this to whatever you want to call this template.

Next, we have to add a few scripty things to it to make it pull information from the database and display it according to what we’re after.  We’ll need a call to the database here.  We want to select only posts of a specific category, in this case the portfolio category.  For me, the portfolio category is 25, but you can find yours by clicking the edit link to your desired category in the category manager and looking at the last number in the URL.  The reason you want to use the category ID number instead of the name is, on the off chance that you change the name, your new page becomes useless.  The ID won’t ever change.

The ‘showposts=10’ thing is the maximum number of posts I want to appear on the portfolio page. Change that to whatever number you like, up to and including several thousand (though I don’t recommend that).  We follow up the query with a little “while” loop so that we can cycle through the results.

<?php query_posts('showposts=10&cat=25'); ?>
<?php while (have_posts()) : the_post(); ?>

At this point, we have a few choices to make.  Do we want to display everything, or just a few things?  As a portfolio, we’d likely want to display an image, be it a thumbnail or a full sized image.  We may want to display text, but we certainly want a link.  So, the variables (stuff) we have to work with are as follows:

  • the_permalink() – the permalink to the post in question
  • the_title() – the unbelievably clever title you gave your post
  • the_excerpt() – the excerpt that I know you’re using because it’s smart to do
  • the_thumbnail() – it’s…  well… the primary thumbnail image
  • the_images() – all the images in the post
  • the_content() – the body of your post

Since we’re not after content we can skip that, but we may want to make use of the excerpt to entice readers to click on the pretty pictures.  It’s up to you.  let’s use the bare minimum for this tutorial and just go with images and links (and titles for XHTML compliance).  We’re going to style this with divs, and you can make them look however you want by either using existing classes or writing new ones in your style.css file.  For now, they’ll be plain and however the browser wants to drop them.

<div> /* This DIV could be a SPAN or nothing depending on how you want it to display  */
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_thumbnail(); ?></a>
</div>

<?php endwhile; ?>

Putting it all together it should look like this:

<?php
/*
Template Name: Portfolio
*/
?>
<?php get_header(); ?>
<div id="content">
/* If you want to add a heading or text, do it here */
<?php query_posts('showposts=10&cat=25'); ?>
<?php while (have_posts()) : the_post(); ?>

<div>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_thumbnail(); ?></a>
</div>

<?php endwhile; ?>
/* If you want text below your gallery, do it here */
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

You can play with it and add more formatting, add text, or do whatever you want.  After you have it the way you want it, upload it to your active theme’s root directory then add a new page.  In the templates box at the bottom of the right column, you should see your newly created template as an option.  You need not add any text to the content block, simply save it as a draft or view it and you should see your portfolio as a cluster of clickable thumbnails.

Hit me with questions or comments (especially if I typo’d or left something vague).

Reblog this post [with Zemanta]
Be Sociable, Share!
Tags: , , ,

Leave Comment