This 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 WordPress.
After almost 2 years of answering questions on that post I thought it was time to discuss the issue again.
I have done a dozen or so conversions since that post and I have found that some sites really need to take a fresh start approach to get the best result. The main reason for this is that a lot of older HTML sites are built with outdated techniques and WordPress has made some great advancements.
On these sites I create a sub folder for the WordPress install, such as /wp. This gives us designated area to work and learn WordPress without interfering with the original design. The hardest task may be getting a theme to match your original design, but I would suggest taking this time to update your original design. There are so many good WordPress Themes this should not be a problem. Once your theme is in place you can copy and paste your original content to the new install matching the page names. Depending on your original file extensions you may need to set the permalinks in WordPress.
Once this development is complete it is easy to change the Site address (URL) in WordPress to show the new site in the root. (Make sure to backup the original first!) Here is the link from the WordPress Admin panel that explains this.
If you need to learn WordPress and want to take a little time without being pressured to get the new site in place this is the best option I have found.
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.
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.
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.
Using a tag page for marketing is something that can really help your ROI by using the WordPress Tag Template and creating a very specific page design for any tag.
Based on the WordPress Template Hierarchy it is very easy to create an individual page for a tag. If you look at a Tag Cloud on a site you will notice that there are always tags that get mentioned more than others. These tags should represent the most popular topics for a site and taking advantage of the WordPress Tag Template can result in a focused marketing campaign for these given tags.
The WordPress Tag Template flows like this :
The first template is the key here. If you have a tag you would like to create a custom page for you can copy your tag.php to a new file named tag-slug.php and then modify that page to fit that tag.
Here is an example:
On MusicRamble.com we focus on Classic Rock music. The general tag page lists excerpts from articles for the given tag. Examples of the basic tag pages are George Harrison and Steve Winwood. If you compare those two pages you will notice they are basically the same design.
Now look at Eric Clapton. Notice the sidebars, they have been customized specifically for Eric Clapton. The left sidebar is loaded with products related specifically to Clapton. This has resulted in an increase of Amazon sales for Eric Clapton.
Here is how it was accomplished.
- Copied the tag.php to tag-eric-clapton.php
- Removed the call to the sidebars, get_sidebar()
- Copied the contents of the sidebar.php file
- Placed the copied code where the previous call to get_sidebars() was.
- Moved all items in left sidebar to right sidebar
- Placed the product links in the left sidebar.
The resulting custom tag page shows up in the file list on the WordPress -> Presentation -> Theme Editor menu so it is easy to work on. At any point if we decided not to use this page, all we have to do is delete it and the default tag.php will once again be used for this tag.
Are you getting the most out the WordPress Tag Template?
The WordPress Template Hierarchy is a critical part of truly understanding how your WordPress blog works.
Have you ever wondered why some WordPress themes have certain files while others do not?
A WordPress theme requires only two files as I have discussed before, the index.php and style.css. If you took a basic WordPress Theme and deleted all the files except those two in the theme folder, it would still work. However, the pages would basically look the same.
Now the question is, where do these other files come from? And how does WordPress know which ones to look for? This is actually a very simple process. WordPress uses a page hierarchy to choose which files to use for each type of page.
As an example if there is a single.php file, WordPress will use that for the individual (single) post, if that file does not exist, it will use the Index.php file.
There are 10 basic WordPress Theme pages, these are:
- 404 (Not Found) page
- Attachment page
- Author page
- Category page
- Date page
- Search Result page
- Single Post page
- Tag page
- The Main (Index) page
- WordPress Page
This gives us the ability to customize each type of page. This WordPress Codex page explains the Hierarchy.
Let’s look at the Tag.php page as a more specific example.
The Tag page hierarchy goes like this.
- The Tag Template with a matching slug. If the tag’s slug were sometag, WordPress would look for tag-sometag.php
So if your WordPress theme does not have a Tag.php page you can easily copy the archive.php page to create a custom tag page, if you do not have a archive page, you could copy the index page to start your tag page.
To help you I have created a simple text file that lists the WordPress heirarchy that you can download here.
So with just a little thought and practice it is very easy to create very unique pages for your WordPress Theme.