Creating a WordPress Theme From Static HTML: Creating Template Files - Part 2

Tutorial Details

Software: WordPress
Difficulty: Beginner
Completion Time: 1 hour

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 theWordPress 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 tag:

<!-- add a class to the html tag if the site is being viewed in IE, to allow for any big fixes -->
<!--[if lt IE 8]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if gt IE 9]><html><![endif]-->
<!--[if !IE]><html><![endif]-->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>WordPress Theme Building - Creating a WordPress theme from static HTML</title>
    <link href="style.css" rel="stylesheet" media="all" type="text/css" />
    <header role="banner">
        <div class="site-name half left"><!-- site name and description  --></div>
        <div class="site-name half left">
            <h1 class="one-half-left" id="site-title"><a title="Creating a WordPress theme from static html - home" rel="home">WordPress Theme Building</a></h1>
            <h2 id="site-description">Creating a WordPress theme from static html</h2>
        </div>
         <!-- an aside in the header - this will be populated via a widget area later -->
        <aside class="header widget-area half right" role="complementary">
            <div class="widget-container">This will be a widget area in the header - address details (or anything else you like) goes here</div><!-- .widget-container -->
        </aside><!-- .half right -->
    </header><!-- header -->

    <!-- full width navigation menu - delete nav element if using top navigation -->
    <nav class="menu main"><?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
        <div class="skip-link screen-reader-text"><a title="Skip to content" href="#content">Skip to content</a></div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Latest news</a></li>
            <li><a href="#">Featured articles</a></li>
        </ul>
    </nav><!-- .main -->
    <div class="main">

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 element and everything inside it:

<!-- the sidebar - in WordPress this will be populated with widgets -->
<aside class="sidebar widget-area one-third right" role="complementary">
    <div class="widget-container">
        <h3 class="widget-title">A sidebar widget</h3>
        <p>This is a sidebar widget, in your WordPress theme you can set these up to display across your site.</p>
    </div><!-- .widget-container -->
    <div class="widget-container">
        <h3 class="widget-title">Another sidebar widget</h3>
        <p>A second sidebar widget, maybe you could use a plugin to display a social media feed, or simply list your most recent posts.</p>
    </div><!-- .widget-container -->
</aside>

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:

</div><!-- .main -->
<footer>
    <!-- the .fatfooter aside - I use this to enable a screen-wide background on the footer while still keeping the footer contents in line with the layout -->
    <aside class="fatfooter" role="complementary">
        <div class="first quarter left widget-area">
            <div class="widget-container">
                <h3 class="widget-title">First footer widget area</h3>
                <p>A widget area in the footer - use plugins and widgets to populate this.</p>
            </div><!-- .widget-container -->
        </div><!-- .first .widget-area -->
        <div class="second quarter widget-area">
            <div class="widget-container">
                <h3 class="widget-title">Second footer widget area</h3>
                <p>A widget area in the footer - use plugins and widgets to populate this.</p>
            </div><!-- .widget-container -->
        </div><!-- .second .widget-area -->
        <div class="third quarter widget-area">
            <div class="widget-container">
                <h3 class="widget-title">Third footer widget area</h3>
                <p>A widget area in the footer - use plugins and widgets to populate this.</p>
            </div><!-- .widget-container -->
        </div><!-- .third .widget-area -->
        <div class="fourth quarter right widget-area">
            <div class="widget-container">
                <h3 class="widget-title">Fourth footer widget area</h3>
                <p>A widget area in the footer - use plugins and widgets to populate this.</p>
            </div><!-- .widget-container -->
        </div><!-- .fourth .widget-area -->
    </aside><!-- #fatfooter -->
</footer>

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:

<?php get_header(); ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

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 divelement and the sidebar:

<div class="two-thirds" id="content">
    <article class="post" id="01">
        <h2 class="entry-title">This is the title of a post or page</h2>
        <img class="size-large" alt="" src="images/featured-image.jpg" />
        <section class="entry-meta">
            <p>Posted on 5 November by Rachel McCollin</p>
        </section><!-- .entry-meta -->
        <section class="entry-content">
            <p>This is the content of the post. On an archive page it might be an excerpt of the post or you might include the entire content.</p>
            <h3>Images in WordPress</h3>
            <img class="alignright" alt="" src="images/another-image.jpg" />
            <p>This post has some images included - once you've converted this html to a WordPress theme you'll be able to get WordPress to handle images for you and life will be so much easier!</p>

            <p>It also has a featured image - again, WordPress will handle these for you and you'll never go back to static html again. You'll learn how to add support for featured images to your theme in Part 10 of this series. You can use them to automatically display images in your individual posts and pages and in archive pages, you'll learn how to set up a custom archive page in Part 11.</p>
        </section><!-- .entry-content -->
        <section class="entry-meta">
            <h3>Post Categories and Tags</h3>
            <p>In this section you can display information about the categories and tags associated with your post, you'll learn how to do this using WordPress template tags in Part 4 of this series.</p>
        </section><!-- .entry-meta -->
    </article><!-- #01-->
</div><!-- #content-->

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

Save your index.php file.

Summary

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.

Download

Resources

The WordPress Template Hierarchy (Codex page)
Stepping Into Templates (Codex page)
Anatomy of a WordPress Theme (blog post by Yoast)
WordPress Theme Development Beginner’s Guide by Tessa Blakeley Silver and Rachel McCollin (yes, me!)