So far in this series, I’ve shown you how to create a fully functioning WordPress theme from static HTML.
We’ve covered the following steps:
- preparing your markup for WordPress
- converting your HTML to PHP and splitting your file into template files
- editing the stylesheet and uploading your theme to WordPress
- adding a loop to your index file
- adding meta tags, the
wp_headhook and the site title and description to your header file
- adding a navigation menu
- adding widget areas to the header and sidebar
- adding widget areas, a colophon and the
wp_footerhook to the footer file.
At the moment, your theme only has one template file for displaying content—the
index.php file. A powerful feature of WordPress is the ability to use template files for different kinds of content.
In this tutorial, I’ll give an introduction to template files and how you can use them, and then I’ll show you how to create the most common template file—
page.php—which is used for displaying static pages.
I’ll follow that by showing you how to create a second page template file for displaying full-width pages with no sidebar.
What You’ll Need
- your code editor of choice
- a browser for testing your work
- a WordPress installation, either local or remote
- If you’re working locally, you’ll need MAMP, WAMP or LAMP to enable WordPress to run.
- If you’re working remotely, you’ll need FTP access to your site plus an administrator account in your WordPress installation.
An Overview of Template Files
A WordPress theme can contain a variety of template files for displaying different content. These can include:
index.phpfile, which is essential for the theme to work and will be used by WordPress in the absence of a template file which matches the specific content type being displayed
page.phpfile, for displaying static pages (i.e. not posts)
single.phpfile for displaying single posts
archive.phpfile for displaying archives of posts – you’ll create one of those later in this series.
- template files for posts of a specific post type
- template files for posts in specific categories, tags or taxonomy terms
- archive files for archives of specific content types (categories, tags, taxonomy terms, post type listings, date listings, and so on)
For a full list of the templates, you can use in your themes and how WordPress chooses which one to use, see the Codex page on the Template Hierarchy or the interactive resource on the template hierarchy at wphierarchy.com.
1. Creating Your Page Template
The first step is to create the template file for your static pages.
In your theme folder, create a blank file named
Add the following to it:
This creates the basis of your file, with a call to the header, footer and sidebar include files in much the same way as in your
index.php file. Notice that I’ve also opened and closed the
div in the same way as in the
Note: You can also create a template file for pages without a sidebar, which won’t have the sidebar include. I’ll show you how to do this later in this tutorial.
2. Adding a Loop
Your page template won’t work without a loop to call the content of the page from the database.
#content div, add the following code: