When a lot of small businesses or organizations start out looking for a website, very often they end up with a custom coded static website. The limitations of a static website soon present themselves and then small businesses or organizations look for other options.
One of the limitations of a static website is that when you, as the website owner, want to make any changes to the website, you have to go out and hire a programmer to do just that. Meaning that if your phone number changes, you’re looking at a fee to make those minor changes on your website. If you haven’t already got a WordPress website, you might be wondering how to move from a static HTML website to WordPress.
Before we begin, note that the process below applies to websites that are static HTML sites and not for those moving from a different CMS (like Blogger, TypePad, Drupal, Joomla, etc.) to WordPress. If your site is a collection of .html or .htm documents, then the following will apply to you.
(Image Credit: Alden Jewell)
A Static Site to WordPress Overview
There are a few stages of this process. Before you get stated, below is a complete overview of the entire process. As you can see, the process isn’t really that complicated and it should be something that someone with basic technology skills could do on their own. That said, don’t be scared to look for help.
- Make sure WordPress will run on your current web host.
- Map out your original site’s current structure.
- Create a temporary sub domain.
- Backup and move original site to a temporary location.
- Install WordPress.
- Reconstruct orignal site structure.
- Redirect your old URLs to new locations.
- Add a blog.
- Cleanup installation
Just remember to take your time and work through everything systematically.
WordPress Compatibility
Most web hosts (that are worth using) will have some type of automatic WordPress installation process. Later when you go to install WordPress, this should only take you a few minutes to complete.
By some chance your web host does not have an auto installer for you, you should choose a web host that is more user friendly. From what I have seen, if your web host does not have an auto installer then that is a good indication that they are not capable of running WordPress.
WordPress requires certain server technologies in order to run. If your web host doesn’t have those capabilities then you won’t even be able to install WordPress on your own.
Some web hosts are capable of running WordPress but they won’t install it for you. This means that you will be able to install it on your own but it is a more involved process. If you’re doing this for the first them then you are better off with a host that will install WordPress for you.
You Need a Map, GPS Won’t Work
The first thing that you are going to need to do is create site map of your existing website. Make notes and take screenshots of every page on your site and how they are linked together.
You want to make sure that all of the original web addresses are recorded exactly like they are on your existing website. This is so that you can reconstruct your entire website within WordPress when you are ready to do so. Note the entire URL string, for example, http://www.YourDomain.com/PageName/SubPageName. The URL structure is important to ensure that all of the current links coming into your site stay active. Any changes or deletions that you make probably will effect your traffic and your search rankings.
Take notes on the sidebars (if you have any) and any of the content in them. Do you have social sharing buttons, email opt-in forms, product descriptions or links, etc.? All of this should be noted. Again, screenshots are probably the most effective way of doing this.
Calling in a Sub
Create a temporary subdomain so that you can have a temporary location for your website so that it won’t be completely offline during your WordPress migration. A subdomain is basically a domain within a domain. This could be something like http://SubDomain.YourDomain.com/.
This can usually be done from within your web host control panel. Take a look through your control panel and if you can’t figure out how to do it on your own, contact your web host’s support staff and they will probably be able to help you add the subdomain.
For example, create a new subdomain called “old” that you will delete after your move to WordPress is over. This will give you a domain like this http://old.YourDomain.com/. It’s a little ugly but it’s only temporary.
Moving Day
You are going to have to move your existing site to a temporary location if you want to keep it in working order until the new site is up and running. One thing that is good about older style HTML sites is that they can easily be moved. However, make sure that you create a complete backup of your existing site before you begin.
Backing up a static HTML site is simple. Launch your favourite FTP application and download all of the files from your site to your computer. If something goes wrong, you have a copy to fall back on.
After you have backed up your site, use an FTP program to copy (not move) your existing website to the new subdomain. This means that there will be two copies of your site. One that you will find by going to http://www.YourDomain.com/ and one that you will find at http://old.YourDomain.com/. There is actually a third that you have backed up. You backed up, right?
The only problem that you may have when moving an existing site is interlinking between the existing pages. If your existing site is setup to link to existing pages using absolute paths then your are going to have to change your links. If they are using relative paths, you should be good.
A relative path means that a developer isn’t linking to existing pages using the full URL structure, so the link often looks like /page1.html/ instead of http://www.YourDomain.com/page1.html/. The latter URL structure is an absolute path.
If you understand HTML code, you should be able to open up your website’s pages in an HTML editor and look at the links. (You might need some help with this part if you don’t know your way around HTML code.) If they show the full URL then you are going to have to change those. Change these to a relative structure. This means that you should be able to delete the http://www.YourDomain.com/ part of the URL from all of your links.
After you have made all of the required changes, carefully go through all of your interlinked pages and ensure that all of your links have been changed. Be sure they are linking to the pages in your subdomain and not the pages in their original location. Pay attention to the address bar when clicking links.
Install WordPress
Before you install WordPress, go through your original website’s root directory and delete everything. Don’t worry, you still have a backup of your original site and a copy in the subdomain.
Note that after you delete your original website, your visitors will not know where to go until after WordPress has been installed. So do that immediately after you have deleted your original site.
Quickly log into your web host and install WordPress. This should only take a few minutes to complete. Do the initial setup and install a WordPress plugin called Maintenance Mode by Michael Wöhrer
After you have installed and activated the WordPress Maintenance Mode plugin, you will need to also activate it in the plugin’s settings. The Maintenance Mode plugin will create a landing page on your website that all your visitors will see. You will also be able to include a countdown to the launch of your new site if you wish.
All incoming links will be redirected to the landing page so they will not receive the dreaded 404 error. You will also be able to customize your landing pages with your own text. This gives you the opportunity to add a link to the temporary site location and a message explaining that you will soon be launching a new and improved site.
You can use something like:
Welcome to Acme Widgets! We are currently in the process of building a brand new site for you to enjoy. However, it is going to take a bit of time to complete. In the mean time, you can still use our old site. Click here to view it.
As a logged in administrator, you will see the site as it will be seen by your visitors. This gives you the chance to work on the site without all of your visitors seeing the site in an unfinished state.
Go through and complete the setup of WordPress like you would for any other purpose. If this is the first time that you have setup WordPress, you might want to look into my online WordPress course.
You Can Rebuild It. You Have the Technology.
Now that you have setup and installed WordPress, it’s time to rebuild your original site. You might be able to find a WordPress theme that closely resembles your original site. There is also the option to hire a developer to build a theme that looks like your original site. I’d recommend using the new Headway 3.0 theme since you should be able to recreate your existing theme with the revamped visual editor. I love the Headway theme, it’s slick!
Take a look at those screenshots and your notes. Go into the widget manager and create your sidebars to look similar to what you had before. This is also your opportunity to add or remove any information that you have be dying to change in your sidebars.
Take your list of pages and go into the pages section of WordPress. Create a new page for every page that existed on your website previously. Give your pages nice descriptive titles and don’t worry about what the pages were called or what their URLs were before. Rebuild the content on every page as it was on the original site.
You will be able to go back-and-forth between your original site at your subdomain and copy-and-paste the text into the new pages. Upload images into WordPress using the WordPress media manager. Don’t link to the images in your subdomain since we are going to remove the subdomain later on.
Traffic Control
When you created your new pages, WordPress created new URLs for these pages. WordPress calls these permalinks. If you are happy with the WordPress URLs then leave them alone. If you want to modify them then go ahead and do that now. Don’t worry what your old URLs were on your original site.
Between the title input field and the content input filed in the page editor of WordPress you will see the permalink of the page. You can click the “edit” button next to the permalink if you need to change the URL to something more suitable. Make a note of all the URLs of the new pages.
With Simple 301 Redirects by Scott Nellé you can create a search engine friendly redirect called a 301 redirect. This means that all incoming links will be redirected to the new location and all the previous search engine weight will also be directed to the new location. Follow the example in the plugin’s settings and input your old URLs in the first input field and the new URLs in the second input field.
After you have gone through and added in all of your old page URLs to redirect to your new page URLs, you’re all set.
Bloggity Blog
Since your original website was a static website, you probably didn’t have a blog. Now is the opportunity to add one. This is a built in feature of WordPress so all you need to do is start adding your posts and you should be all set.
You’ll also need to add a link to your blog if you don’t want to have your blog on the home page of your site. Create a new page with the title “blog” without any other content on it. Publish that page and link to it in your navigation. Depending on your theme, most of the time it will create a page with your blog posts on it.
In the reading settings for WordPress, be sure to change the “Front page displays” options. Set the page that you want as your home page in the “Front page” drop down and set the blog page under “Posts page”.
It’s up to you whether or not you want to add a blog. I still find it odd how many people tell me that they don’t want a blog on their website when we first start working together. However, after they have learned about the benefits of content marketing, they decided that regularly publishing articles to their websites is a good strategy.
Break Out the Brooms
Your website should be well on its way to completion at this point. Turn off the maintenance mode plugin and log out of your WordPress dashboard. You should now be seeing your site as a non-logged in visitor.
Click through the whole site and make sure all of the links work and that the website is behaving as it should. Manually type in the old URLs from your original website into the address bar of your browser. Make sure that they all redirect to the new pages on your WordPress website. If not, go back and double check the settings for the Simple 301 Redirect plugin.
After you have decided that your website is in working order, you can delete your old temporary site. You can use an FTP program to delete all of the files in the subdomain first but deleting the subdomain from your web host control panel should also delete every trace of the subdomain.
Finito!
That’s it! You’re new WordPress website should be up and running now. The old site has been removed and all of the old URLs should redirect to the new URLs. The content from your old website should all be on your new website. You can start adding new content to your website and modifying existing content whenever your feel the need. Congratulations!
Have you ever had to move a static site to WordPress? How did it turn out?
Want to Learn WordPress? Check Out My Course!
Wow Matt,
I sure could have used this a few years back. But I’ll tell you what I did instead. I called my hosting company, told them what I was trying to do and they walked me through it. Saved the day for sure. I seriously had no clue how to do this and that was even before I knew how to easily create a WordPress blog.
I’ve heard some good things about the Headway theme. I used free ones in the beginning but broke down a few years ago and purchased Thesis. I’m so glad I did and I highly recommend anyone who is serious about building a business to not waste their time with free themes. Just put down the money because you will have a lot more leeway with a paid theme.
If I know of anyone needing advice about this I now know where to send them. This was really a very comprehensive guide to changing your static site over to a blog. Very well done and I thank you for taking the time to put this together.
Great post Matt!
~Adrienne
Hi Adrienne,
It’s great your host helped you through the process! I wanted to put this guide together for people that may not have as helpful of a host as you did. Also, I wanted to outline how people could still keep an existing site running while putting together a new WordPress site.
I really like Headway but I do think it’s not a bad idea to play around with a free theme, or the default theme, until you get used to what you are doing. I’ve known some people that get a new theme because it looks great but then soon find the limitations of it because they didn’t know enough when they bought it. It’s kind of like buying a car before learning to drive.
That said, if one has done enough research and they are sure they know what they are getting into, it is good to start off with a premium theme.
Thanks a lot for the comment!
- Matt
wow I just knew for the first time that we can move a static site to wordpress this will be so great for so many people that stuck with static sites.
I heard about Headway so many times but as thesis theme user and in my opinion thesis is much better.
great guide Matt. and your blog looks great, Keep up your great work
Hi Faissal,
It takes a bit of work to move from a static site to a WordPress site but after the transition has been completed, a WordPress site is much more manageable.
Headway and Thesis are both great themes. If Thesis is working for you then there is no reason to switch to something different. However, the visual editor in Headway is unmatched in any other theme. Check out the videos on the Headway site (http://j.mp/tNWDkq) to see what I mean. You probably don’t need to switch now that you’re working with Thesis but you still might find it interesting.
- Matt
Hi,
interesting article, I didn’t know the plugins for redirecting and for maintenance mode, which is just what I was searching.
But I disagree with your solution of putting the old site in a subdomain. I think the contrary is much better: putting wordpress in a subdomain, creating your new blog, then switching folders:
http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory
This because you can’t rebuild your sites in just one day, so until it’s completed, old URLs will be lost for a long time, decreasing page rank. Unless you don’t do the redirect first, before rebuilding.
So why not doing it all in a subdomain until the site is completely rebuilt?
And… doesn’t maintenance mode plugin disallow the redirect plugin?
Anyway, thanks.
Hi Mattia,
You could put WordPress in a subdomain but then you will have to create redirects for each page. It wouldn’t be such a big problem but then you would have longer URLs. For example, instead of having yourdomain.com you would have subdomain.yourdomain.com.
You are correct that it could take some time to rebuild your site but as long as the site isn’t huge, it shouldn’t take too long. Any loss of rankings will be regained after the transition has been completed.
The maintenance mode plugin will stop the redirect plugin but it shouldn’t matter unless you have your site in maintenance mode for weeks.
Thanks for your comments.
- Matt
I agree with Mattia: Why not just build the new site in a subdomain or subdirectory and leave the old site up in its original location. Then, when your new site is completely ready to go live, just swap it in at the old address and activate your redirects. No need for downtime or moving your old site to a temporary location.
Also, there’s a plugin called “HTML Import 2″ that can do most of the work for you, including creating the redirects.
http://stephanieleary.com/code/wordpress/html-import/
Building a new site in a sub-domain, subdirectory or even in a local installation of WP are all options. However, this guide was directed at beginner WordPress users which may find moving a WordPress installation and database from one location to another to be a bit daunting. If you know what your doing, then your suggestions work fine. The suggestion that I’ve outlined above is the easiest solution I could come up with.
Thanks for your comments and I’ll take a look at the plugin you suggested.
- Matt
This is a very useful guide. Like Adrienne, I recently moved a static site to WordPress.
It was a scary experience, but I managed to get it all done with a little scurrying around the WordPress help pages.
Glad you are making it easier for those not yet down that road.
Hi Yeremi,
I’m glad you find it useful, even if it is after you needed it yourself.
- Matt
Hi Matt,
Even though I wasn’t moving a site just trying to create a blog within a static page wordpress website you’re article was very helpful to me. The problem I have is that the comments form is not showing on my posts. I followed your instructions re creating an empty page called blog. Hope you can help with this.
Rhonda.
If you have a blog page you will need to click through on the title of the article in order to leave a comment. If you you look at the blog link for this site you’ll notice that none of the comments forms are showing but if you click on the title of the articles you are able to see the comment forms on the single post pages.
I hope this helps.
- Matt
Hi Matt, I think there is a step missing. Once you move the old site to the subdomain, how are the search engines going to find temporarily the pages in the subdomain?
Hi Silvia,
You don’t really want the search engines to index the temp site otherwise you will have to do redirects back to the new site when it has gone live. The best thing to do is to try and get the new site up as soon as possible. In the meantime you will have a link on the maintenance page directing human visitors where to find your old/temp site.
- Matt