How to Convert Your HTML Page to a WordPress Theme, Part I

Hi everyone, and welcome to Tubetorial. I’m Lorraine Nepomuceno.

Welcome to Part I of How to Convert Your HTML Page to a WordPress Theme. Today, I’ll be showing you how to take a simple HTML page, and begin converting it for use in WordPress.

Here, I’ve got my page. It’s a simple lay-out, as you can see. Now, the first thing I want to do is look at the code, and decide how to split it up for WordPress. The WordPress template system is actually very cool, because you can reuse different templates in your theme in different ways, and make changes only to specific templates without having to go through pages and pages of code.

So here, it’s quite clear that I’ve got my HEADER section, my CONTENT section, my SIDEBAR section, and my FOOTER.

I’m going to break it up now.

The HEADER code I’ll cut and paste into a new document, and save it as header.php – and I will do the same for the SIDEBAR and FOOTER sections.

I’m leaving the CONTENT section, because it’s going to form the basis for my index.php template.

Now, since index.php is what will be loaded by the browser, I want to “call” the different templates I just created from within it. So, I call header.php like so – and sidebar.php like so – and footer.php down here. When WordPress sees these calls, it will load the templates I specified. So you see, if I didn’t want to load the SIDEBAR in my index page- or in any other template- I could just not call it.

One more thing I want to show you today is your all-important stylesheet. This must be named style.css, it must be located in the same directory as your theme, and it MUST have the following text:

/*
Theme Name: My Theme Name
Theme URL: http://www.mydomain.com/
Description: My Theme
Author: Me
Author URI: http://www.mydomain.com/
Version: 1.0
Tags: fixed-width, two-columns, right-sidebar
*/

I’ll be delving deeper into these templates in Part II of this series. In the meantime, I highly recommend a visit to the WordPress Codex, specifically the More Info page of the Themes directory, and the Theme Development Checklist, for further reading.