Donna Fontenot

Blog

How To Convert A Static HTML Site To WordPress

How To Convert A Static HTML Site To WordPress

UPDATE: After you use the instructions below to convert your content to WordPress, be sure to check out my post on how to convert your design to a WordPress theme in 10 seconds flat as well! Or if you just want to skip my post, and jump straight to the design conversion tool, you can do that too.

Recently, on a forum I frequent, an old acquaintance asked how to convert one of his old Dreamweaver sites to WordPress, with the least amount of effort involved. At first, I thought it would be impossible to make it an easy task, but after seeing some other responses, I realized I was wrong. Although the process isn’t completely trivial, it can be done with a lot less effort than I’d originally imagined. And it’s not just limited to Dreamweaver. Nearly any site could conceivably be converted to WordPress this way. (Note that I’ve included some reasons at this end of this post as to why you might want to carefully consider the ramifications of this).

Convert Websites To WordPress

If you have an old non-CMS site lying around that you wish you could convert to #WordPress, without too much hassle, this is the guide for you. Essentially, it boils down to 2 main steps, which involves moving your static content into WordPress’s database as pages or posts. STEP ONE: Get your static HTML pages gathered together in one place, using HTTrack to build those static pages, if necessary. STEP TWO: Import those pages using an easy WordPress plugin.

Let’s start with some basics. No matter how your site is coded, once a visitor loads a page on your site, the browser takes all the bits and pieces (server-side includes, images from another directory, etc.) and puts them all together in what amounts to a final static HTML page. Even if some elements on the page are still dynamic, the code itself is all together in one spot that can be moved into a WordPress page that would still work. There may be some exceptions to that which I’m not considering, but for most of the sites out there, that would be true. So, even if your site consists of somepage.php, which calls a file named header.inc, and a file named footer.php, once the user views somepage.php in her browser, the resulting source code is all in one place, as though it were hand-coded as a static HTML page. This is the type of code that is needed to convert a site to WordPress using the method I’m outlining here.

If you already have an old static HTML site with no server-side includes, then you have everything you need to get your content right into WordPress. If that’s the case, you can skip the next section, and head straight to the section titled “Import Your Content Into WordPress”.

Convert Your Dynamic Pages To Static Pages Easily

HTTrack Website Copier lets you download an entire website onto your computer. If your pages are dynamically put together, using server-side includes to automatically insert chunks of content into each page (like the header, footer, and menu), then you’re going to want to have HTTrack mirror the site – with all content already inserted – and recreate it on your computer. It doesn’t take very long, but of course, how long it will take depends upon the size of your site. Luckily, you just run it and go do something else, and eventually, the entire site will be recreated and waiting for you. There are lots of options for how you can run this. Most of you will simply use the graphical interface instead, and if so, then you should be able to determine what to do pretty easily. The manual has lots of screenshots to help.

Personally, I like running this from the command line on my Linux computer, and I like using the -K option to use absolute urls in the links. When I run this from the command line, I use something like this:

httrack http://www.yoursite.com -O /home/you/somefolder -K

But I can’t guess at what your exact code should be, if you decide to use the command line instead of the graphical interface. You’ll need to read through the documentation to determine what’s right for you.

Regardless of how you run HTTrack, or what options you choose, once you have a folder that contains your entire site, all in a static HTML format, you’re ready to move it into WordPress.

Import Your Content Into WordPress

Start by installing a fresh copy of WordPress. Then add the following plugin and activate it.

Import HTML Pages WordPress Plugin

Once activated, open up its options page and make a few choices there. You can choose either to create pages or posts (not both). When I used it, I chose pages. Now you need to tell it how to recognize “just the content” (without all the surrounding template code, sidebar, footer, etc.). My content was surrounded by a div with an id of “content” (<div id=”content”>all my content was here on each page</div>), so that was easy, but as long as your content is surrounded by some sort of consistent, unique HTML tag, you can just specify that.

Once you’ve set all the options, you’re ready to run it. Very quickly, you’ll have a new WordPress blog with all the pages of content that match the content of your old site.

At this point, you may need to either recreate the template as a WordPress theme or use a new design. Personally, I think using a new design at this point is a good idea. It’s probably time for your old site to get a fresh new design facelift, right? In any case, converting an HTML template to a WordPress theme is beyond the scope of this post. There are tons of tutorials on how to do that on the web, so I won’t try to reinvent that wheel here. easy! Ten seconds is all you need. See how I did it in 10 seconds flat.

You may also need to make a few tweaks including possibly some redirects if needed, but all in all, in probably just a few minutes, you’ve converted your old static HTML site to a new, easy to maintain WordPress site.


Final notes: Before you attempt this, you should carefully consider all the possible ramifications of making this change.

1. While WordPress makes maintaining a site very easy, and comes with some powerful modern advantages, there are some possible reasons to reconsider. For one thing, a static site is almost always going to load faster than a dynamic one, especially one that involves a database. If your site receives tons of traffic, a less-than-great server can probably handle the load if it’s serving static pages much better than it can handle serving a highly-traffic’d WordPress site. If this sounds like it may affect you, you might need to consider also upgrading to a better server and/or hosting company.

2. There may be some issues with URLs changing. There’s a good chance that you’ll need to adjust every page’s slug to match your old page URLs, or you’ll need to deal with redirecting all the old URLs to the new ones.

3. Some things may not work. It’s impossible to really guess at what those things might be, but maybe you have some pages on your site that use some sort of script to output some sort of crazy whatchamacallit. That script or whatchamacallit may not play well with WordPress.

The best idea is to do this conversion first as a test on a development site to see what gotchas might crop up. Since it’s fairly quick and easy to do, running a test first might save some headaches later on.

UPDATE: Since I first wrote this post, a lot of people have hired me to do this process for them. I hadn’t originally planned to offer that as a service, but since it seems to be something that people need and want, I may as well just officially offer it. It’s difficult to give a price because each circumstance is different. For small, straightforward sites, I’ve charged $200. For large, complex sites, I’ve charged $1500. For sites that are so large and so complex that it would make a T-Rex run in fear, I’d probably charge $5000+. But the best way to know how much I’d charge for your site is to just ask. I always give fair prices and I always over-deliver.

Posted in: WordPress

Leave a Comment (0) →