Converting HTML to WordPress (Step-by-Step)

Comments · 90 Views

Part 1
The road from sites built with pure HTML to WordPress was not a short one. From an all-text experience, web design has moved on to a highly interactive web presence. In addition to that, we no longer have to write markup ourselves but can let content management systems do the he

 

The 3 Ways to Move from Static HTML to WordPress

 

A) Manually Convert HTML to a WordPress Theme

 

B) HTML to WordPress via WordPress Child Theme

C)  Import Content from HTML to WordPress Using Plugin

Obviously, if you don’t insist on using your current design and are open to changing it, things get even easier. In that case, all you need to do is set up a site, install the theme, and import your HTML content. As you will see below, this is a very quick and painless process.

A) How to Manually Convert HTML to a WordPress Theme

If your goal is to start from scratch and create your own WordPress theme that resembles your existing HTML website, start from here.

Don’t worry if it sounds intimidating, you’ll see that it is anything but. Just a few files and folders, as well as some copy and paste, is all it takes.

1. Create a Theme Folder and Basic Files

The first thing you need to do is create a new theme folder. You can do that on your desktop as you would for a directory on your computer. Name it whatever you want your theme to be called.

After that, go to the code editor and create a number of text files. Name them the following:

  • style.css
  • index.php
  • header.php
  • sidebar.php
  • footer.php

Don’t do anything with them yet, keep the files open in the editor. You will need them soon.

2. Copy Existing CSS to the WordPress Style Sheet

Now it’s time to prepare the WordPress style sheet (the filestyle.css you just created) to copy your old site’s CSS into it. For that, open the file and paste the following:

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twenty thirteen
 
*/

This is the so-called style sheet header (Important: don’t leave the comment tags out!). Fill in each part like this:

  • Theme Name — Here goes the name of your theme. It can be anything you want but it’s usually the same as the name of your theme folder.
  • Theme URI —  You would usually post the theme’s homepage here but you may use your own site address.
  • Author — That’s you. Put your own name here or whatever you want to be called.
  • Author URI — A link to your homepage. It can be the one you are building or whatever makes sense.
  • Description — An optional description of your theme. This will show up in the WordPress backend.
  • Version — The version of your theme. Since you are not publishing it, it doesn’t really matter. We usually put 1.0 here.
  • License, License URI, Tags — These things are only important if you are planning to submit your theme to the WordPress theme directory. You can leave them out in this case, we just included them for the sake of completion.

After the header, copy and paste the existing CSS from your static HTML website. Then, save the file in your new theme folder and close it. Time to move to the rest.

3. Separate Your Existing HTML

For the next part, you need to understand that WordPress usually uses PHP to pull information from its database. For that reason, you need to chop up your existing HTML into different pieces so that the CMS can put them together properly.

While this sounds complicated, all it means is that you copy and paste parts of your HTML document into several PHP files. To demonstrate this better, we have put together a simple example page that you can see below.

 

As you can see it’s very much a standard HTML template that includes a header, content area, a sidebar, and a footer. The accompanying code is this:

 

If your design is different, you might have to somewhat adjust the steps below. However, the overall process stays the same.

First, open your current index.html (your HTML site’s main file). After that, go through your newly created WordPress files and copy the following into them (the examples below are my markup):

header.php

Everything from the beginning of your HTML file to the main content area (usually signified with main or div class="main") goes into this file. In addition to that, right before where it says,/head copy and paste ?php wp_head();?. This is crucial for many WordPress plugins to work properly.

 
 

Now, save index.php file and close it. Well done! Your basic theme is ready. Now you can add it to your new WordPress site.

5. Create a Screenshot and Upload Theme

Now you will add a theme screenshot that, together with the information from your style sheet header, will serve as a preview of your website in the WordPress backend.

To do that, open your existing site in a browser and take a screenshot with your preferred method. After that, open the image editing software of your choice and crop it to 880×660 pixels. Save it as screenshot.png and add it to your theme folder. Now you are ready to upload your theme.

To get the new theme onto your WordPress site, you have several options. However, the prerequisite is that all files reside inside your theme folder.

The first option is to create a zip file out of it. After that, go to your WordPress site and then to Appearance Themes. Here, click Add New at the top and then Upload Theme.

 

In the upcoming menu use the button to browse to the location of your zip file. Mark it and click Open, then Install Now. When it’s done, activate the theme.

Alternatively, you can connect to your server via FTP (or just go to the local directory on your hard drive) and navigate to wp-content/themes. Then, upload your (unzipped) theme folder there. After that, activate the theme from the same place as before.

Nice! Your new site’s front end should now look like your old site. All that’s left to complete the move from HTML to WordPress is to import your existing content. We will cover this further below when talking about using an existing WordPress theme.

Be aware, however, that while the basic theme works now, there are more things you can do to integrate your HTML better with WordPress. This includes making your blog title and description editable, adding widget areas, comments, and much more. You might also have to add CSS markup because the content is not part of your original design like images.

As it is a lot of work, we personally like to use a solution that already has all that functionality and only needs a design change. That’s what we will show you next.