Using Template Files In WordPress

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

For some rea­son my clients always have weird require­ments for pages. Thank­ful­ly, Word­Press has a way. I remem­ber read­ing a post on a forum recent­ly where a user asked the ques­tion, “I cre­at­ed a Page and on that Page I want to list all posts in a spec­i­fied cat­e­go­ry. How do I do this?” Nat­u­ral­ly, one user decid­ed to tell the guy it was impos­si­ble and that he should just stick to the sta­tus quo. This post is more for that doo­fus than it is for the guy who asked.

First, you need to know a few things about the way Word­Press finds all the pret­ty things it dis­plays. If code makes you wince and or recoil in fear, first, grow up, and sec­ond, use the famous “cut, copy, paste” fea­tures 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 spe­cif­ic cat­e­go­ry on a page which you need to cre­ate. Let’s take a use­ful exam­ple like a port­fo­lio. It could be a port­fo­lio of images or words (or both). The assump­tion here is that you won’t change the text at the top / bot­tom, or that there won’t be any, and that you have such a cat­e­go­ry with posts in it already. This will make the process eas­i­er.

Either use a dev copy of your site, or back­up before doing this stuff (or any stuff you read from some ran­dom stranger on the inter­tubes).

Open your favorite text edi­tor (not Word) and cre­ate a file called portfolio.php (or what­ev­er 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 ele­ments of a good PHP page here, but the thing Word­Press cares about is the “Tem­plate Name: Port­fo­lio” bit. Change this to what­ev­er you want to call this tem­plate.

Next, we have to add a few scrip­ty things to it to make it pull infor­ma­tion from the data­base and dis­play it accord­ing to what we’re after. We’ll need a call to the data­base here. We want to select only posts of a spe­cif­ic cat­e­go­ry, in this case the port­fo­lio cat­e­go­ry. For me, the port­fo­lio cat­e­go­ry is 25, but you can find yours by click­ing the edit link to your desired cat­e­go­ry in the cat­e­go­ry man­ag­er and look­ing at the last num­ber in the URL. The rea­son you want to use the cat­e­go­ry ID num­ber instead of the name is, on the off chance that you change the name, your new page becomes use­less. The ID won’t ever change.

The ‘showposts=10’ thing is the max­i­mum num­ber of posts I want to appear on the port­fo­lio page. Change that to what­ev­er num­ber you like, up to and includ­ing sev­er­al thou­sand (though I don’t rec­om­mend that). We fol­low up the query with a lit­tle “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 choic­es to make. Do we want to dis­play every­thing, or just a few things? As a port­fo­lio, we’d like­ly want to dis­play an image, be it a thumb­nail or a full sized image. We may want to dis­play text, but we cer­tain­ly want a link. So, the vari­ables (stuff) we have to work with are as fol­lows:

  • the_permalink() — the perma­link to the post in ques­tion
  • the_title() — the unbe­liev­ably 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 pri­ma­ry thumb­nail image
  • the_images() — all the images in the post
  • the_content() — the body of your post

Since we’re not after con­tent we can skip that, but we may want to make use of the excerpt to entice read­ers to click on the pret­ty pic­tures. It’s up to you. let’s use the bare min­i­mum for this tuto­r­i­al and just go with images and links (and titles for XHTML com­pli­ance). We’re going to style this with divs, and you can make them look how­ev­er you want by either using exist­ing class­es or writ­ing new ones in your style.css file. For now, they’ll be plain and how­ev­er the brows­er 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 togeth­er 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 for­mat­ting, add text, or do what­ev­er you want. After you have it the way you want it, upload it to your active theme’s root direc­to­ry then add a new page. In the tem­plates box at the bot­tom of the right col­umn, you should see your new­ly cre­at­ed tem­plate as an option. You need not add any text to the con­tent block, sim­ply save it as a draft or view it and you should see your port­fo­lio as a clus­ter of click­able thumb­nails.

Hit me with ques­tions or com­ments (espe­cial­ly if I typo’d or left some­thing vague).

Reblog this post [with Zemanta]
Be Socia­ble, Share!
Tags: , , ,

Leave Comment