Converting HTML to WordPress: Everything You Need to Know

Way back in the day, in the early stages of the internet, all websites were built on a single language, so the option of converting HTML to WordPress wasn’t even a consideration. You made your site on HTML and that was it.

But the internet has grown and evolved. Today, developers and site owners have a myriad of choices. Even HTML - the language itself - has changed over the years.

However, does new automatically mean better? Is static HTML a dinosaur in the land of the World Wide Web? If you have such a site, should you be thinking about moving from HTML to WordPress, or is it okay as is?

Let’s talk about everything you need to know about converting HTML to WordPress.

Table of Contents

1. Is it Necessary to Convert HTML to WordPress?
2. When Converting from HTML to WordPress is a Good Idea
     SEO: HTML vs. WordPress
3. Reasons to Maintain Your HTML Site
     Page Speed: HTML vs. WordPress
4. HTML to WordPress: Manual Conversion
     Step 1: Create a Theme Folder and Files
     Step 2: Copy Existing CSS File to Your New CSS
     Step 3: Section Out Your Current HTML
     Step 4: Finalize Your index.php File
     Step 5: Upload Your Theme

1. Is it Necessary to Convert HTML to WordPress?

In a word, no.

There are several reasons why someone may choose to maintain their site as-is instead of moving from HTML to WordPress. Those of us who use a CMS of any type, not just WordPress, may be hard to wrap our heads around, but it's true.

In fact, I maintain a few static HTML sites myself. And by maintain, I mean I just pay to update my domain registration every few years. They’re static, meaning nothing ever changes on them. They’re also simple, small sites. So there’s no need to create an environment for them where change is easy.

In my case, I do not need to move from HTML to WordPress—or any other CMS.

Here are some advantages of using HTML for a website:

• The language itself is easy to learn
• Every single browser supports it
• HTML and XML are very similar
• It’s free to use
• Nearly all development tools support HTML
• It’s extremely SEO friendly
• There’s no software or platform to update and maintain
• Simple access to your code
• Depending on your site, it may be all you need

For this part of our discussion, that last point is the most important.

An HTML site may be sufficient for your needs. And if it’s been sitting there doing its job for any length of time, there’s no need to change it. An example of this type of site could be a simple site with a few pages of text and images. No logins, no sign-ups - no forms at all. The site is complete, and you have no plans to change or update anything.

If you’ve optimized the site and it’s doing well in the SERPs, in my opinion, you should leave it alone.

So again, converting a site from HTML to WordPress isn’t necessary.

But when might it be a good idea?

2. When Converting from HTML to WordPress is a Good Idea

Now let’s look at the other side of the coin—when you should seriously consider transforming a site from HTML to WordPress.

And this is based on the assumption you’re not a developer with a deep understanding of coding languages. You’re a blogger, business owner, or someone else who has a presence to upkeep on the ‘net.

Here are some advantages of using WordPress for your website if that's you.

• It's a mighty content management system (CMS)
• It’s continuously updated
• Thousands of professional, ready-made templates to choose from
• You have complete control of your website - meaning you don’t need to hire a developer every time you want to change something
• Add new content whenever you want
• You have greater control when it comes to SEO

Ultimately, running a WordPress site instead of an HTML site means you have more control - it’s easier for you to manage your property. And if you get bored with the way it looks, it’s easy to change to a new theme.

Let’s look at one specific area that might prompt you to take the plunge and convert your site from HTML to WordPress. I’ve already mentioned it above.

SEO: WordPress vs. HTML

Unless you have no clue when it comes to running an online business—or simply being visible on the internet—you’ve heard of SEO.

A site lacking in SEO, both on-page and off-page aspects of it, will get buried under the nearly 2 billion websites there are today. The search engines will ignore your site, and it will never land on the top pages of a search.

SEO is critical.

And when it comes to our current battle about converting HTML to WordPress—or at least this should you or shouldn’t you discuss—there’s a winner, but not necessarily a clear winner. Maybe.

Whether your site is built using simple HTML or on the WordPress core, you have SEO options.

The issue with HTML is that if you don’t know HTML yourself, you need a developer for any changes you want to make. And since optimization tactics can be somewhat fluid at times, this could become expensive.

SEO: WordPress

However, if you have a WordPress site, you can simply install a plugin and select your settings. And this is on top of the settings that are built into the WordPress core files.

For example, your basic WordPress install comes with the following simple SEO options.

From the very primary option of making sure your site is visible to the search engines . . .

Options for SEO friendly URL structures . . . 

And finally, choose between WWW or non-WWW for your domain URL.

But that's just the beginning. WordPress also gives you options to customize the following right out of the box.

• Alt-text of image uploads
• Meta descriptions
• Headings
• And more

And then there are the many, many SEO plugins you can use.

SEO: HTML

Here’s the thing. You can do all of the above with HTML. But you need to be able to code it in. There’s no simple user interface where you just need to click a button to change a setting. No fields to add text to. You need to dig into the code to make the changes.

Learning how to make changes in WordPress is pretty straightforward - not so much in HTML.

So, when it comes to a site where SEO is essential, you should be considering the alternative and converting HTML to WordPress.

3. Reasons to Maintain Your HTML Site

I mentioned in the intro that those who have simple, static sites built on HTML could leave them. There’s no reason to convert such sites from HTML to WordPress.

But are there any other reasons?

Page Speed: WordPress vs. HTML

While we could include page speed in the SEO section, it’s the more technical side of SEO. Off-page instead of the on-page options mentioned above.

A few years ago, Google made an announcement on their Developer’s Blog that page speed had been included as a ranking factor for search and ads. What does that mean? It means if you have a site that loads slowly, you won’t rank. Your site won’t appear anywhere near the top of the search results pages (SERPS.)  

If you’re trying to build an online business, that could be catastrophic.

Page Speed: WordPress

WordPress core is written in PHP and uses databases. That means a cascading sequence of events happens when a visitor lands on your page or site.

Without getting too technical, for your site to load, the server your site is hosted on needs to execute the PHP code and then find and read your database files to launch your site. This means that WordPress could load much slower than an HTML site - assuming you haven't taken steps to avoid it.

Steps would include, but aren’t limited to:

• Using a Content Delivery Network (CDN) to deliver content
• Optimizing and compressing images
• Reducing JavaScript and CSS files
• Using a caching plugin

However, you could do all of that depending on your server and still have a slow site. So don’t be too hasty on this one when considering HTML to WordPress.

Page Speed: HTML

In contrast, since a site built on HTML doesn’t need to execute PHP or query a database, it’ll load much quicker than a WordPress site - assuming the code has been optimized.

HTML optimization includes:

• Removing unnecessary white space throughout the code
• Omitting comment sections
• Compressing and minifying images
• Reducing the number of inline scripts
• Lazy loading images

Page speed can be achieved on both WordPress and HTML sites, but in my opinion, at least, it will take more work on a WordPress site in contrast to the tweaking you’ll need to do on an HTML site.

If all else were equal, and you were thinking about converting HTML to WordPress based on page speed alone, I wouldn’t be too hasty to make the change.

If you have decided to go ahead with a conversion, here are the steps.

4. HTML to WordPress: Manual Conversion

Before you proceed, you need to make an important decision. Do you want to keep the current design of your website, or is making to change to WordPress part of an overall change? It’ll make a difference in how you carry out your HTML to WordPress conversion.

If you’re keeping your current design, things are a bit more complex.

Before getting started, make sure you have a code editor. You can simply use Notepad ++ or something like Atom, which is my favourite. Ultimately, the choice is yours. Ultimately, the choice is yours.

You’ll also need access to your current site’s directory and the install directory of your new WordPress site - you’ll need to install WordPress to your domain.

Step 1: Create a Theme Folder and Files

From your desktop, please create a new folder and use the name of your theme to name it.

Then, using your code editor, create the following files and put them in the folder.

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

Step 2: Copy Existing CSS File to Your New CSS

This will duplicate your current design.

First, add the following to the top of the CSS file you created in the previous step.

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

The next thing I want you to do—this is very important!—is make a complete backup copy of your current site’s index.html file. In case something goes wrong, you still have your code.

Once you’ve done that, find and copy your current CSS file and add it to your new file, just below what you added above.

Step 3: Section Out Your Current HTML

The code that goes in the other four files you created comes from your single current HTML file, so you need to separate everything into the correct file.

Since you have a backup file of your index.html, I’m going to recommend cutting and pasting instead of copying and pasting the following. It will make things easier for you in the end.

The following may seem complex and have you questioning your HTML to WordPress goal, but it’s not that difficult.

header.php

For this file, open up your current HTML—it’s called index.html—and copy everything from the top of the file down to div class=”main.” Copy it into your new header.php, then save and close.

sidebar.php

This time you need to copy everything within the side class=”sidebar” element in your index.html and paste it into your sidebar.php file. Then save and close.

footer.php

Now you want to copy everything that follows the sidebar code you copied above and paste that to your new footer.php file. Save and close.

index.php

If you cut and pasted the previous steps, the only thing you should have left on your index.html is what you need to copy/paste to your new index.php file. If you copy/pasted the above, separate out what you’ve already done, and then paste what remains into your new index.php.

Once this step is done, save, but don’t close the file yet.

Step 4: Finalize Your index.php File

Not that you’ve separated all these files, you now need to make sure they communicate with each other. When this is done, you’re practically done with your HTML to WordPress conversion.

To do this, add the following line to the top of your index.php file:

And these two lines to the bottom of the file:

Once that’s done, we need to create the WordPress Loop. Add the following between the get_header and get_sidebar you added in the last step.

Now you can save and close your new index.php file.

Step 5: Upload Your Theme

Navigate to your WordPress install directory, via FTP or using the WordPress File Manager.

Once there, copy the directory and files you just created to your /wp-content/themes/ directory. Go to WP Admin > Appearance > Themes in your WP dashboard and activate the Theme when it's uploaded.

From there, all you need to do is add all the content from your old site.

You’re done! You’ve converted your old site from HTML to WordPress!

Wrapping Up

As you can see, there are many advantages to having a WordPress site, but that doesn’t mean all sites should convert from HTML to WordPress. Some are just fine as they are.

But if you have a dynamic, content-rich side, making the HTML to WordPress switch is probably a good idea.

Even better, WordPress comes with some great plugins that make managing WordPress that much easier—plugins like WPBlazer. A new, easier-to-manage site sounds like a good idea, doesn’t it?