Converting HTML to WordPress (Step-by-Step)

Comments · 109 Views

Part 2
If the above seems too intense for you, the next method might be more manageable. It allows you to take advantage of thousands of existing WordPress themes while still retaining your original design.

B) HTML to WordPress via WordPress Child Them

 

That’s by using a so-called child theme. These themes are built on top of another theme (the parent) that don’t stand on their own but merely modify the parent theme to fit your needs. Easy enough to do though it takes a bit of detective work.

1. Pick a Suitable Theme

The first step is to pick a suitable theme to base your design on. For that, it helps to find a theme that is close to your existing design or use a theme framework or a starter theme, which both are made to work as a base for custom themes.

Check the WordPress theme directory, our list of awesome themes or look into premium themes to find a suitable candidate. After some searching, we decided that the Twenty Twelve theme would make a good starting point for my move from HTML to WordPress. Usually, we would pick something more up to date, but it goes well with the simple design we’re working with.

Once you have taken your pick, install the theme on your WordPress website like you would install any theme. No need to activate it. As mentioned, it’s just there to provide a base for you to work with. The rest happens in the child theme.

2. Create a New Folder

Similarly to the earlier method, for the child theme, you need to create a theme folder. Here’s where you will put all the files belonging to it.

When creating child themes, it’s common to call the folder the same name as the parent theme plus -child. So, since our child theme is based on the Twenty Twelve theme, we call its directory twentytwelve-child.

Whatever name you choose, just be sure not to include any spaces as it won’t work that way.

3. Set Up the Style Sheet

The child theme also needs a style sheet. This one will work almost the same as the style sheet created above. However, it has a slightly different header and will contain less code.

We will get to the second part later. For now, create the usual style.css and place it in the theme folder. Then, add the following:

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twenty fifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

As you can see, it’s very similar to the style sheet header you used before with one exception: it contains the Template tag.

In that section, you should put the name of the theme that will function as the parent. Without it, the child theme won’t work. To avoid this, input the folder name of the parent. So, for Twenty Twelve, that would be Template: twentytwelve.

4. Create Functions.php and Inherit Parent Styles

With just the style sheet and the folder, it’s already possible to activate the child theme. However, that wouldn’t do much good since right now your site would look like an HTML page without any styling.

To change that, you first need to inherit the parent’s styles and for that, you need functions.php. This file is an important part of any WordPress installation and allows you to make sweeping changes to your website.

However, in this case, you will only use it to call the parent’s styling. For that, create a new file and call it functions.php. The first thing you will add at the very beginning is this:

?php

With an opening PHP tag, the file is theoretically ready but it doesn’t do anything yet. So, additionally you will have to input this:

function child_theme_enqueue_styles() {
 
$parent_style = 'parent-style';
 
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()-get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

This piece of code tells WordPress to go to the template directory (aka parent theme) and use the styles included there. It also makes it possible to modify the theme via your child theme (more on that later).

5. Activate the Child Theme

At this point, the child theme is ready to be activated.

You can add a screenshot to it as in the instructions above if you want. Aside from that, you can either zip it up and add it to WordPress via Appearance Themes Add New Upload Theme or by simply adding the folder as is to wp-content/themes.

In both cases, when you activate the theme, your site should now look exactly like its parent.

6. Adjust the Design

Here’s where the aforementioned detective work begins. It’s now time to change the design of the existing theme so that it resembles your original HTML site.

For example, one of the first things that stand out is that our WordPress theme adds space above the header and below the footer that our HTML site doesn’t have.

 

To remedy this, we can look at the HTML site with our browser developer tools to find the markup responsible. When we do so, we encounter this:

body {
margin: 0;
}

Then, we do the same with my new WordPress theme where we find these styles:

body .site {
margin-top: 48px;
margin-top: 3.428571429rem;
margin-bottom: 48px;
margin-bottom: 3.428571429rem;
}

My objective is now to apply the styling from the HTML site to the WordPress theme. In this case, we can achieve this simply by adding the following to my child theme’s style.css:

body .site {
margin: 0 auto;
}

After saving, the WordPress theme has the new styles applied to it:

 

That’s because anything you add to the child theme’s style sheet overrides the styles in its parent. However, the rest of the markup stays intact, so you are only able to change the things that are relevant.

Plus, if you are using an HTML5 template as a starter and a modern WordPress theme as your parent, a lot of the basic markup will correspond, making your life much easier.

There’s a lot more you can do with child themes, which you can learn here. Once you are done adjusting the design, it’s time to import your content. Let’s get to that now.

C) Import Content from HTML to WordPress Using Plugin

Finally, on the list of moving from HTML to WordPress is using an existing theme as is and simply migrating your content from your HTML site into it. This is the simplest way – all you need to do is install and activate the theme of your choice (we assume you know how to do that by now) and then follow the steps below.

By the way, though this process isn’t super hard, there are things that can go wrong. For that reason, make sure you back up your WordPress site before going through with it.

1. Install the Import Plugin

The first thing you need to do is install the plugin HTML Import 2. The easiest way to achieve this is to go to Plugins Add New and search for it by name. When you find it on the list (it might be further to the bottom), click on Install Now. Activate it when it’s done.