HTML to WordPress Theme Tutorial: Step 2 – Creating Theme Template Files

HTML to WordPress Theme Tutorial: Step 2 – Creating Theme Template Files

Welcome back to this series showing you how to create your first WordPress theme from static HTML.

In the first part of this series, you took your static index.html file and converted it to a PHP file. You added some template tags and a loop. In this second part your file will start to look more like a proper theme – you’ll split it up into multiple files and start creating template files for different types of content.

Specifically, we’ll:

  • Split our index.php file into multiple files, creating a separate file for the header, sidebar and footer.
  • Create a file for the loop.
  • Create new template files for static pages, archive pages and single posts.

So let’s get started!

What You’ll Need

To follow along with this post, you’ll need a few tools:

  • A development installation of WordPress, preferably on your local machine.
  • A code editor.
  • The code you created in part one of this series – if you don’t have that, you can download the files I’m using.

Make sure you do this work on a development site, not a live site – you don’t want the world to see your theme until it’s ready.

Splitting up the index.php File

First we’re going to split up the file we created in part one, creating new files for the header, sidebar and footer.

Creating a Header File

Open up your theme folder if you haven’t already done so. Start by creating three new empty files:

  • header.php
  • sidebar.php
  • footer.php

Now open your index.php file. Find all the code from the beginning of the file to the close of the navigation menu:

Copy that code and paste it into your new header.php file. Then delete it from index.php.

In its place, I like to include some comments at the top of each template file to remind me what the file is. Here’s mine for index.php:

Below that, you need to add a call to the header file. Add this above everything else in your index.php file (apart from those comments):

Now save both your index.php and header.php files.

Creating a Sidebar File

Now for the sidebar. Find all of the code in your index.php file for the sidebar:

Copy that into your blank sidebar.php file and delete it from index.php.

Note: In the next part of this series, you’ll replace the static content here with a widget area.

Once again, you need to add a call to the sidebar. So in the spot where you deleted the sidebar code, add this to your index.php file:

Creating a Footer File

Last but not least, we’ll create a footer file. Find all of the code in index.php for the footer:

Note that this includes not only the footer element but the close of the main div, the closing body and html tags and the wp_footer hook – everything up to the end of the file.

Copy this into the new footer.php file and delete it from index.php. Then add the call to the footer right at the end of index.php:

Our file is now split into the main template file (index.php) and the three include files. This is a more efficient way to code your theme as it means that when we add new template files, you won’t need to add all that code for the header, sidebar and footer each time – and if you need to change those, you only do it once.

Creating a Loop File

Another piece of the code which appears in multiple files is the loop. Let’s separate that into its own file.

Create a new folder called includes, and inside that, create an empty file called loop.php. In your index.php file, find the code for the loop:

Copy that into your new empty file and replace it in index.php with this:

This will call the loop. Note that it’s a good idea to put your loop file into a subfolder as that helps keep things organised. We’ll be creating more loop files as we go along, all in that folder.

Our index file is now much smaller. It should look like this:

Note that it may look a bit odd because you’ve got some elements (e.g. the body and the main div) that open in one file and close in another. Don’t worry about this – you’ll get used to it once you’ve been working with theme files for a while!

Creating More Template Files

At present, our theme has only one template file – index.php. While that is sufficient for our theme to function, it will work better if we have some more. So let’s add them.

Creating a Template File for Static Pages

Make a duplicate of your index.php file and call it page.php. This will now be the template file that WordPress uses to display static pages. But right now, it’s identical. The changes we want to make are in the loop, so we’ll also need to create a new version of that.

Duplicate your loop.php file (inside the includes folder) and call it loop-page.php.

Now open your page.php file and find this line:

Edit it so it reads like this:

This uses the get_template_part() function to fetch the loop-page.php file. If that doesn’t exist, it’ll load loop.php.

It’s also a good idea to edit the comments at the top of your page.php file:

Now close page.php and open loop-page.php.

Delete the entry-meta div:

Now, in the page title, remove the link to the page – you don’t need this as anyone looking at content output by this file will already be on the page that it links to. Edit the title code so it looks like this:

Now save your loop-page.php file.

Creating a Template File for Archive Pages

Now make a copy of your index.php file and call it archive.php. This will display any archive pages including your main blog page and any category or tag archives as well as date archives.

Open the archive.php file to give it a title. Add that above an edited call for the loop file:

If you’ve been following along, you’ll know that means we need to create a new version of loop.php called loop-archive.php. Create that now, open it and edit it to change the h2 tags to h3 tags. Take out the comments section too. Your loop-archive.php file will look like this:

That will output your posts in archive pages using the correct hierarchy for your headings in HTML and without comments, which you don’t want in archive pages.

Creating a Template File for Single Posts

Finally, let’s create a template file for single posts. Duplicate index.php and call it single.php. Duplicate loop.php and call it loop-single.php.

Edit your new single.php file so it looks like this:

Then in the loop-single.php file, edit just the title to remove the link:

Now save all your files.

Now Our Theme Has Template Files

Our theme now has a number of template files and include files and is properly structured. If you want you can add additional template files according to the WordPress template hierarchy. You’ll find that you have all the loop files you need now, so if you add new template files, you can use those loop files. For example if you added a category.php file, you could call loop-archive.php.

In the next part we’ll move on to adding a navigation menu and widget areas, and get the functions file working properly.

How do you use template files in your themes? Let us know in the comments!
Rachel McCollin
Rachel McCollin Rachel is a freelance web designer and writer specializing in mobile and responsive WordPress development. She's the author of four WordPress books including WordPress Pushing the Limits, published by Wiley.