September 28, 2011

Creating basic theme templates

Now that you’ve already learned how to set up a theme, you’ll need to learn how to structure a theme.

If you haven’t already done so, you need to read through the earlier posts in this tutorial series to do some catching up. From this point forward, you’ll be expected to know the lessons taught in previous tutorials.

Basic template structure

Most WordPress themes will have a few basic templates that define the overall structure of the theme:

index.php
header.php
footer.php
sidebar.php

The following screenshot shows a simple overview of what these templates might look like in a finished theme design.

Basic template structure of a WordPress theme

What are templates?

The term “template” can be a bit confusing, especially since it’s easily interchangeable with the terms “theme” and “skin.” In WordPress it means something different. A template in WordPress is a PHP file that is used for the display of content on the front end of the site.

For those of you familiar with creating HTML Web pages, you’re probably accustomed to creating a single HTML file and having it display all of the content on the page. In WordPress, each part of the page is broken into separate sections. The reason for this is that WordPress is a dynamic system, which runs an entire Web site rather than just a single page.

Having the templates separated allows you to re-use templates across different page views. For example, the header.php file contains all of the content the header of a site would display. Instead of creating many files with the same header information over and over, you can use a single file (template) to display this information on all pages.

index.php

The index.php template is the default template for displaying content (blog posts, pages, etc.) on a site. There are other files that can overwrite it, but you’ll learn about those in a later tutorial. For now, you’ll learn about its most important function: holding everything together.

When any page on a WordPress site is loaded, it looks for a template. In our case, this is the index.php template. It will be the template that’s expected to display the page.

In part 1 of this tutorial series, you created an empty index.php file. You need to open this file in your text editor. Type the following code in this file.

<?php get_header(); // Load the header.php template. ?>

<div id="content">

</div><!-- #content -->

<?php get_footer(); // Load the footer.php template. ?>

This code does several things:

Uses the WordPress function get_header() to load the header.php template.
Defines some basic HTML for the structure of our future content.
Uses the WordPress function get_footer() to load the footer.php template.

Don’t worry if you don’t understand those PHP functions. You’ll learn more about them in the next tutorials.

header.php

In the previous section, you used a PHP function called get_header() to load a template called header.php. Since this file doesn’t exist yet, you’ll need to create it. So, create a new file using your text editor called header.php and save it within your theme folder.

Remember, your theme folder’s name is super-mario, so the files in your theme should look like the following at this point.

super-mario
- header.php
- index.php
- style.css

Once you’ve created your header.php template, type the following code into it.

<!DOCTYPE html>
<html>
<head>

<title>Example</title>

<link rel="stylesheet" href="style.css" type="text/css" media="all" />

</head>

<body class="wordpress">

	<div id="container">

		<div id="header">

		</div><!-- #header -->

		<div id="main">

What the preceding code does is define a simple HTML structure for your header. Those of you familiar with basic Web pages and HTML, this should look familiar to you. There’s no PHP code involved at all at this point for the header. You’ll learn about that later.

footer.php

The footer template should close out all open HTML tags that were opened in the header template.

In the index.php section of this tutorial, you used the get_footer() function to load the footer.php template. Just as you did with the header template, create a new file with your text editor called footer.php and place it within your theme folder.

Now, type the following code into the file.

			<?php get_sidebar(); // Load the sidebar.php template. ?>

		</div><!-- #main -->

		<div id="footer">

		</div><!-- #footer -->

	</div><!-- #container -->

</body>
</html>

As you can see, these are mostly all closing HTML tags. You probably also noticed the PHP function call to get_sidebar(), which is a WordPress function for loading the sidebar.php template.

sidebar.php

A sidebar is a template in WordPress for displaying content in addition to the main page content. For now, you’ll just be building the basic HTML structure for a single sidebar.

Once again, crack open your favorite text editor. This time, create a new file called sidebar.php and place it within your theme folder alongside your new header.php and footer.php templates.

Type the following code in your sidebar.php template.

<div id="sidebar">

</div><!-- #sidebar -->

When do we get to the good stuff?

I know. I know. You’re really itching to make your theme actually do something. Remember, you need to learn to crawl before you can walk. It’s better to learn how some of the basic functionality comes together before you dive head first into more advanced things. You’ll get lost later without a solid foundation to build from.

In the next three tutorials, you’ll learn how to make your header.php, footer.php, and index.php templates display content from WordPress, so get ready. This tutorial series is about to get a little more complex. Therefore, you should feel good in knowing that you’re learning the basics now.

Downloads

If you want to see all of today’s lesson files, download a zip file of the theme. This version builds on the version from the previous tutorial, so there’ll be files included from that lesson too.