How to Migrate Your Static Pages to WordPress

Update: This post applies to older versions of WordPress, and will not work with more recent versions.

If you have an existing web site and you’re adding WordPress to it, then you probably have a set of static pre-WordPress web pages that look completely different from your blog. Here’s a quick guide that shows you how to migrate those static web pages so that they use your currently selected WordPress template.

The basic outline of the process is that you need to convert all of your static .html files to dynamic .php files. This means that you’ll need to edit all of your .html files, rename them, and set up your server-side redirects so that links to old .html files will get redirected to the corresponding new .php files. Read on for the details.

Before we start, I’m assuming that you’ve already set up WordPress and got it running correctly. If not, then I recommend you watch Rachel Cunliffe’s really great Flash tutorial on getting started with WordPress.

1. Modify your .htaccess file

Disclaimer: You should be especially careful whenever you modify your .htaccess file because slight errors can make your web site become completely inaccessible, and apparently it’s even possible to create dead loops that lock up your server. Therefore when proceeding with these instructions you should be very careful, be ready to restore the old version of your .htaccess file if anything goes wrong, and be ready to accept responsibility for any problems with your web site that arise from following these instructions. Caveat emptor.

If you haven’t been put off by the preceeding paragraph, then the first step is to modify your .htaccess file (which should be in the root of your web file structure) so that it automatically redirects the browser from a missing .html file to the new .php file. You should already have a section in your .htaccess file that WordPress either put there or told you to put there, which looks similar to this:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

Your section may look different from mine, but basically you’re looking for the code that handles your permalinks. This code redirects to the root of your blog if the requested page doesn’t exist.

After the RewriteBase line and before the first RewriteCond line, insert the following code (which was adapted from an example in the extensive Apache URL Rewriting Guide):

# If the requested .html file doesn't exist, but a .php file
# by that name does, then redirect to the .php file
# permanently:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)\.html$ $1 [C,E=WasHTML:yes]
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^(.*)$ http://www.symbolcraft.com/$1.php [R=301,L]
# Restore the requested .html filename if a .php file by
# that name didn't exist either:
RewriteCond %{ENV:WasHTML} ^yes$
RewriteRule ^(.*)$ $1.html

Please make sure to first change www.symbolcraft.com to the domain that you’re using for your site. This new section of your .htaccess file will change any requested URL when the requested file ends in .html (and when the .html file doesn’t exist) so that the request ends in .php instead (but only if the .php file exists). The “R=301″ code tells the referrer that the redirection is permanent. Once you’ve migrated all of your static pages from .html to .php, this set of rules will redirect requests for the old (now missing) .html files to requests for the corresponding new .php files.

However, if the request is for a file that doesn’t exist with either .html or .php extensions, then the request will fall through to the WordPress permalink RewriteRule. This is important because permalinks don’t point to actual files on your Web server, but rather instruct the root index.php file how to find the post content in the database.

If at this stage you have any problems with your web server (misconfiguration errors, or pages not found), then delete the lines you just added and save .htaccess in order to get your site working again. If this happens you’ll want to proof-read your changes to make sure you haven’t made a mistake. If your permalink RewriteRule is significantly different from mine, then you may want to read Neil Crosby’s excellent introduction to the Apache mod_rewrite module at workingwith.me.uk in order to gain a better understanding of Apache rewrite rules before trying again.

2. Edit Your Files

Now the stage is set and you can begin converting your old .html files to new .php files that use your fancy WordPress template. You’ll want to strip off your HTML header and footer and replace them with the WordPress server-side PHP script code that provides the header, footer, and sidebar. For example, if your original static page looked like this:

<HTML>
<head>
<title>My static page</title>
<link rel=”stylesheet” href=”mystylesheet.css” type=”text/css”>
</head>
<body>
<p>My page content</p>
</body>
</HTML>

You should edit the page content so that it looks like this:

<?php
define(‘WP_USE_THEMES’, false);
require(‘./wp-blog-header.php’);
get_header();
?>
<div id=”content” class=”narrowcolumn”>
My page content
</div>
<?php get_sidebar();?>
<?php get_footer();?>

Make sure you edit the path './wp-blog-header.php' to point to the file path on your Web server where that WordPress file actually resides.

Unfortunately there doesn’t appear to be a way to get WordPress 2.0x to customize the title for a static page like this without modifying the core WordPress files. This would be a really nice feature for a future version of WordPress, though.

3. Rename Your Files

Once you’ve changed all of your files, rename them and upload them to the server. Test your new .php pages to make sure that the Web server can find them and verify that they are using the WordPress templates correctly. Once you’re satisfied that the new .php pages are working, you can delete the corresponding .html files on the server (but make sure to back up those .html files first, in case you run into trouble!).

You’re all done! Your old static pages should now be using your lovely new WordPress template.

17 thoughts on “How to Migrate Your Static Pages to WordPress

  1. boardtc

    My files are not on he same server. A couple of questions:
    - what wordpress directory should I upload my converted file to?
    - can i include all my html in the static text?

  2. pjl Post author

    boardtc: If you’re moving a set of Web pages from one server to another, you’ll probably want to locate the files in the same relative location so that relative links between the pages continue to function. So if the pages were in the root directory of your old server, you should probalby copy them to the root directory of your new server. You can include all of your html in the static text except for the ‘html’ and ‘body’ tags, and the ‘head’ tag and all of the content inside the ‘head’ tag.

  3. boardtc

    @pgl. . thanks. i have a wordpress blog installed on my site root. Say I have converted this new file (great to hear I can have all my tables in there) and it is test.php, what directory in the standard wordpres install do I upload this to, so it appears as a page on the wordpress menu? Hope that is clear.

  4. pjl Post author

    boardtc: You can put test.php anywhere you like, but it won’t automatically appear anywhere in your WordPress pages. You’ll need to edit your template (probably sidebar.php) and add the link to test.php there yourself. So if you put test.php in your web server’s root folder, the link would be to “/test.php”. If you don’t want to put the link to your page in your WordPress template, you can always use WordPress to create a new page and put the link to your static page there. The link to the new page will appear automatically in your sidebar and that page will contain the link to your static test.php file. Hope that helps.

  5. pjl Post author

    PC: To make a normal page in WordPress, log into your WordPress administrator account, and select the “Write” tab and then the “Write Page” sub-tab. However, if you want that page to redirect to another site, then DON’T do that, and instead add a redirect your .htaccess file. Something like this might work, but I haven’t tested it:

    RewriteRule ^mypagename(/)? http://www.someothersite.com/ [L]

    Where you’ll have to change “mypagename” to the page you want to use for the redirect from the current site, and “someothersite.com” is the domain name for the site you’re redirecting to.

    Hope that helps.

  6. Pingback: Merrick Virtual Assistant Blog » Blog Archive » Migrate a static website to dynamic blog content?

  7. Pingback: Loosely Speaking—A Virtual Assistant’s Blog » How to Convert a Static Web Site to a WordPress blog site

  8. Pingback: Migrate 15 html pages to WordPress | computer Jobs in sfbay

  9. pjl Post author

    @Divinelight Yoga Trainer: To make your WordPress theme match your existing web site you’ll need to edit your site’s theme. In my version of WordPress the “Theme Editor” is a sub-menu item under the “Presentation” menu of the administrator’s dashboard. There you can edit the CSS settings for your blog to make them more closely match the CSS for your original web site.

  10. Steve Wiideman

    This was killing me on a static to WP conversion where I had some GREAT inbound links pointing to .html. You’re the hero of the day – thanks for the super 301 script I injected to an htaccess file preserving all my link juice!

  11. Pingback: Convert html pages to WordPress – WordPress as CMS

  12. Pingback: How to Convert a Static Web Site to a WordPress blog site | Loosely Speaking

Leave a Reply