Convert Static HTML Site to Wordpress Easily
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.
Related Posts
Written by: David Cooley - January 21st, 2009
Posted in Blogging, Programming
Tags: 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