Dissection of a WordPress theme: Part 4

Page templates

Before we finish the theme it is worth discussing the WordPress concept of page templates. One of the key additions in WordPress 1.5 was the ability to have ‘pages’. A page is like a post, but is not placed within the normal post timeline.

An example of this would be a ‘contact me’ page, which does not depend on a particular time – you want access to the page regardless of when it was created.

Additionally, WordPress gives us the ability to create page templates. A page template is a mini-theme that can be assigned to any page. That is, you can design a template, using PHP and HTML, to display the page information in any way you want. This is a very powerful feature and allows us to extend WordPress far beyond its blogging roots.

A page template has one requirement: the file must contain a template header. An example is given below:

/*
Template Name: Archives
*/

WordPress scans the theme directory and detects all files with this header. These are assumed to be page templates, and are then accessible when creating a page:

Templates

If we look through the files in our theme we discover the following page templates:

  • archives.php
  • links.php

WordPress also has a default page template, which does not have the template header:

  • page.php

Default page template

The file page.php is the default page template. It displays the contents of the page with minimal extra information.

We need to update this file to include our wrapper element.

<?php get_header(); ?>
<div id="wrapper">
  <div id="content" class="narrowcolumn">

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <div class="post">
    <h2 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h2>
      <div class="entrytext">
        <?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
        <?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>
      </div>
    </div>
    <?php endwhile; endif; ?>

    <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
  </div>

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

<?php get_footer(); ?>

You will notice that the code contains The Loop, just like index.php and single.php.

Archives template

The archives template, contained within the file archives.php displays an archived list of posts for a particular time period. Note the plural filename – there is a similar file called archive.php, which has a different purpose.

Like everything else, we need to update this file to include our wrapper element.

 <?php
/*
Template Name: Archives
*/
?>

<?php get_header(); ?>
<div id="wrapper">
  <div id="content" class="widecolumn">

    <h2>Archives by Month:</h2>
    <ul><?php wp_get_archives('type=monthly'); ?></ul>

    <h2>Archives by Subject:</h2>
    <ul><?php wp_list_cats(); ?></ul>
    <?php include (TEMPLATEPATH . '/searchform.php'); ?>
  </div> 
</div>

<?php get_footer(); ?>

You will notice that this template does not display any information about the page itself. Instead it uses two WordPress functions to display monthly archives, and a list of categories. This is proof that a page can contain anything you want, and opens up the possibility of retrieving information that is entirely outside WordPress.

Links template

The file links.php is another page template and works similar to archives.php. Again we need to introduce the wrapper element:

 <?php
/*
Template Name: Links
*/
?>

<?php get_header(); ?>
<div id="wrapper">
  <div id="content" class="widecolumn">
    <h2>Links:</h2>
    <ul><?php get_links_list(); ?></ul>
  </div> 
</div>

<?php get_footer(); ?>

No page information is displayed other than a list of all links added through the administration panel.

105 comments

  1. Superb, Stunning and Diligent… I was just looking how to design a WordPress theme from my HTML template and this is one tutorial which was just perfect. Thanks for all the painstaking documentation. God Bless!

  2. Thank YOU!

    I thought I knew CSS but one look at the Kubrick style.css made wonder whether I really knew it. Anyway, that look was enough to put aside the theme redesign project I had in mind, particularly when I found that whatever changes I make to the stylesheet, the header had the same blue background. It was only when I went through your tutorial that I really was able to identify the problem and go to the Admin panel of wordpress.

    Your tutorial provided many more such insights into small details with big impact.

    Above all, it provided the confidence to start on the theme redesign project.

    Once again, Thank YOU!

Leave a comment

Your email address will not be published. Required fields are marked *