WordPress Tutorial: How To Create A WordPress Theme from HTML (Part 1)

If you started with an HTML ( + CSS) website, you don’t have to throw it all away when moving to WordPress. You can convert your HTML into WordPress and run your (now more powerful) website on the dynamic WordPress platform.

Or maybe that’s not the case. Perhaps you are just wondering how to convert a client’s HTML design into a fully-fledged WordPress theme. Or maybe you would like to learn basic WordPress (+ PHP) programming from the more-familiar HTML side.

Whatever the reason you are here today, this WordPress tutorial will introduce you to the basics of creating a WordPress theme from HTML. So, get a code editor (I use and recommend Notepad++, and SublimeText is another great option) and a browser ready, then follow this simple guide to the end.

Naming Your WordPress Theme

First things first, we have to give your theme a unique name, which isn’t necessary if you’re building a theme for your website only. Regardless, we need to name your theme to make it easily identifiable upon installation.

General assumptions at this point:

You have your index.html and CSS stylesheet ready.
You have a working WordPress installation with at least one theme e.g. Twenty Fourteen
You have already created a theme folder where you’ll be saving your new WordPress theme

Let’s get back to naming your WordPress theme. Open your code editor and copy-paste the contents of your stylesheet into a new file and save it as style.css in your theme folder. Add the following information at the very top of the newly-created style.css:

Do not leave out the (/*…*/) comment tags. Save the changes. This info tells WordPress the name of your theme, the author and complimentary stuff like that. The important part is the theme’s name, which allows you to choose and activate your theme via the WP dashboard.

Breaking Up Your HTML Template into PHP Files

This tutorial further assumes you have your HTML template arranged left to right: header, content, sidebar, footer. If you have a different design, you might need to play with the code a bit. It’s fun and super easy.

The next step involves creating four PHP files. Using your code editor, create index.php, header.php, sidebar.php and footer.php, and save them in your theme folder. All the files are empty at this point, so don’t expect them to do anything. For illustration purposes, I am using the following index.html and CSS stylesheet files:

INDEX.HTML

CSS STYLESHEET

You can grab both codes if you have nothing to work with. Just copy-paste them into your code editor, save them, create the four PHP files we just mentioned and get ready for the next part. Open your newly-created (and empty) header.php. Login into your existing WordPress installation, navigate to Appearance –>> Editor and open header.php. Copy all the code between the <head> tags and paste it into your header.php file. The following is the code I got from the header.php file in Twenty Fourteen theme:

Then open your index.html file and copy the header code (i.e. the code in the <div class= “header”> section) to your header.php just below the <head> tags as shown below:

Then add…

…anywhere between the <head> tags in the header.php file to link your stylesheet. Remember also to put the <html> and <body> opening tags in the header.php as shown above. Save all changes.

Copy the second section (i.e. <div class=”content”>…</div> from index.html to the newly-created index.php , and add…

…at the very top and …

…to the absolute bottom. These three lines fetch the header.php, sidebar.php and footer.php (in that order) and display them in the index.php, which puts your code back together. Save all changes. At this point, your index.php file should look like:

Then copy the content from the sidebar and footer sections in your index.html to sidebar.php and footer.php respectively.

Adding Posts

Your HTML template is about to morph into a WordPress theme. We just need to add your posts. If you have posts on your blog, how would you display them in your custom-made “HTML-to-WordPress” theme? You use a special type of PHP function known as the Loop. The Loop is just a specialized piece of code that displays your posts and comments wherever you place it.

Now, to display your posts in the content section of the index.php template, copy and paste the following code between the <div class=”content”> and </div> tags as shown below:

That will take care of your posts. Easy as ABC. At this juncture (and using the sample files provided in this tutorial), your header.php should look like this:

Your sidebar.php should look like this:

Your footer.php should look like this:

Did you notice the closing </body> and </html> tags in the footer?

Don’t forget to include those too.

Your style.css should look something like this:

And your index.php should look similar to:

Again – this is based on a left to right website with a header, content, sidebar, footer layout. Are you following? All the five files should be saved in your theme folder. Name the folder whatever you want and compress it into a ZIP archive using WinRar or an equivalent program. Upload your new theme to your WordPress installation, activate it and see your converted theme in action!

That was easy, right? You can style your theme however you want but most of the features we love in WordPress are still inactive since…this tutorial covers the basics of converting HTML templates into WordPress and should be of great value to you as a beginner. In the next tutorial, we will take things a notch higher and play around with other aspects of WordPress programming (such as Template Files and Template Tags) that will let you turn your HTML templates whichever way you like. Stay tuned!