Managing hybrid static/WP sites

One of the things I run into a lot is the situation where there is an existing static site, which needs to add a section that will be managed by WordPress.

The brute-force method of doing this is to start with the _s (underscores) WordPress theme, and add the visual elements from the static section(s) of the site, so that when you are finished, both the static section(s) and the WordPress section have the same look and feel.

One problem with this is that when you need to change anything that appears on each of the pages, you have to change it two places: Your static site manager and in WordPress. This always creates problems.

The better way is to recast your static (HTML) pages as PHP pages, and use PHP to include common page elements into both the static and WordPress sections.

For example, let’s say you have a base set of metatags that appear in each section.

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/font-awesome.min.css" rel="stylesheet">

With PHP pages, you can create a separate file (for example, metatags.htm) that contains this code, and call it with the following PHP command:

<?php include $_SERVER['DOCUMENT_ROOT']."/metatags.htm"; ?>

The beauty of this approach is that you can use this same include code in both your PHP static pages, and in the header.php file of your WordPress installation.

You can repeat this process for common page headers, page footers, navigation, etc.

When it comes time to update this information, you make your changes to the include file, upload it, and your entire site instantly has the new code. Just remember, if you include external CSS or load jQuery through one of your PHP includes, edit the function.php wp_enqueue section so that you’re loading only one of each needed asset.

Another nice feature is that when PHP includes an external file, it executes any PHP code in that file, even if the extension is .htm or .html. So for example, if you have a file called footer.htm, which you call using PHP into your main documents, and within that footer.htm file is the PHP code <?php echo date('Y'); ?>, that expression will evaluate to the current year. This makes it trivial to keep your copyright notice up to date, because PHP will update it with the dawn of each new year.

In my sites, I use the .html extension for static pages that are going to stay static, .htm for include files, and .php for dynamic pages (which encompasses both WordPress pages and formerly static pages that I’ve converted to use PHP includes). This way, I can tell at a glance what file are supposed to have which formatting.

Note that in many cases you can also change your .htaccess file to force your web server to treat HTML files as if they were PHP files, which saves you from having to rename them and manage the links, but on my development computer, I prefer not to have HTML files processed as PHP, so I have to rename each file before I can preview PHP locally. I also like having an at-a-glance view of where I am in the conversion process.

If your site gets thousands of hits per day, you may see some performance drop due to switching from HTML to PHP, but for most of us — with sites seeing only a couple hundred hits per day — this isn’t really an issue, if for no other reason than that you’re probably also running on an inexpensive server that isn’t lightning fast to begin with.