How to Convert HTML to WordPress

It seems like only a few years ago, we were left with little options to create a website – and with much less functionality too. Static HTML websites are becoming outdated and serve very specific purposes, so in this article, I’ll show you how to use an HTML to WordPress converter to move your site to this powerful content management system.

HTML vs. WordPress

Before you begin the process, you should be familiar with the differences between static HTML and WordPress.

As shown by most recent statistics, 33% of all websites around the globe are built on WordPress. That big of a user base means that WordPress isn’t going anywhere anytime soon – and you can always rely on it having the most up-to-date functionality and unparalleled support.

Furthermore, there are so many benefits of WordPress that you can’t miss out on, such as:

• Code-free content management. Coding knowledge is a must if you work on static HTML pages. It’s not the case if you use a CMS such as WordPress. With a graphical interface, it’s possible to create and publish content without touching a single line of code, lowering the barrier for entry and speeding up management.
• Easy to change the site appearance. With just a few clicks, you can change how your site looks in a matter of seconds. Not to mention, there are over thousands of themes for every kind of site that you can choose, both free and premium.
• Great versatility with many feature options. WordPress lets you extend the functionality of your site to your heart’s content. It has a massive library of plugins and installing one is a piece of cake.

Still, it’s worth noting that it doesn’t mean WordPress doesn’t use HTML. Most WordPress themes are pre-designed – the theme creator already wrote the HTML and CSS code so you can just install and enjoy. Everything is stored on a database, and it will put together the HTML files as requested by strings of PHP commands.

As for static HTML sites, everything that appears on a browser comes from a single HTML file (with an addition of one or more CSS or JavaScript files). That’s why it’s called “static.” If you want to change any element on your site, you must dive into the sea of code and figure out which line to change or hire a web developer. Meaning, it has a lot more hoops to jump through and requires lots of time to learn HTML and CSS.

For that reason, important aspects like SEO depend on your ability to code cleanly, following best practices, as opposed to WordPress that can use plugins to send across your inputted meta descriptions or keywords to the database.

Preparation for Conversion

There are a few things to prepare first before you can actually begin converting your HTML site to WordPress.

Same as a static HTML website, WordPress needs to be put on a hosting platform to be available online. If your existing hosting plan doesn’t support the necessary MySQL and PHP version for WordPress to work, you have to get another one that does. We recommend figuring out what’s the best WordPress hosting provider for your site’s needs. You can refer to the WordPress hosting requirements page for more information.

Plus, you’re going to have to use a text editor to make some changes in the HTML file of your website. Some of the best text editors that I suggest are Notepad++, Atom, Sublime, or Bluefish. But really, any text editor will get the job done.

Don’t worry, you won’t be doing a lot of manual coding here. Just copy and paste some snippets here and there and you’re golden!

With that out of the way, let’s take a look at the practical part of this tutorial.

3 Ways to Convert an HTML Website Into a WordPress Website

You have three different options to convert your HTML site to WordPress. One approach can be easier than the other and they all have pros and cons, so see which is right for you:

Manually Convert an HTML Site to WordPress

This is one of two methods that will allow you to retain the same theme you have from a static HTML page.

The idea behind this method is simple – you will have to break down the HTML site into a few different parts. That’s why a little knowledge of HTML and CSS can help a lot. But don’t worry, just follow my instructions carefully, and you’ll be fine. For this method, we won’t use an HTML to WordPress converter yet. While it’s longer, it will let you keep as much as your old site as possible.

1. Create the Necessary PHP and CSS files

So, for the first step, you need to create a few new files using your chosen text editor. Store all the files in one folder.

The files you need to create are style.css, index.php, header.php, sidebar.php, and footer.php. To create each file, just open your text editor.

Suppose you want to create the index.php file first, then type in the file name. Don’t forget to click the dropdown and select PHP Hypertext Preprocessor file as the file type as can be seen below.

Repeat the process until you have created all PHP files. Do the same for style.css, only remember to select the Cascade Style Sheets File type on the dropdown menu.

Now that you have created the necessary files, it’s time to fill them in with the content from your old HTML static page.

2. Move The Content of Your CSS File Into A New One

Remember the style.css you just created? The idea is to migrate the existing CSS file from your HTML site to WordPress.

To do this, insert the following code into the new CSS file.

/*
Theme Name: Insert the name of your theme here
Author: Insert Your Name
Author URI: Insert your website URL
Description: Insert the description 
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

You can change the information above with your own such as the theme name, author, description, etc.

Once you’re done replacing the details, open your old CSS file and copy all of its content. Then, paste it just below the CSS header. Save the file and close it.

3. Divide Your HTML File into Different Parts

As I mentioned before, WordPress makes use of strings of PHP commands to obtain data from a database and compiles it together into what you see on your browser.

So, what you have to do is pull each section of your HTML file (index.html) and move them into separate PHP files you created earlier (index.php, header.php, etc).

As an example, this is the HTML template I’m going to use.

Your goal is to maintain the likeliness of your template after it’s converted into a WordPress theme. Now, let’s open your index.html file. It will look similar to mine below. In this example, I removed some of the non-essential content from the body section, to make the viewing easier, all the key sections are still there.

<!DOCTYPE HTML>
<html>

<head>
  <title>textured_blue</title>
  <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
  <link rel="stylesheet" type="text/css" href="style/style.css" title="style" />
</head>

<body>
  <div id="main">
    <div id="header">
      <div id="logo">
        <div id="logo_text">
          <!-- class="logo_colour", allows you to change the colour of the text -->
          <h1><a href="index.html">textured<span class="logo_colour">blue</span></a></h1>
          <h2>Simple. Contemporary. Website Template.</h2>
        </div>
      </div>
      <div id="menubar">
        <ul id="menu">
          <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
          <li class="selected"><a href="index.html">Home</a></li>
          <li><a href="examples.html">Examples</a></li>
        </ul>
      </div>
    </div>
    <div id="site_content">
      <div class="sidebar">
        <!-- insert your sidebar items here -->
      </div>
      <div id="content">
        <!-- insert the page content here -->
        <h1>Welcome to the textured_blue template</h1>
      </div>
    </div>
    <div id="footer">
      Copyright &copy; textured_blue | <a href="http://validator.w3.org/check?uri=referer">HTML5</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.html5webtemplates.co.uk">Free CSS Templates</a>
    </div>
  </div>
</body>
</html>

You don’t have to try to make sense of all the code. Just select each section and move them to the corresponding PHP files.

Let’s start with header.php first.

Set Up the header.php File

The header section starts from the very top of your HTML file and ends before the main content of your site, which can be indicated by any one of the following tags.

• <main>
• <div class=”main”>
• <div id="site_content">

It depends on your HTML template. In my case, the opening element for the main content is <div id="site_content">. That means, for header.php, I need to copy all the content in the HTML file from the top to the main content element (don’t include this element). Plus, don’t forget to add the code <?php wp_head();?>right before </head>in order for WordPress plugins to work.

This is how it will look like.

<!DOCTYPE HTML>
<html>

<head>
  <title>textured_blue</title>
  <meta name="description" content="website description" />
  <meta name="keywords" content="website keywords, website keywords" />
  <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
  <link rel="stylesheet" type="text/css" href="style/style.css" title="style" />
  <?php wp_head();?>
</head>

<body>
  <div id="main">
    <div id="header">
      <div id="logo">
        <div id="logo_text">
          <!-- class="logo_colour", allows you to change the colour of the text -->
          <h1><a href="index.html">textured<span class="logo_colour">blue</span></a></h1>
          <h2>Simple. Contemporary. Website Template.</h2>
        </div>
      </div>
      <div id="menubar">
        <ul id="menu">
          <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
          <li class="selected"><a href="index.html">Home</a></li>
          <li><a href="examples.html">Examples</a></li>
          <li><a href="page.html">A Page</a></li>
          <li><a href="another_page.html">Another Page</a></li>
          <li><a href="contact.html">Contact Us</a></li>
        </ul>
      </div>
    </div>

That’s it. Just save the file and the header.php file is done. Let’s move on to the next part.

Set Up the sidebar.php File

Similar to before, you need to copy all the content from the whole sidebar section of your HTML file into this PHP file.

Each HTML theme may have different tags for the sidebar, so it should be one of these tags below:

• <aside class=”sidebar”>
• <div class=”sidebar”>

For me, it’s the second on the list. Select all content from <div class=”sidebar”>to its closing tag </div>. Copy and paste the code in the sidebar.php file.

<div class="sidebar">
        <!-- insert your sidebar items here -->
        <h3>Latest News</h3>
        <h4>New Website Launched</h4>
        <h5>August 1st, 2013</h5>
        <p>2013 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
        <p></p>
        <h4>New Website Launched</h4>
        <h5>August 1st, 2013</h5>
        <p>2013 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
        <h3>Useful Links</h3>
        <ul>
          <li><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
          <li><a href="#">link 3</a></li>
          <li><a href="#">link 4</a></li>
        </ul>
        <h3>Search</h3>
        <form method="post" action="#" id="search_form">
          <p>
            <input class="search" type="text" name="search_field" value="Enter keywords....." />
            <input name="search" type="image" style="border: 0; margin: 0 0 -9px 5px;" src="style/search.png" alt="Search" title="Search" />
          </p>
        </form>
      </div>

Once you’re done, save the file and close it.

Set Up the footer.php File

Refer back to your index.html file and look closely for the tag that indicates a footer. Again, each template may be different. In my case, it’s pointed out by the first tag in the example:

<div id=”footer”>.
<div id="footer">
Copyright &copy; textured_blue | <a href="http://validator.w3.org/check?uri=referer">HTML5</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.html5webtemplates.co.uk">Free CSS Templates</a>
</div>
</div>
<?php wp_footer();?>
</body>
</html>

Copy the code similarly to how you did above and paste it to footer.php.

Don’t close the file just yet – you need to insert <?php wp_footer();?>just before the </body>tag. Save the file and close it.

Set Up the index.php File

Now that you have set up the three PHP files, there’s only one remaining, which is index.php. Simply put, index.php will be made up of the main content of your site like blog posts.

However, due to the difference in nature between the HTML site (static) and WordPress (dynamic), you can’t move the body section to its PHP file counterpart like with the other PHP files we have configured so far. Instead, we’re going to use something called The Loop – a PHP code that can show your blog posts and format the file according to the matching criteria.

First, add the lines below to your index.php file.

<?php get_header(); ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

These are PHP command lines that call your header, sidebar, and footer respectively. In between the command lines for the header and sidebar, that’s where you put The Loop.

Below is the code for The Loop, insert it after the tag <?php get_header(); ?>.

<?php while ( have_posts() ) : the_post(); ?>
 <article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
   <h2 class="entry-title"><?php the_title(); ?></h2>
   <?php if ( !is_page() ):?>
     <section class="entry-meta">
     <p>Posted on <?php the_date();?> by <?php the_author();?></p>
     </section>
   <?php endif; ?>
   <section class="entry-content">
     <?php the_content(); ?>
   </section>
   <section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
     <span class="category-links">
       Posted under: <?php echo get_the_category_list( ', ' ); ?>
     </span>
   <?php endif; ?></section>
 </article>
<?php endwhile; ?>

Once you’re done, save the file and close it.

4. Configure Your CSS File

Your theme is actually ready to use. However, it will have a cluttered layout due to the CSS file not working properly.

You need to configure the path for your CSS script that’s read by WordPress. Here’s how to do it.

In the header.php file, look for the CSS script line similar to the one below:

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

Then, replace it with the code snippet below.

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />

Once it’s replaced, save the file. Now, CSS will work as it should. However, it’s worth noting that using this method will make you unable to use a few WordPress features, namely the widget area.

5. Upload Your Theme to WordPress

So, you have finished creating a WordPress theme based on your previous one. What’s next? All that’s left to do is uploading the theme to your WordPress dashboard.

But first, don’t forget to recheck everything in the folder. Move the visual elements of the old theme into the WordPress theme you just created. Otherwise, none of your images will show up.

There are a few ways you can upload your theme, such as:

• Through FTP (File Transfer Protocol). This requires you to get the information of your FTP account from the control panel of your hosting provider. Once you have it, install an FTP client such as FileZilla. Open the application, enter the details like port number, etc. Then, upload the folder of your new theme to /wp-content/theme. Go to your dashboard and navigate to Appearance -> Theme. Activate the theme, and you’re all set.
• Through the file manager of your hosting provider. If you don’t like using FTP, you can also perform the process via the file manager located in your control panel. Log in to your hosting account, look for the File Manager, and click it. Same as FTP, store your theme folder in /wp-content/theme and activate your theme through WordPress dashboard.
• Upload the package version of your theme directly. This method is even easier as you don’t have to touch the core files of your WordPress installation at all. Simply turn your folder into a zip package and upload it through the WordPress dashboard (Appearance -> Theme -> Add New).

Congratulations! You just activated the theme from your old site on WordPress. It’s still lacking some content though. Refer to the next section to import your content to WordPress.

Import the HTML Content Only

At the expense of leaving your old theme behind, you could choose a much faster and easier method by importing only the content of your HTML site.

Besides, since you’re changing the platform, you might as well change your theme too, right? If you agree, this solution is for you.

1. Install the HTML Import 2 Plugin

First, find a WordPress theme you like and install and activate it on your new site.

Next, you will have to use an HTML to WordPress converter tool called HTML Import 2. Download the plugin and go to Plugins -> Add New -> Upload Plugin. Choose the downloaded zip file and click Install Now. Make sure to activate it after the installation.

2. Configure the Plugin

After that, you need to configure the plugin by going to Settings -> HTML Import.

As can be seen above, there are a few fields that you need to adjust. I’ll explain all of them one by one.

• Directory to import. Don’t mistake it for a URL – this is the specific path of your stored HTML files which must be on the same server as your WordPress installation files.
• Old site URL. As the name suggests, it’s where you enter the URL of your existing site. If you want to import a certain subdirectory, (e.g. a contact page) then include it in the URL (e.g https://example.com/contact/)
• Default file. It’s usually the main page of your site (index.html). Although, you can also include other HTML files too by using commas as separators.
• File extension to include. Put the extensions of all files that you want to import. Everything not listed in this field will not be imported.
• Directories to exclude. If you don’t want to import one or a few directories, list them all here.
• Preserve file names. This will impact how your permalink will look. By ticking the checkbox, the slug (a part of the URL placed after the main domain) will be the same as the file’s name.

Since you’re just importing your content, go to the tab called Content. You will see three options on the section that say Select content by, along with options which are HTML tag, Dreamweaver template region, and import the entire file.

For HTML tags, you need to check which tag indicates the main content sections on your HTML file. In my case, it’s <div id=”main”>. So, I would put “div” under Tag, “id” under Attribute, and “main” under = Value.

Next, set the rest of the preferences of this HTML to WordPress converter tool and save your settings.

3. Begin the Import Process

Now, let’s finally import the file. Go to Tools -> Import -> HTML -> Run importer.

Select the HTML file that holds the content you want to import, and click Submit. Your WordPress site now has the content of your old HTML site.

Adapting a Child Theme from an Existing Theme

The third method will allow you to import your HTML site while still keeping some of the design intact, but without as many hoops to jump through that come with the first method.

Simply put, you will browse for a new theme from the massive WordPress theme directory and make a child theme from it. What do you gain from this? For starters, any change you make in the child theme won’t mess up the core – parent – theme. And, you’ll get to use a plugin that can speed up the process.

So, let’s get started!

1. Install the Childify Me Plugin

After picking a new theme that looks similar to your HTML site, you can use a plugin called Childify Me to create a child theme from it.

Installing it is the same as any other plugin. Just download the plugin, go to Plugins -> Add New -> Upload Plugin, and put the zip file there. Don’t forget to activate it.

2. Create the Child Theme

If you already installed and activated a parent theme, you should “childify” it now through the customization page.

From your WordPress dashboard, navigate to Appearance -> Theme, and click Customize on the parent theme of your choice.

You will see a panel on the left side of your screen that contains various customization options. Look for the button that says Childify Me and click it. Name your child theme and click Create, and you’re all set!

Conclusion

Congratulations on making it all the way here!

These are the methods you can use if you want to convert your HTML site to WordPress.

To sum up the various methods I have covered, let’s have a quick recap.

1. Manually convert HTML to WordPress. To put it simply, you have to break down the sections in your HTML file into separate PHP files – index.php, header.php, sidebar.php, and footer.php. Then, insert The Loop to the index.php file to replace the static content. Also, don’t forget to configure the CSS file in order for it to work properly.
2. Import the HTML content only. The theme you use on your HTML site won’t be used here. Instead, you’ll choose a new theme and use a plugin called HTML Importer 2 to import your content. Just make a few configurations, and the plugin will do most of the work for you.
3. Adapting a child theme from an existing theme. Hooray! You get to keep some of the layout design from your HTML site with much less headache than the first method. Choose (and install) a theme, install the Childify Me plugin, and create a child theme with it through the customization page.

In the end, I hope that all the benefits you can get from using WordPress will make the process worth it. No pain no gain, right?