Installing WordPress for development without clobbering HTML website

There are a lot of starting points for this procedure, and to a certain degree they all have to handled differently.

  • Plain website using .html files
  • Manually built website using PHP
  • Site built in Joomla!, PHPNuke, Mambo or similar

These instructions are targeted at websites hosted on a Linux/Unix platform, rather than on a Windows platform. To install WordPress your hosting environment needs to support PHP and MySQL. Some Windows platforms have PHP and MySQL available, but I can’t test this environment, so I can’t promise that it will work.

Note: These instructions only cover plain HTML websites at the moment, but any PHP programmer should be able to take my code and adapt an existing php site this way.

Step 1: Back up your existing website, just in case something awful happens. You should do this anyway, ideally whenever you modify your website, or every day/week/month etc.

Step 2: Read all of these instructions from beginning to end and identify which are relevant to you. Log in to your hosting environment and work out how to do the steps, without actually doing them. When you understand the process, you can start actioning Step 3.

Step3: If you have a plain website using .html files and no PHP, the process will be quite easy. You can just install WordPress and your existing website files will remain untouched.
What might change is the home page. Your homepage will probably be called index.html. WordPress will install its own homepage called index.php. Immediately after installing WordPress, we rename this to wp-index.php so that the old index.html is the homepage for visitors again.

Action 1: Install WordPress – follow the instructions at http://codex.wordpress.org/Installing_WordPress

When you get to Step 5 (in the WordPress instructions) “Place the WordPress files in the desired location on your web server: “:
If you want WordPress to be at the top level of your website, use the File Manager in Cpanel, or use FTP, to check that there are no php files at the top level at the moment.
When you are sure that you won’t overwrite the existing files with versions from WordPress, move everything out of the wordpress/ directory to the top level directory where your website files are.

Action 2:
In your control panel File Manager rename index.html to old-index.html

Again with the tools available to you in your control panel or otherwise, edit index.php and add the lines between and including the BEGIN and END below.
The entire index.php file is shown here.

 
  <?php

/** BEGIN: Remove this section when you want the world
 ** to see the WordPress site.
 **/
 $use_wordpress = 0;
 foreach (array_keys($_REQUEST) as $request) {
        if (preg_match('/wordpress_logged_in/', $request)) {
                $use_wordpress = 1;
        }
 }
 if ($use_wordpress == 0) {
        include("old-index.html");
        exit;
 }
/** Remove this section when you want the world
 ** to see the WordPress site.
      END **/


/**
 * Front to the WordPress application. This file doesn't do anything, but loads
 * wp-blog-header.php which does and tells WordPress to load the theme.
 *
 * @package WordPress
 */

/**
 * Tells WordPress to load the WordPress theme and output it.
 *
 * @var bool
 */
define('WP_USE_THEMES', true);

/** Loads the WordPress Environment and Template */
require('./wp-blog-header.php');
?>

You can visit http://www.mysite.com/ and see your old website, as will all normal visitors.
If you visit http://www.mysite.com/wp-admin/ and log in, then go back to look at http://www.mysite.com/ you should see the WordPress site.

admin: