boosten.org

Page Templates in WordPress

If you used WordPress for a while, and dug a bit deeper in its ‘guts’, then you probably would have heard about the Template Hierarchy: it’s the way WordPress searches for the existence of certain templates in a theme.

A basic theme only needs two files: index.php and style.css. With these two files you can build an entire WordPress site. But themes most of the times exists of more templates, one for displaying single posts (single.php), one for displaying archives (archive.php), and also one for displaying pages (page.php). If you’re confused about the term page and post: posts are the articles that make the traditional blog, while pages display the more static information, like about pages.

Page Templates can be used to style pages totally different from others. But if you examine the hierarchy, you notice that WordPress first looks for pagename.php, whenever it wants to display a page. This means, that if I had an about.php file, I could style that totally different than all my other pages. What would I need Page Templates for then?

Suppose I had 5 writers on my site (which I haven’t, so I have to make up all the articles myself – if you want to write something as well, drop me a line), and I wanted the about pages of those writers to be differently styled than other pages, I could create 5 pagename.php files (which were basically the same, the only difference being the filename), which have to be maintained separately, if I wanted to have a consistent look and feel of these pages. Five files can be done, but what if I had 100 writers?

Here’s a perfect job for Page Templates: create only one (for writers), and apply this Page Template to the pages you want it applied to.

Let us create a Page Template. According to the WordPress Codex a Page Template needs some comments at the top, so that WordPress can recognize the file as a Page Template.

A ‘warning’ up front (just to let you enjoy the power of WordPress): I’m going to create some pages, attach Page Templates to them, and going to use Custom Fields as well. You might want to read up on Custom Fields in my previous articles (“Using custom fields in WordPress posts” and “Example uses of custom fields in WordPress“).

Second ‘warning’: If you’re going to follow my example, then it might put some extra menu options in your navigation bar, and confusing your visitors, so you might want to test this on a test site, not on your life site.

< ?php
/*
Template Name: Book Review
*/
?>

Save this file as page-book-review.php in your theme directory. Now you have a Page Template.

Create another one, called page-book-overview.php.

< ?php
/*
Template Name: Book Overview
*/
?>

Let me explain what I’m going to do: I want to create a page per book, and have that page display a picture of its cover, some information on the book (like author, ISBN, publisher), and have a small description of the book. The picture, author name, ISBN and publisher will be in a Custom Field, the description will go into the page. The title of the page will be the title of the book.

The Book Overview will show (clickable) pictures of all books, along with its title and author.

Disclaimer: I will copy the needed information from Amazon, not the be their competitor, but just for demonstration purposes. The pictures are downloaded from Amazon as well. I’ve not read any of these books

Now I’m going to create some pages in a hierarchy. The first page to create is ‘Books’, which will have no content, but will have a Page Template assigned to it (The Book Overview Template).

Now let us create some book reviews, which should be child pages of the Books page. I’ll demonstrate one, but you’ll get the picture. I will not focus too much on creating the Custom Fields.

You might notice a thing or two: I’ve changed the parent of this page to the Books page, created above (this kind of hierarchy keeps your pages organized), I’ve assigned the ‘Book Review’ Page Template to the page (which I’m going to do for all book reviews), and I’ve created some Custom Fields for author, ISBN, picture (called thumbnail) and publisher.

The result should be something like this:

Now we’re going to do the exciting stuff: actually style the Page Templates the way we want. I’m going to start with the overview page.

I want my Page Template to fit into my existing website, so I’m going to follow my current page.php for the layout.

< ?php
/*
Template Name: Book Overview
*/
?>
 
< ?php get_header(); ?>
 
<div id="inner-wrapper">
 
  <div id="content-single">
 	< ?php if ( (is_page('Books')) ) {
 
	  query_posts(array('showposts' => 100, 'post_parent' => 354, 'post_type' => 'page'));
 
       while (have_posts()) {
 
		the_post(); // vital
 
		$thumbPath = get_post_meta($post->ID, 'thumbnail', true);
 
		$thumbPath = "/wp-content/media/books/" . $thumbPath;
	?>
 
	<a href="<?php the_permalink(); ?>" class="grid-book">
		<img src="<?php echo $thumbPath ?/>" alt="" /><br />
		<span class="grid-title">< ?php the_title(); ?></span><br />
		<span class="grid-author">< ?php echo get_post_meta($post->ID, 'author', true); ?></span>
	</a>
 
	< ?php }
 
	  }
	?>
 
 
	</div><!-- end content-single -->
 
 
</div><!-- end inner-wrapper -->
 
< ?php get_footer(); ?>

What happened? The is_page(‘Books’) check is done to ensure that this page only displays when the Page Template actually is connected to the Books page. In fact I’ve done this because I wanted to use this particular Page Template for several categories (of which Books is one), but I will not elaborate on that topic (unless on special request).

I call the query_posts function with several options: ‘showposts’ will only return the first 100 records (in my example there are only 6, I want only the pages (post_type) of which the parent has ID 354 (in my case that’s the ‘Books’ page – you can easily find the ID of a page, or post, by hovering the mouse over the page in the admin panel and view the status line of your browser).

I do not want to display the page, therefore I do not call the the_content() function, but I want to query the Custom Fields thumbnail and author. That’s why I call the_post(), since this will give me access to everything I need.

The first Custom Field to query is thumbnail. Since I only filled that field with the filename, I have to tell WordPress (or your browser) where to find the actual image file, so I prepend it with its full path.

Next I embed the image, the title of the post, and the Custom Field ‘author’ in an anchor link to the actual page (the_permalink()).

I do this while I find pages that match my criteria.

The actual styling is done through css (this is personal taste, style it anyway you like):

/* Book reviews */
.grid-book {
        display: block;
        float: left;
        width: 150px;
        height: 200px;
        border: 1px solid #999;
        margin: 10px;
        text-align: center;
        text-decoration: none;
}
 
.grid-book img {
        border: none;
        height: 100px;
        margin: auto;
        padding: 10px;
}
 
 
.grid-title {
        font-size: 1.2em;
        color: #ff3355;
}
 
.grid-author {
        font-size: 1.0em;
}

The result of this can be viewed here: http://www.boosten.org/books/

Now on to the Page Template for the book review:

< ?php
/*
Template Name: Book Review
*/
?>
 
< ?php get_header(); ?>
  <div id="inner-wrapper">
    <div id="content-single">
      < ?php if (have_posts()) : ?>
 
        < ?php while (have_posts()) : the_post(); ?>
          <div id="book-info-col">
 
            <h3 class="post-title">< ?php the_title(); ?></h3>
            <p class="book-author">Author: < ?php echo get_post_meta($post->ID, 'author', true); ?></p>
            <p class="book-publisher">Publisher: < ?php echo get_post_meta($post->ID, 'publisher', true); ?></p>
            <p class="book-isbn">ISBN: < ?php echo get_post_meta($post->ID, 'ISBN', true); ?></p>
 
            < ?php the_content(); ?>
 
            <div class="clear"></div>
 
            < ?php edit_post_link('[edit page]', '<p>', ''); ?>
 
            </div><!-- end book-info-col -->
 
            <div id="book-pic-col">
 
              < ?php
 
               $thumbPath = get_post_meta($post->ID, 'thumbnail', true);
 
               $thumbPath = "/wp-content/media/books/" . $thumbPath;
 
               echo "<img src='$thumbPath' alt='' class='book-thumb' />";
 
              ?>
 
            </div> <!-- end book-pic-col -->
 
          < ?php endwhile; ?>
 
       < ?php endif; ?>
 
 
    </div> <!-- end single-content -->
   <div class="clear"></div>
  </div> <!-- end inner-wrapper -->
< ?php get_footer(); ?>

This looks actually like a normal page.php, except that I make some function calls to grab the Custom Fields. I will not go each and every call, since I think the example speaks for itself. Now some styling:

#book-info-col {
        width: 400px;
        float: right;
}
 
#book-pic-col {
        float: right;
        width: 400px;
}

To view these book reviews, just click on one of the books in the overview page.

This entry was posted on Friday, November 6th, 2009 at 8:45 pm and is filed under webpublishing. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.