The first thing that we'll cover in this chapter is creating a simple page template. This recipe shows the specific markup that you need to include in a PHP file in order to make sure that WordPress recognizes it as a page template. In addition, we'll demonstrate how to choose a page template when creating a page. When you get to the end of this recipe, you'll be fully equipped to create and use new page templates with your custom themes.
Getting ready
To properly use the techniques in this recipe, you'll need to be working with a theme that you previously acquired or developed. If you haven't started developing a custom theme yet, I recommend using the Thematic theme. It can be freely downloaded from the WordPress.org Theme Repository at http://wordpress.org/extend/themes/thematic/.
How to do it...
To create a custom page template, you start by creating a single file. In general, the filename should be descriptive of its content or purpose and should clearly delineate it as a page template. Open your theme's directory and create a new file called hello-world-page-template.php.
Next, you need to add the appropriate markup that lets WordPress recognize the file as a page template. Open the file that you just created (hello-world-page-template.php) for editing, and insert the following code at the very top of the file:
<?php /*
Template Name: Hello World
*/
?>
If you've worked with PHP before, you'll immediately recognize this as a standard comment block. Inside of the comment block is a specially-formatted string that tells WordPress that this is a page template. We'll go over the details of how WordPress works with this file later,
For the sake of remaining simple, this page template will only display a simple string. Directly after the piece of markup that you added earlier, insert the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Hello World!
</title>
</head>
<body>
<h1 style="text-align:center;">Hello World!</h1>
</body>
</html>
This simple piece of markup defines a standard HTML document with appropriate head and body elements. Inside of the body is a single heading element that reads Hello World!. Save your file at this point to make sure that WordPress will be able to detect it for the next few steps.
Pat yourself on the back! You've just created your first custom page template. Although it may be simple, the new page template will serve well for demonstration purposes. Now you just need to see it in action, by creating a new page.
Open the WordPress administrative area, and navigate to the Add New Page interface. Once there, add a title of some sort (it doesn't matter what, but you need to have a title). Next, locate the Attributes meta box. It looks like the following:
As you can see, this meta box allows you to change the page template for the page that you are editing. Select the page template Hello World from the drop-down menu underneath the Template heading.
If you can't find the Attributes meta box, then it may be hidden from the screen. At the top right, click on the Screen Options link and make sure that the checkbox next to Attributes is selected.
After selecting the appropriate page template from the drop-down menu, publish your page by clicking on the Publish button in the Publish meta box. After a few brief moments, your page should refresh, and you'll be greeted with a View Page link at the top of the screen. Click on this link and your browser will navigate to and display your new page, showing off your custom page template. Your page should look like the example shown in the following screenshot:
How it works...
You created a simple page template that displays the text Hello World!, and immediately after creating your new file, WordPress made it available as an option in the Template drop-down menu in the Attributes meta box. How did WordPress know about your new page template and how did it know to display it for your newly created page?
It all starts with the comment header that you added at the very beginning of this recipe. That header looked like the following:
<?php /*
Template Name: Hello World
*/
?>
When it comes down to it, this header is the only thing separating your custom page template from any other WordPress template file. When you visit the Edit Page interface in the WordPress administrative area, the Attributes meta box dynamically populates the Template drop-down menu by following a multistep process.
First, a list of all files contained in the currently-active theme's directory is generated and returned from the get_current_theme function. Next, WordPress iterates over each file, reading its contents and attempting to find the Template Name: header. If such a header is found in a file, then the file is stored as an available page template that can be chosen from the drop-down menu on the Edit Page interface.
Once a page has been saved, the selected page template is stored as a meta item for the post, with a key of _wp_page_template. When WordPress displays a page, it checks to see if a custom page template was selected. If so, then WordPress attempts to fetch and display the specified template file. If that file cannot be loaded for some reason, WordPress reverts to the default display hierarchy.