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:
The following screenshot shows a simple overview of what these templates might look like in a finished theme design.
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 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
- Defines some basic HTML for the structure of our future content.
- Uses the WordPress function get_footer() to load the
Don’t worry if you don’t understand those PHP functions. You’ll learn more about them in the next tutorials.
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.
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.
The footer template should close out all open HTML tags that were opened in the header template.
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
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
Type the following code in your
<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
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.
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.