Creating a WordPress Theme From Static HTML: Creating Template Files

In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used.

In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.

What You'll Need

For this tutorial all you'll need is the most basic tool for editing HTML and PHP:

  • A code editor of your choice.

What Are Template Files?

A WordPress theme consists of a number of template files. At the very least, a theme must contain two files for it to work, these are index.php and style.css.

However, in a well written theme, the contents of the index.php file will be split up into the main template file (index.php) and a set of include files. These are the files containing the code for the header, sidebar and footer.

In some themes, an additional include file is used for The Loop; I'll come to that in Part 4 of this series. The files are called include files because you add code to your index.php file to tell WordPress to include their contents.

Our index.html file will be split into four PHP files:

  • index.php, which will contain the main content plus the code to include the other files
  • header.php, which will include the <head> section plus everything in the header and navigation
  • sidebar.php, which will contain the sidebar widget area
  • footer.php which will contain (you've guessed it!) the footer, plus the closing </body> tag

Over the course of this series, you'll add to these files so that your theme can include widgets, menus and a loop, and you'll add hooks which will be used by plugins. You'll also add extra template files to display different types of content. If you want to get a head start on this, have a look at the Codex page on the WordPress Template Hierarchy.

But for now, all you're going to do is create a set of PHP files and split the contents of your index.php file to them.

Creating PHP Files

The first step is to create empty files. Create four blank files with the following names and open them in your code editor:

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

Make sure all of these are in a folder which has the name of your theme - in my case I'll name the folder 'wptutsplus-demo-theme'.

Copy your stylesheet into this folder, as well. You won't be editing it in this tutorial, but you will be doing so in the next part of the series.

Populating the Header File

Next you'll copy the top part of index.html into your header.php file.

Open index.html and select everything from the opening DOCTYPE declaration to the opening div class="main" tag:

Copy this code and paste it into your header.php file.

Save your new header file.

Populating the Sidebar File

Now repeat this for the sidebar.

In your index.html file, select the aside class="sidebar" element and everything inside it:

Now copy this into your sidebar.php file and save it.

Populating the Footer File

The process of populating the footer.php file is identical to the header and sidebar.

Select everything after the sidebar in your index.html file:

Copy it and paste it into your footer.php file.

Save your footer file.

You might be wondering why the .main div is closed in the footer file and not the sidebar. This is so that if you later set up a template file for pages which don't have a sidebar, you'll miss out the sidebar include in that template and keep the footer include, and the .main div will be closed correctly.

Populating the Index File

The final step is to set up your index.php file. This is slightly more involved, you'll have to add some PHP functions which WordPress uses to include the header, sidebar and footer.

Open your empty index.php file and add the code shown below:

Be sure to leave a space between the opening header include and the sidebar include, it's here where you'll add the contents of the index file which aren't in the header, sidebar or footer.

Now open your index.html file again and select all of the code between the opening div class="main" element and the sidebar:

Copy this and paste it into your index.php file below the get_header() line.

Save your index.php file.


You now have the beginnings of a WordPress theme. You've converted your HTML file to a set of PHP files and set them up to work together.

In the next part of this series, I'll show you how to edit the stylesheet to make your theme work, and upload your theme to WordPress.




Related Articles