Blog of Steve Savage A blog for business analysts and architects, and fellow user's of Sparx's EA

Creating a development environment for WordPress.

Although the default installation for WordPress meets my minimum requirements, there are several visual and other changes I'm considering that I don't want to experiment with using the live site.   So before I go any further,  I've decided to set up a development environment.

Step 1: Creating a virtual development machine.

To prevent unnecessary overhead on my system, and also to simplify testing and backups, a few years ago, I standardized on doing all my development work using using virtual machines, this lets me have any combination of os/tools/services required for a development project stored in one, easily backed up and portable file.   Currently I'm using Oracle VM Virtual Box, so hopefully Oracle doesn't start charging for this currently free application.

I've decided to install Windows XP as the guest OS for now, mainly because I have an extra licensed copy.

After installing the OS, including IIS, then the patches, and the Guest additions, I have a basic OS and webserver ready for use.  I recommend making a backup of the VM file at this point, you can then clone the backup, and use the clone as the starting point new projects, with both the OS and IIS ready to go.

Personally, I don't bother install a virus scanner on the guest OS, instead, I simply do not surf the web from within the virtual machine (with the exception of FTP to and from my live server), instead I download all files and updates using the host OS, and then move them to the guest OS using a virtual shared folder.

Step 2: Setting up the development environment for WordPress.

Before I began this step, I checked the version of PHP and MySQL installed by my hosting company, luckily they have the latest versions of both installed.

1. Downloaded and installed MySQL server 5.5
2. Downloaded and installed MySQL workbench 5.2
3. Downloaded and installed PHP 5
4. Pointed my IIS default website to the folder I wanted to use as the root of my dev-site
5. Enabled directory browsing in IIS for the site (find this makes dev work much easier.)
6. Created a quick "hello world" php file to make sure everything was working.
7. Created a test db using MySQL workbench to make sure that the server was working.

Step 3: Copying my live WordPress site to development.

Because I had already installed WordPress on my hosting, creating the development environment was pretty straight foward:

1. I FTP'd the contents of my live-site to the dev-site folder I created in Step 2.4
2. Loaded up the browser in my virtual machine, and pointed the location to "localhost"
3. Up came my website, with the php running on my dev machine, but the site is still pointing to the MySQL server of my live site.  I want a dev-site completely detached from the live site.
4. I opened the wp-config.php file found in the root of my dev-site, the file contains the following:
   1. DB_NAME - the name of the database schema created by my hosting company for WordPress
   2. DB_USER - the user name that WordPress uses to access the database
   3. DB_PASSWORD - the password for that user, this should be a long random string, if not, you should see how you can get it changed.
   4. DB_HOST - the IP address of the MySQL server on my host.   I copied this line, commented out the original, and changed it to "127.0.0.1"
5. Using MySQL Workbench, under Server Administrator:
   1. I created a new Server Instance, I called wp-live, using the information from Step 2.
      • I connected to the live-db using the new Server Instance.
      • I used the Data Dump feature to export a Self-Contained File (.sql), I called wp-snapshot.sql, containing the contents of my live-db.
      • I closed the new instance
   2. I connected to the my dev-db, using the local instance created when installed MySQL, called Local instance: MySQL.
      • I used the Data Dump feature to import the wp-snapshot.sql into the dev-db, this created a duplicate of information in my live-db in my dev-db, including the same DB_NAME.
      • I used the  Accounts feature to create an account with the same name and password as DB_USER, and DB_PASSWORD from Step 3.2, and gave the account the DBManager role.
6. To make sure that I was definitely using the dev-db not the live-db, I disconnected my system from the internet.
7. I loaded up the browser in my virtual machine, and pointed the location to "localhost"
8. The page content loads, so the dev-db is working, but there is no formatting.   Taking a quick look at the HTML, I see that links still contain stevenksavage.com.

Step 4: Changing the domain for my WordPress development site.

The answer was fairly simple, I simply add the following lines to my wp-config.php:

• define('WP_HOME','http://localhost);
• define('WP_SITEURL','http://localhost');

I now have a development environment for WordPress that I can use to start experimenting with themes, templates and plugins without affected my live-site.