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 ^(.*)$ https://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.