Convert Static HTML Site to WordPress Easily
NOTE: This post was originally posted in January of 2009 and was intended to help small HTML sites (5 to 10 pages) convert to WordPress. A lot has changed since then, and if you are trying to convert a larger site I highly recommend taking a little deeper approach. I have written another post (Convert HTML to WordPress) on the subject in 2010 that might help larger sites make the transition to WordPress. Yes, I do conversions for others. If you would like a quote, simply send me a link to your site and contact information using my Contact Form.
Working with someone recently made it apparent the process to move a static site to WordPress has been made a lot harder than it needs to be. Here is the easiest way to convert a static website to a WordPress blog. You will not have to do any redirects or modify any files other than in the WordPress admin area.
Let’s assume we have 3 static pages, Index.html, about.html and products.html and we want to move to WordPress.
- Install WordPress in the root of this domain.
- Immediately copy the Index.html to the WP Theme (whichever theme you are using) folder, and rename it Home.php
At this point, your site will look to the world just like it always did. WordPress will automatically use the home.php page as the default, and now you can go about putting it all together. You should have no broken links or any worries about redirects.
- Leave the permalinks with their default settings. This keeps you from having problems with existing pages.
- Copy the contents from About.html and create a page called About
- Copy the contents of your other files and make pages with the exact same names. If your page names are different than the titles, you can edit the permalink to match the filename (without the html extension).
- Once the data is copied and you have the look you want, change the permalink to /%postname%.html
- For PAGES (Not POST) to use the HTML extension you need a plugin as WordPress only applies the Permalink structure to the posts. Recommended HTML Extension Plugin -> WordPress Hero
- Install this Plugin first for the pages.
- Remove the old static pages, I suggest keeping them just in case you have a problem, but you need to move them out of the root.
- Copy the index.html contents to the file you want to be your home page, and delete the Home.php file. Typically this is the index.php in the theme, however you may want to use a static page depending on the site setup. You can change this is the WP Settings.
At this point, your conversion is done.
Example:
- Index.html has been copied to home.php http://test.cybercoded.com/
- Original About.html still in place http://test.cybercoded.com/about.html
- WordPress Version of About has been created http://test.cybercoded.com/?p=48
- Additional page has been created http://test.cybercoded.com/?p=44
All I have to do is change the permalink and remove the old files and I am done.
There, no need to mess with your .htacess file, and no need to worry about redirects, let the system handle it for you.
And yes, I have done several sites like this.
I also use the Home.php method to park a page if I need time to work on it before going live.
Hire Me
Related Posts
Written by: David Cooley - January 21st, 2009
Posted in Blogging, ProgrammingTags: Static Web Site, Wordpress, Wordpress Conversion, Wordpress Hierarchy
Just wanted to say thanks for the tips. Just used this method to convert my html site to WordPress and it was a piece of cake. All the best!
Hi,
Thank you very much for the nice tip. Copying the whole HTML code into page saves the effort spent in designing a custom WP theme from scratch.
I am having problem .html extension. could you please help? After removing the old static files from the root, i am getting 404 not found error !!
If I deactivate the plugin and change permalink to /%postname%/ , then it works fine !!
Thank you,
ravi
the .html pages seem 2 work now !! please ignore the help request in my previous comment. thank you again for such a nice tip
You have a great blog here and it is Nice to read some well written posts that have some relevancy…keep up the good work
this is EXACTLY what i’ve been looking for…the clearest instructions i’ve found yet. many, many thanks for sharing this.
[...] I just stumbled over a site that gives easy step-by-step instructions to do so. Here you go….. Convert Static HTML Site to WordPress Easily | CyberCoded Have fun! [...]
Help newbie here! I found this article to be super helpful but now I am kind of stuck. I went ahead and copied my index.html to the WP themes folder on my server and renamed it home.php. The problem I’m finding is that when I open WordPress and try to develop new content either postings or pages, when I preview, all I see is my static site. Is this supposed to happen? I really need to see what I am creating but I’m not sure what’s going on.
Thanks for your help in advance.
Nina, you have to call the new pages out by name to see them in the development situation, or click the Preview link from within the WP editor. Your other choice is to copy the contents of your original index page to a new Page in WP, set it as your home page, and remove the home.php, this would allow you to have all your sidebars etc showing.
Thanks for a very useful article.
@Nina, I was experiencing the same symptom until I changed the default page order in my webhost’s configuration to load php pages before html pages.
The index.html file was loaded every time and home.php was never touched. (If you suspect this may be happening, put different comments in index.html and home.php, browse to your site and view the page source to see what is being loaded.)
Just tried step one on an html site I need to convert to WP. I installed WP in root of the site, copied my index.html to the default theme and renamed as you suggested. Then renamed my index.html page. Loaded the site and you could not tell that anything had changed. Best of all there was no messing with the .htaccess file
You have one slick method here. Verry Nice.
Thanks for posting this. I have a question about changing the permalink for posts to html. Why do we need to do this if all the existing html pages are being copied to pages in the WP blog and not as posts? I guess I’m missing something here?
I will be doing this ASAP. I have been trying to find a reliable way to get this done on my existing site that has been up and running for a couple of years. I can’t seem to find a WP template that I like so hopefully this will take care of it. You have a very nice blog here with tons a great info, in the word of the immortal terminator, I’ll be back. (yeah that was lame but so what)
I must not be understanding this or something.
1. Install WordPress on the main domain of my site (did that).
2. Copy the index.html page into the default WordPress Theme directory and rename that page to Home.php (did that).
All I see when I load my site whether in WordPress admin area or my actual .com is my old static html page. What am I doing wrong?
Eric, if you are seeing the static Home.php page in the Admin area, there is something wrong with the install. Either some files are out of place, or possibly something wrong with the htaccess file. Are you sure your server supports WordPress?
[...] Convert Static HTML Site to WordPress Easily | CyberCoded (tags: wordpress html blog blogging php) [...]
Thank you for showing that this does not have to be a nightmare!!
I have searching this subject for many weeks. Thank you for making this valuable post. Now i can finally get my old static site onto the Thesis blog theme.
Have you heard of STCFX I noticed that they have a similar theme on that site.
Hi,
Can you still edit those pages via wordpress or do you have to edit them raw?
Hi I did try this, the site loads blank, but the css is not loaded.
Am I missing something???
BTW I donot get to see it in the WP dash board
Rony, I would say something is not right, but without a link to see the site, hard for me to guess what it might be. Feel free to use my contact form and send me a link if you would like me to take a glance at it.
Hi David,
Thank you for the quick reply. I tried your way and some other ways posted on different forum.
Your way is good but i did not know why it did not work for me. I think I am a Dumb a**
Sorry, the site is not uploaded, as I am working on server locally installed.
I have managed to fix the issues mentioned b4. Actually i was missing the tag
“/style.css”
I am new to WordPress (however am not very good with php).
Its a very basic dummy STATIC site that I started of with. Header, image , navigation, main content area, and footer. It not getting dynamic.
I have created navigation link with the help of
The CSS and XHTML coded works well with FF, IE 6, 7, & 8, etc.
I have sliced off the header, the main content(index) area and the footer in their respective phps. All are rendered well in FF and for some reason IE 8 is messed
.
Just below my navigation is a banner with a slogan
Something serious is cooking today
Forgot to mention, I’m using 960.gs grid system.
OK, if I want to make the H2 slogan on banner dynamic, how should I do it. Can you please help?
Thanks in advance
I have the same question as John. If my intent is to use WordPress as a CMS tool for a client, how does this impact their ability to use the admin page to update content, etc? This looks very promising!
Thanks
Gregg
It is very useful to me, today I have to do HTML to WordPress conversion in my office. It is my first work, this is very useful to me. thanks.
> I also use the Home.php method to park a page if I need time to work on it before going live.
Use the maintenance mode plugin, it can display your 503.php and send the appropriate headers.
I wish i’d read this a few weeks back, i’ve just lost all my hard won pagerank by migrating to wordpress – ouch! Would this work even if you change the entire look of the site?
[...] http://www.cybercoded.net/convert-static-html-site-to-wordpress-easily/ [...]
[...] it was best to convert my site from HTML to wordpress. I followed this handy guide on how to convert an HTML static site to wordpress easily. (Thanks Dave!) it was easy in [...]
Hi everyone,
this was a very handy post, and I have just used it to successfully convert my PHP site over to WordPress.
I did use a different plugin (.PHP to Pages) so that the pages had the PHP extension.
Thanks again for the terrific information.
Which plugin was this? Cant find anything similar.
Thanks
[...] Convert Static HTML Site to WordPress Easily « CyberCoded [...]
If you want all the pages to look like your “home.php” page then you still need to create a new WordPress theme right?
Wow! I just experimented with a local install of WordPress 3 and this is fantastic! I’ve been hesitating to dig in for a long time, for fear that I would “break something” or that it was just going to be too much trouble on limited time and budget.
I was shocked that it worked in the first couple steps explained, and then played around to see how much I could accomplish without breaking anything — and am now confident to dig in on 2 of my live sites. So, thanks so much for making us aware of this simple method!
While it is “simple”, the copy / pasting of content is pretty time-consuming and I can’t imagine how large sites do it. I have just over a hundred pages on 1 site, and there’s a fair bit of extra html coding that I have to dig around/past (like google adsense, etc that I’ll be using plugins for), so I’m wondering if anyone can share a simple method of extracting / copying the existing pages’ content?
Would greatly appreciate any tips/advice.
Thanks again, David, for a great post. I will definitely be citing it when I do my write-ups on my WP adventures
[...] Convert my xfactor HTML site over to wordpress via Dave’s [...]
Any advice for doing this if your website has .php pages already? Cant find any info on making wp pages .php
Thanks
Will this work using a local server(localhost)? I installed wordpress under the ‘htdocs’ folder. Where would you put the ‘home.php’ file to get this to work? The WordPress root folder? The ‘default’ folder under the ‘themes’ folder? thanks.
That totally depends on your localhost server setup, if WordPress runs, then yes.
The home.php file is part of the WordPress Theme, it goes with whatever theme you are using.
Thanks David. This actually works!! Haven’t done the other pages yet, just the ‘default’ page. Will work on the other pages now.
[...] Hiya Hacker, Thanks for the link. You can read about an alternate way to do the same thing here: Convert Static HTML Site to WordPress Easily | CyberCoded And if you're worried about losing rankings don't worry about it. If the site were offline for a [...]
What if you want to do the same thing to a subfolder or sub directory? I have converted most of my pages to my new Word Press theme, but I havent figure out how to do this for Sub folder. For example I have this non WP page: http://www.streetgangs.com/crips that I want to convert to my new WP theme. How?
[...] You will not have to do any redirects or modify any files other than in the WordPress admin area. Continue with this article.. This will open in a new window, sorry for inconvenience but closing the article brings you back [...]
Now that I have WordPress using my static html page as the front page, I want one of the links on the front page to display the posts within WordPress. How do I go about setting that up?
Marv,
There are several ways, and it would depend on the Theme, if it is Widgetized or not, and how much of the if any of the WordPress code you applied.
Which widgetized themes have that capability? Just wanted someone to point me in the right direction to be able code this funtionality. Thanks.
They all have the capability, that is what makes them WP themes. Based on what I understand, you want a link that goes to a page of the Posts. You either need to program a custom page with the WP loop on it, or link to either a Category or Archive page running on the site. Without actually looking at the site it is hard to say which way is best. Feel free to contact me using my Contact page if you want me to look at it for you.
If you need help with WordPress, I highly recommend reading this post http://www.cybercoded.net/miio-com-wordpress-group/
Thanks for the great post. So just to confirm that I understand correctly, all that this method does is allow you to keep your static HTML pages intact as you simply move the home page into WordPress, but of course the content of these pages would not be edit-able using the WordPress page editor, correct?
I also mention in the post copying the contents of the other files too, so once you are done, all the pages can then be managed and edited in WordPress.
See the 3rd bullet – > “Copy the contents of your other files and make pages with the exact same names. If your page names are different than the titles, you can edit the permalink to match the filename (without the html extension).”
OK, cool. The reason I ask is because I have a potential client who needs 300 static pages turned into WordPress pages that they can edit, so I would still have to go through the process of manually copying the HTML code from the static file to into the WordPress page editor 300 times, correct?
Thanks so much David!
Possibly, unless you can find an easier way of converting them. And that would all be contingent on how they are written now.
Hey David,
Yeah, that’s what I thought. Perhaps a PHP script could be written to convert the HTML pages into pages via HTML parsing and MySQL injection, but that sounds somewhat complicated to pull off.
Anyhow, thanks so much for the insights, great blog post!
I have a site that’s an existing .html site and I want to move it to wordpress. BUT here’s the potential sticky situation:
I already have a wordpress blog installed on the site. so it’s site.com/blog
Is there an “easy” way to achieve something like this?
Also is this something that you’d be interested in helping us with (for a fee of course)?
Thank you,
Corey
Corey,
Do you want to convert the current /blog/ into the main site, and have them both show under the root?
You can use my Contact Form on the menu at the top of the page and I would be glad to discuss with you.
Hey David,
Thanks for this tutorial. I have a potential problem too.
I have my html site on a different host (it is a very newbie host so there is ZERO flexibility with it), and I want to get my site transferred to wordpress on a different host.
Can I keep my site on a seperate host while I work on transferring it? Or do they have to be on the same host for this method to work? It’s a bit of a hassle because my current host doesnt even allow FTP! argh!
Thanks
Altug
My advice, if you do not have access to the files, and yet you are transferring to a new host, and you are trying to convert to WordPress…. I would say, don’t do it all at once.
Transfer the existing static site first, to a host that can give you the tools you need, then make the conversion.
Thanks! Yeah, I thought this might be the best way.
Just one of those tough jobs you put off and put off but it’ll never get done if I leave it!
Started the domain name transfer and content transfer today so I’ll keep you posted on how the transfer to WP goes. Sounds simple enough so fingers crossed! Thanks a lot for this useful post!
Thanks for your quick response to my question too! It’s much appreciated!
All the best,
Altug
Hi David,
Thanks for putting the guide here.
I have followed the instructions and now have all the original site’s pages in WordPress but as yet unpublished.
I am having trouble wrapping my head around the final steps.
My current static home page is of course the index.html page. All the links I have built up over the years are to http://www.example.com. I don’t want to break those links and I am uncertain what to do about the new homepage.
If I make the new homepage a “page” then the plugin will make that page end with .html so the address will be http://www.example.com/index.html. That will effectively break the backlinks.
You say to copy the contents of the index.html page from the static site to the theme folder as index.php.
Do you mean the theme folder in WordPress or the folder of the current theme I am using? Both have an index.php file
Do I overwrite the existing php code in either… I’m lost!
Lance,
1.) Any links pointing to http://www.example.com will still point to the same site. The homepage has to be either index.php or home.php in the theme you are using. If you make the home page a “page” in WordPress and point to it correctly in WP setting, there will not be an issue.
2.) If you are using WP, the theme that matters is the theme you are using. So copying anything into the default theme will not help you if you are using another theme.
3.) You only override the PHP code if you are not trying to utilize the code in WP. That is one reason I like to use a WP page, and set that as the home page in WP settings.
4.) This conversion is based on the static site having .html pages.
Hi David,
I am assuming you though these instruction were foolproof!
Well I appear to be here to make you wrong!
I have deleted all the old html files and published all the new ones in WP including http://www.example.com/index.html.
I have set WordPress to display this page as the home page.
Now when I navigate to the site I get the “Index of” page with the usual list of folders.
The latest error log entry is as follows:
[30-Aug-2010 08:02:36] PHP Fatal error: require() [function.require]: Failed opening required ‘ABSPATHwp-includes/load.php’ (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/account-name-here/public_html/example.com/wp-settings.php on line 19
Huh?
Lance,
Sorry you are having problems. Unfortunately, it is almost impossible to troubleshoot just via comments.
If you would like me to take a look at it, drop me a message on my contact form with the site link.
Thanks anyway David but I think Ill start from scratch and see where I went off the rails!
David,
I wanted to let you know (and anyone else viewing this thread and beginning to feel nervous!) that the conversion is now complete.
In my case there was a problem with an unidentified WordPress file… who know where! I just repaired the existing installation of WordPress and everything ran exactly as your guide says. Thanks for putting here!
Hey David,
What would you suspect is the problem if every page I create just takes me to my homepage?
I’ve changed index.html to Home.php and put it in with my theme but now when I try and add pages and preview them, it just shows me the homepage?
There is another file in the theme folder called home.php – Do I leave that as it is?
Thanks again David.
I am not sure what the difference in the 2 home.php files you mention. There should be only 1 home.php file, in the Theme folder.
I would suspect that extra file, and/or a problem with your .htaccess file.
[...] is the second post I have written on this topic, the first post was Convert Static HTML Site to WordPress Easily. In that first post I covered a very simple way to convert a static HTML site to [...]
[...] This is something I learnt from David's blog. [...]