WordPress Theme Lesson 13: Page Templates

One of the last things I’m going through in this tutorial is how you can create page templates for even more variability in your site. If you’ve ever needed or wanted to code a single page doing or showing something else than the default pages we’ve looked at up to now, page templates is a way to go.

In this lesson we’ll create two page templates. We will create an archive page (different from the default archive page, archive.php), which on a single page lists all posts in a short form, and below displays tag clouds – one for categories and one for tags. This gives the reader easy access to all information on your site, and is a good example for using in your search results or 404 error templates. The second page template we will create is an example of a front page for our blog, which displays a different featured posts slider than we created in the last lesson and some text. Many use a page template to create a different front page, as opposed to the traditional listing of recent posts. In both page templates we will go full-width, skipping the sidebar. As default all of our pages or posts displays the sidebar, so we can simply tell our page templates to skip the sidebar instead of modifying our existing theme files.

By now you should know that pages are different than posts in WordPress. Pages, which cannot be assigned categories or tags but can be organized hierarchically, are aften used for static content. But whereas we can’t assign templates to posts, we can do so with pages.

The page template selector

The process of assigning a page template to a page is pretty easy. When you edit a page in WordPress admin, to the right you’ll find the box “Page attributes” below the “Publish” box. From here you can choose templates from the “Template” dropdown. But the dropdown is only visible if your theme contains one or more page templates. We haven’t created any page templates in our theme, so the dropdown is not visible when we edit pages with our theme active.

In a page template you can basically do anything. You can choose to skip the sidebar, use a different footer, give it a whole different look by using a different HTML structure and styles, write a different loop, skip to include the title or content in the page assigned to the template, or choose to print some of it. It’s up to you.

The Basics of Creating a Page Template

Creating a page template is as simple as creating a file in your theme folder, and in the file add a line of code enclosed in comments to tell WordPress that this is a page template by giving it a name.

But first there’s a couple of things you should know about when it comes to naming your page template files. Page template files can be named anything you want, but must not have the same name as one of WordPress’s reserved file names. Also, the page template name can not have the same name as any of your WordPress’s page slugs. For instance if you have a page with the title “About”, its slug probably is “about” (you can find the slug just below the title in Edit Page). If you create a page template named about.php, you will achieve an 404 error or experience pagination errors. The best you can do is prefixing the page template files with your theme’s slug, thus making sure the names are not conflicting with anything else.

The lines of code required for WordPress to recognize your file as a page template are:

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

Always place this PHP piece of code on top of all your page templates. That’s it! The given name appears in the Template dropdown in Edit Page.

Let’s begin with the first of our two templates, the full-width special archive page.

Creating a Full-width Archives Page Template With Tag Clouds

First of all, we want a full-width page, meaning no sidebar. How do we do that? Simple, we simply skip writing get_sidebar(). We also use some different <div> wrappings so we can style the full-width container properly.

The title and page content we fill in Edit Page in WordPress admin are irrelevant in this template, we choose not to display them. We will also defer using the loop (containing the single page) WordPress provides us, instead we will create a custom loop fetching all published posts. Then we use WordPress’s built-in function for displaying tag clouds – one for categories and one for tags.

Create an empty file in your theme folder, and call it wpthemetutorial-fullarchives.php.

wpthemetutorial-fullarchives.php:

<?php
/* 
Template Name: Full-width Archives
*/
get_header(); ?>
				
	<div id="content-full">
		<?php
		$debut = 0;  //first post to be displayed
		$numposts = $wpdb->get_var("SELECT count(*) FROM $wpdb->posts WHERE post_status = 'publish' AND post_type = 'post'");
		if (0 < $numposts) $numposts = number_format($numposts); ?>
		<h2><?php echo $numposts; ?> posts in this blog since October 19 2009</h2>
		<ul id="archive-list">
			<?php
			$myposts = get_posts("numberposts=-1&offset=$debut");
			foreach ($myposts as $post) { ?>
			<li><?php echo the_time('d.m.Y'); ?>: <a href="<?php echo the_permalink(); ?>"><?php echo the_title(); ?></a></li>
			<?php } ?>
		</ul>
					
		<h3 class="fullwidth-band">Browse Posts by Tag:</h3>
		<div class="tag-cloud"><?php wp_tag_cloud(array('taxonomy' => 'post_tag', 'number' => 0)); ?></div>
                    
		<h3 class="fullwidth-band">Browse Posts by Category:</h3>
		<div class="tag-cloud"><?php wp_tag_cloud(array('taxonomy' => 'category', 'number' => 0)); ?></div>
		
	</div>		
	
<?php get_footer(); ?>

After the page template name, we include the header and define a different content-wrapping <div> as to style it full-width. Then, we create a SQL query to the WordPress posts-table counting how many posts we have (the SQL query is not used for fetching posts). We only count posts, not pages, and only posts that are published. The number is used in the title, stating the total of posts published. I’ve written the date I installed my local WordPress so you should replace the date with a date that fits for you or skip it.

Then, in a list, we fetch posts using get_posts(). The crucial argument numberposts=-1 makes WordPress return all posts regardless of pagination limits. The $offset makes sure we start offsetting at the first post. For each post we print the date it was created with its title, linking to the post.

After the loop we look into tag clouds. Luckily creating tag clouds is pretty simple with WordPress function wp_tag_cloud(). We provide the taxonomy type as argument, which can be either category or post_tag (or a custom taxonomy, but that’s beyond this tutorial). Setting the number to 0 will dispay all tags or categories, not limited to WordPress’s rule of showing a maximum of 45 most used tags.

Go to WordPress admin and add or edit one of your pages, and select “Full-width Archives” in the Template dropdown. Save, preview your page and you are looking at pretty much all content in your blog gathered in one full-width page. It doesn’t look any good though, so let’s add some styling in our style.css to make it look like my screenshot to the right (unpixelated obviously). Click here to download the image used below, unzip and put it in the images folder.

style.css:

/*** FULL WIDTH ARCHIVE ***/
#content-full {
	width: 780px;
	margin: 0 auto;
}
h3.fullwidth-band {
	background: url("images/content-full-band.png") no-repeat top left;
	margin: 0 -30px;
	padding: 9px 10px 12px 35px;
	color: #DEE9F5;
}
ul#archive-list {
	list-style-type: none;
	padding: 10px 0 20px 0;
}
.tag-cloud { margin: 0 0 20px 0; }

WordPress Codex Function references:

Creating a Front Page Template

To close up on this tutorial, I decided to create a page template which utilizes much of what we’ve been through in this tutorial. We are to create a front page template with a title, a different slider than our featured posts slider, and some welcome text below. Instead of hard-coding the title and welcome text, we display the page’s title and content, making it easy to modify as we don’t need to edit the theme files. Although this front page isn’t according to our initial design, it gives you an idea of how you can make your WordPress installation look less like a blog and more like a site.

As for this page template I’ve chosen to use a different jQuery library than we used in our featured posts section, partly because we only want to display three posts with a different sliding effect, and partly to ensure that you remember how to include scripts properly in WordPress. The idea of the slider is to display three posts, with titles to the left, and the current post thumbnail on the right-hand side. For making this pretty we need to add a new image size, like we did in lesson 8.

When it comes to term with choosing which posts to display we could create a new category called something appropriate such as “Front page”, or we could use the Featured category we used in lesson 12. Another possibilty to choose which posts and thumbnails to display is using custom fields in the page assigned to the front page template – but we haven’t been through custom fields in this tutorial so I’ve chosen to fetch the three recent posts from our existing Featured category.

Since we’ve been through most of this before, I won’t explain in details what we’re doing, refer to previous lessons if you get stuck.

First, we add our new image size in our functions.php (remember to generate thumbnails afterwards):

functions.php:

add_image_size('frontpage-template-thumbnail', 400, 260, TRUE);

Next, we enqueue the necessary javascript libraries. The jQuery library we are to use, jQuery UI Tabs, is inside the jQuery UI library. The jQuery UI library is included with WordPress, which means we only need to enqueue it. So Tabs’s dependencies are jQuery UI and then the jQuery core library. Find our existing function wpthemetutorial_add_js() in functions.php, where we registered and enqueued the jQuery Tools, and add this line of code right below the enqueuing of jQuery Tools:

functions.php:

wp_enqueue_script('jquery-ui-tabs', null, array('jquery-ui-core', 'jquery'));

We need to initialize Tabs by calling the function tabs() on the element we want to activate Tabs onto. We do this in the <head> tag inside a jQuery(document).ready() function. We added this in lesson 12 when initializing jQuery Scrollable and Navigator, and we can add Tabs in the same function. In functions.php find our wpthemetutorial_add_init_js() function, and inside the jQuery(document).ready() function, add this line after the initialization of Scrollable:

functions.php:

jQuery("#tabs").tabs().tabs('rotate', 5000);

Now all that’s left is to actually create the page template.

Create a new file in your theme directory, and name it wpthemetutorial-frontpage.php.

wpthemetutorial-frontpage.php:

<?php
/*
Template Name: Front Page Template
*/
get_header(); ?>
<div id="content-full">
	<h2 class="frontheading"><?php the_title(); ?></h2>
	<div id="tabs">
		<ul>
			<?php
			$my_query = new WP_Query('category_name=Featured&posts_per_page=3');
			$counter = 0;
			while ($my_query->have_posts()) : $my_query->the_post(); ?>
			<li><a href="#tabs-<?php echo $counter++; ?>"><span class="capitalize"><?php the_title(); ?></span><?php the_excerpt(); ?></a></li>
			<?php endwhile; $counter = 0; //reset counter ?>
		</ul>

		<?php 
		$my_query = new WP_Query('category_name=Featured&posts_per_page=3');
		while ($my_query->have_posts()) : $my_query->the_post(); ?>
		<div id="tabs-<?php echo $counter++; ?>">
			<?php if (has_post_thumbnail()) { the_post_thumbnail('frontpage-template-thumbnail'); } ?>
		</div>
		<?php endwhile; ?>
	</div>

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="fullwidth-text">
		<?php the_content(); ?>
	</div>		
	<?php endwhile; endif; ?>			
</div>
<?php get_footer(); ?>

This code prints the title, excerpt and post thumbnail to the three most recent posts in the Featured category, along with some HTML tags necessary for jQuery Tabs. Below we have the normal loop which contains the page, and from that we print its content. Finally, to make it look good we need some styling. In our style.css add:

style.css:

/*** FRONT PAGE ***/
h2.frontheading { padding-bottom: 15px; font-size: 22px; }
.fullwidth-text { padding: 10px; }
.capitalize { text-transform: uppercase; font-weight: bold; }
.fullwidth-column {
	width: 350px;
	float: left;
	margin: 5px 30px 0 0;
}

/* Jquery UI tabs */
.ui-tabs .ui-tabs-hide { display: none; }
#tabs {
	font-size: 11px;
	border: 1px solid #dadcde;
	background-color: #ffffff;
	margin-bottom: 10px;
	position: relative;
	height: 300px;
}
#tabs ul.ui-tabs-nav {
	list-style: none outside none;
	left: 20px;
	top: 20px;
	position: absolute;
	width: 315px;
}
#tabs ul.ui-tabs-nav li {
	border-bottom: 1px solid #bbbbbb;
	height: 85px;
}
#tabs ul.ui-tabs-nav li:last-child { border: none; }
#tabs ul.ui-tabs-nav li a {
	display: block;
	padding: 10px;
	height: 65px;
	line-height: 22px;
}
#tabs ul.ui-tabs-nav li.ui-tabs-selected a { background-color: #697f9a; color: #FFFFFF; }
#tabs ul.ui-tabs-nav li.ui-tabs-selected a:hover { background-color: #697f9a; color: #FFFFFF; }
#tabs ul.ui-tabs-nav li a:hover { background-color: #e3e6e8; }

#tabs .ui-tabs-panel {
	height: 260px;
	position: absolute;
	right: 20px;
	top: 20px;
	width: 400px;
}

Finally the page template is ready to be used. Edit or add a page and assign the template “Frontpage” to it. Add the text you want displayed below the featured posts and preview the page.

You may have noticed I’ve added styling for a <span> or <p> with the class fullwidth-column in the CSS above. If you switch to HTML view in the editor, you can add some HTML elements with those classes around the text to make the text divide into two columns. There are several solutions to modify the layout of the text written in the editor, but that’s beyond this tutorial. This was just an example of making the page more pleasing to look at.

If you want to use this page as the front page of your WordPress site, you need to do some settings in WordPress. Go to WordPress admin » Settings » Reading, and choose “A static page” at “Front page displays”, then choose your page in the dropdown-list. You’ll need another page for the normal loop of recent posts. If you save and refresh your front page, it should display the page template you’ve just made. But I strongly advise adding more to this page template, e.g. a menu or sidebar, as it totally lacks navigation to the rest of the site!

WordPress Codex Function references:

This concludes Lesson 13 of the WordPress Theme Tutorial. Go to the next lesson, Finalizing Your Theme.