Advertisement
Theme Development

Creating a WordPress Theme From Static HTML: Creating Template Files

by

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:

<!-- 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 class="sidebar" 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 div class="main" element 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.


Resources

Related Posts
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Adding Featured ImagesCreating wordpress theme from html 400
    You've now worked through a number of steps to create a WordPress theme from static HTML files. Specifically, we've looked covered the following: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages creating an archive template file. Your theme now has a template file for displaying archive pages, but at the moment it's not displaying images properly. In this tutorial, you'll learn how to add featured image support to your theme and how to display and style them in your archive template.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Creating a Page TemplateCreating wordpress theme from html 400
    So far in this series, I've shown you how to create a fully functioning WordPress theme from static HTML. We've covered the following steps: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file. At the moment, your theme only has one template file for displaying content—the index.php file. A powerful feature of WordPress is the ability to use template files for different kinds of content.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: The Footer FileCreating wordpress theme from html 400
    In this series, you've been learning how to create a WordPress theme form static HTML. Up to this point, you have: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu added widget areas to the header and sidebar. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Adding WidgetsCreating wordpress theme from html 400
    In this series, you've learned how to convert a static HTML file to a WordPress theme and edit the header file. So far you've: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Preparing the MarkupCreating wordpress theme from html 400
    Last year I did a small (and admittedly very un-scientific) survey among other WordPress developers. What I wanted to know was this: When they built their first WordPress theme, how did they do it? Did they hack an existing theme or did they start with their own static HTML and turn it into a theme? The majority of people I spoke to used the second approach - they were all experienced frontend developers who had built sites using HTML and CSS, and found it easiest to take their existing HTML files and convert them to a theme. Two of the people I spoke to were lecturers or teachers, and told me that this is the approach they use with students. So in this series I'm going to show you how to do just that.Read More…