Web Hosting

How to Convert an HTML Website to WordPress

I often see questions asking how to convert an HTML website to WordPress and, back here, I covered some of the things you need to think about before doing so.

Anyway, I recently converted an old HTML site to WordPress so I figured I'd set out the step-by-step process - so here it is:

Overview of the Process

The process I've set out in the steps below involves:

  1. Creating a test domain, installing WordPress and importing the content of the site you're moving
  2. Taking a copy of the WordPress-based site on the test domain
  3. Clearing out the folder where the old site sits and installing the new WordPress-based site.
  4. Tidying up various loose ends.

Here are the detailed steps

Step 1: Create a test domain

If you don't already have one, create a test domain and install WordPress.

You can install WordPress in a subdirectory of your main domain, if you like - I have 3 test WordPress sites installed in separate directories under my admin domain. Just be sure to set the privacy settings to exclude search engines.

Step 2: Create your layout and design

Once you've set up WordPress, create your new site layout and design.

This may be as simple as installing a theme, or as complicated as developing the design from scratch - up to you!

Step 3: Create the new pages

Create a new page in WordPress for each of your old pages. You have an opportunity here to consolidate and rationalise your pages if you want to.

Step 4: Import your content

Decide how you want to move your content across.

I copied it from the front pages of the old site, pasted it into a Text file (Notepad), then re-copied it from Notepad and used the Paste as Plain Text button to insert it into WordPress.

This approach generated less re-formatting work than trying to copy the HTML and paste it into the HTML view - that route is full of hassles!

Whichever process you choose, you'll definitely need to do some work on the formatting, so be prepared for that.

Important point: when you're importing your content using the process I just outlined you'll need to re-insert the images you used. Make sure you use the 'From computer' method for adding images, as this will upload the images to the /uploads folder.

The reason this is important is because we're going to use a backup plugin to move the site from the test domain to the live domain, and we want it to include all the images.

Images that you insert from an external URL will not be included in this backup.

Step 5: Install BackupBuddy

Once the new site is complete on your test domain, install the BackupBuddy plugin - you can find it here. BackupBuddy is a paid plugin, but it's well worth the expense.

If you don't want to use BackupBuddy find another plugin that does full site backups and enables you to migrate sites between servers and domains.

Step 6: Create a full backup

Create a full backup of your test site (database and system files) and download it to your machine along with the importbuddy.php file.

Step 7: Create a MySQL database

Create a MySQL database on your domain, keeping a record of the Database Name, User Name and Password - you'll need these later. Make sure the user you set up has authority for all changes.

Step 8: Prepare the folder where your WordPress site will sit

Important: before you clear out your old files, copy the URLs of each page on your site and paste them into a text file. You'll need these later for creating the re-directs.

Clear out any old files, particularly making sure there's no index.html file in the domain (or folder) where your WordPress-based site will sit.

I simply moved the entire site (all files and folders) to a new folder that I created called 'Old-Site'. This also enabled me to restore my old site quickly if I needed to.

Step 9: Upload your WordPress site

Upload the importbuddy.php file, and the zip file of the full-site backup, to the domain (or folder) where your WordPress based site will sit.

Step 10: Navigate to the Importbuddy script

Fire up your browser and go to the importbuddy.php file - e.g.: yourdomain.com/importbuddy.php

Step 11: Run the import script

Follow the on-screen instructions. As it's a new (i.e. different) domain from the test domain on which you created the WordPress site, fill in the details of the database you created earlier when you're prompted.

Complete the rest of the steps (7 in all, at the time of writing).

Step 12: Complete the clean-up, if necessary

If there are any files that cannot be cleaned up by the importbuddy script delete them manually using FTP or your File Manager. The script will alert you if this is needed.

Step 13: Set up the redirects

Set up old-page-to-new-page redirects in the .htaccess file.

The WordPress Permalinks will be in a different format to the old HTML URLs, so anyone typing one of the HTML links will get a 404 page, and all your links will be broken, without the redirects - so they're important.

Here's the format for the 301 re-direct command in the .htaccess file:

redirect 301 /page.html http://www.yourdomain.com/page/

Note that your source URL only needs to be the page filename, not the full URL. The destination URL must be the full URL, including the http://.

If you have files in sub-directories on your old site you'll need to include the subdirectory in the path after redirect 301 – e.g. /folder/page.html.

This will need to be done for each page on the site, and you can use the old page URLs that you copied into the text file earlier for the source and copy the new page URLs for the destination.

Step 14: Install a new sitemap

Install the Google XML Sitemaps plugin and build a sitemap. There are some tips on how to set up the plugin here.

Step 15: Re-verify your site in Google Webmaster Tools

Go to Google Webmaster Tools, re-submit your sitemap and re-verify your site using the HTML file method - there's a video describing the process here.

Step 16: Re-install your stats tracking

Re-install your analytics tracking script.

Step 17: Update any links, if necessary

If you're using Thesis you'll need to update any internal links in your custom-functions file (e.g. links to images) from the test domain to the production domain. External links are not affected.

Most other internal links are taken care of by the importbuddy script, but it's worth checking to make sure!

That's it - you're all done. Any questions leave a comment or drop me a line.


Martin Malden.

Web Hosting