How to Convert HTML Templates to WordPress Themes

Although web technology has come a long way, there are still websites created solely with HTML. If you happen to own one of them, you might be wondering how you can convert an HTML template into a WordPress theme.  

Fortunately, you have several options at your disposal, if you want to convert those HTML files over to WordPress. The techniques that are available range from hands-on manual conversions to partnering with experts who can handle all the heavy lifting. 

In this article, we’ll cover four different approaches to HTML template conversion. For each, we’ll provide instructions and resources that can help you bring an HTML-based website into the WordPress fold. There’s a lot to cover, so let’s dive right in!

Converting HTML to a WordPress Theme Manually

The first option when it comes to conversion is the manual approach. Since this is a pretty hands-on process, you’ll need to make sure you have access to the files for both your original website and your new one.

Typically, you’ll use a Secure File Transfer Protocol (SFTP) application for this purpose. Once you’ve accessed your website, you can proceed with the following steps.

Step 1: Create a Theme Folder

First, you’ll need to create a folder to hold your new theme files, and label it with your new theme’s name. Using your code editor, you can then create five specific files: 

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

For now, you can just leave these files blank, and save them to the folder you just created. 

Step 2: Copy and Paste Your Existing CSS

Your next priority is to customize the Cascading Style Sheet (CSS) file. This is where you’ll outline all the different style elements for your site.

At the top, it’s good practice to add some information about the file. In fact, when it comes to WordPress, there are some elements that are required in order for the theme to be featured in the Theme Directory. 

Below that information, you’ll then want to paste in any existing CSS styles from your original website that you want to carry over to your new theme. 

Step 3: Separate Existing HTML

In your original website, the HTML code that designates your header, footer, sidebar, and main content areas are all likely to be in your index.html file. Now, you’ll need to portion out each of those elements into the new files you’ve created for your WordPress theme. 

For example, in your original website’s index.html file, you can locate the first <div> tag with the class ‘main’. Everything that precedes this tag can then be copied and pasted into your new header.php file.  

You’ll then repeat this process for the ‘sidebar’ and ‘footer’ tags. Copy the code contained in each of those elements, and paste it into the respective PHP files. 

Now, what you’ll have left is the primary portion of your index.html file. This is what makes up the main content layout of your HTML-based website. You’ll need to copy this remaining code, and paste it into your new index.php file. 

Step 4: Configure Your Index.php File

Your next step is to make sure your new index file can locate the files necessary to enable your theme to display your site’s structure and style. To achieve this, you’ll use WordPress template tags. These are used to tell the theme to retrieve the header, footer, and sidebar files. 

For example, you can have your template display the header file you created by using the following tag: 

get_header(); 

You’ll place this in your index.php template file, or on subsequent pages where you want the header to appear. The same applies to your footer. 

There’s another important part of your new template that you’ll need to understand as well. This is called the WordPress loop – a snippet of PHP code that tells the template to pull in posts. It can also be customized to control how many posts are displayed. 

Step 5: Upload Your New Theme

Now that your new theme is ready for action, you’ll need to place its folder into the wp-themes/content/ directory for your website:

Once you’ve uploaded the files, you can log in to your WordPress dashboard and navigate to Appearance > Themes. Here, you should see your new theme listed and be able to click Activate and start using it. 

Importing HTML Content to WordPress Theme With a Plugin

Another way to handle this process is to use a plugin to transfer content from your old, HTML-based site. Unfortunately, there are very few tools available that are compatible with recent versions of WordPress. You can check out a free trial of WP Site Importer, however: 

This plugin can scan your entire website and catalog the content that’s movable. It works best if your HTML is well organized and “clean” to start with. You’ll also be able to import content such as menus and links.

Importing HTML to WordPress Using a Child Theme

Another way to move your HTML site into WordPress is with a child theme. This has the same base functionality and style as its parent theme, but you’ll be able to preserve any tweaks and customizations you make, even if you update the parent.

Step 1: Choose a Theme

There are many well-built, free themes to choose from in the WordPress Theme Directory. Once you select one you like, you’ll need to install it so that its files will be available in your website’s file directory:

You don’t need to activate this parent theme, however.

Step 2: Create a Folder for Your Child Theme

Next, you’ll need to access your files with an FTP application, and create a new folder in your wp-content/themes directory. This file should have the same name as your parent theme, with “-child” added to the end.

For example, if you’re going to create a child theme for Twenty Nineteen, you can create a folder called twentynineteen-child:

This setup means that your child theme will be able to pull functions and styles from the parent theme automatically, once you set up the rest of the necessary theme files. 

Step 3: Set Up a Style Sheet

Your next step will be to set up your style.css file. WordPress requires some specific information in the style sheet to make the parent-child theme relationship work. You can also paste in additional styling information from your original HTML files if needed.

Step 4: Set Up a Function.php File

Now that you essentially have two themes you’re working with, you’ll need to tell WordPress that your child theme is dependent on the parent’s CSS. For that, you can use the wp_enqueue_style() PHP call. 

You’ll first create a function.php file, and place it in your child theme’s folder. This is the file where you’ll execute the enqueue function that spells out the theme dependencies and hierarchy. 

Step 5: Activate Your Child Theme

Once you’ve uploaded these new files to your website’s server, you can head back to your WordPress dashboard and navigate to Appearance > Themes. There, you should now see your child theme all ready to go.

Click Activate on your child theme to set it as your website’s theme. Then you’re ready to begin copying your HTML website content into your new WordPress site. 

Use a Paid Service to Bring Your HTML Content to WordPress

If you don’t have the time or resources to carry out a conversion yourself, you can also check out a conversion service. Additionally, if you need more resources or assistance with migrating other WordPress content, here at WP Engine we offer many solutions and resources for migration and conversion. 

1. HireWPGeeks

HireWPGeeks is a full-service conversion option. It will handle all the heavy-lifting, and you’ll end up with a flexible, responsive, theme-based WordPress website that’s complete with all your content. You’ll have to contact the company for a quote, but you can plan on its services starting at $89.

2. FantasTech Solutions

FantasTech Solutions is another HTML-to-WordPress conversion service. It advertises highly-professional conversions from HTML into high-end, well-coded WordPress theme templates. You’ll want to keep in mind that the costs begin at $297 for one page. Additional pages start at $147 each, with exact pricing depending on complexity. 

Customize Your HTML to WordPress Experience With WP Engine

It might seem like a big undertaking, but converting your HTML website over to WordPress can open up many other opportunities. With this highly-flexible and extensible platform, you’ll become more agile and able to deploy new content quickly. 

Here at WP Engine, we believe the right developer resources can make a huge impact on your projects. In addition to industry-leading WordPress hosting, we offer plans and pricing tiers for any budget!