Setup a Development Environment for Your WordPress Site

General

How many times you have stumbled upon a theme or a plug-in that you want to test on your site? WordPress does not offer a preview feature so the only option is to make it live which should not be the prefered (and only) option while testing or in general experimenting with new features.

In this article, we will investigate how we can setup a copy of our WordPress powered site on a local machine will serve as a development and test environment.

Prerequisites

The following tools are needed:

  • WordPress Backup Plugin (included by deafault as part of WordPress)
  • XAMPP (if you are using Windows) or MAMP (if you are using OS X)
  • phpMyAdmin (included in XAMPP and MAMP)

Step 1 – Backup your site

I am certain that everyone is backing their site every week so it is safe to assume that you do not need any instructions on how to do a full backup…. just kidding! Backing up any WordPress site is a two step process.

The first step involves backing up the database that WordPress uses and the second step involves backing up the WordPress core files, your themes and plugins from the remote server.

Database Backup

WordPress includes a plugin for automating the process of backing up the MySQL database. The plugin can be accessed from the admin section (Dashboard), under Manage > Backup. The plugin automatically selects the core tables but since third-party plugins may use extra tables, a list is displayed on the right-hand side where you can select additional tables. As a rule of thumb, any table with the wordpress prefix (default value ‘WP_’) should be selected.

Select whether you want to email the backup to yourself or download it directly to your local machine and press the Backup! button. When the operation is finished you have made a backup of the WordPress database.

WordPress Files Backup

In order to backup the files, you need to use an FTP application like WinSCP if you are running Windows or CyberDuck if you are running Mac OS X.

Start your FTP application and connect to your WordPress server. Navigate to the wp-contents directory of your remote server and download all the files and directories it contains to your local computer.

Step 2- Install local web server

You need to install a web server on your local computer. The easiest approach is to download and install an Apache web server containing MySQL, PHP. XAMPP is the best product to use if you are running Microsoft Windows. If you are running Mac OS X then MAMP is your friend. Both of them are really very easy to install and to use – just download, extract and start.

Note that both of them create a root account for MySQL with blank password or with the word “root”. It is highly recommended to change the password to something else and use that password when installing WordPress.

phpMyAdmin is also installed as part of XAMPP and MAMP. 99.99% of the times, it resides on the phpmyadmin directory (or an alias is in place for this location). Open it up, and create a database for the WordPress development site.

Step 3 – Install WordPress

Download a copy of WordPress from the WP site. Extract it into the httpdocs or www folder of your XAMPP installation. Navigate to that directory through your browser and complete the WordPress installation process.

Step 4 – Import your Settings

Our first step was to backup the WP database. We will now use the produced MySQL script to populate the backup WP system with our site settings.

Open the MySQL backup script with your favourite text editor, and search for the term ‘wp_options’. That’s the table that holds your settings. We need to remove the ‘siteurl’ entry since it is now different on the local server (and the correct entry for ‘siteurl’ was created during the WordPress installation for us). So, delete the line that reads something like:

INSERT INTO `wp_options` VALUES (1, 0, 'siteurl', 'Y', 1, 'http://www.dountsis.com', 20, 8, 'WordPress web address', 1, 'yes') ;

Save the changes and close the file. Navigate to phpMyAdmin and select the database where you have installed the development WP site. Execute the database backup script to import the dev system with your content and settings.

Finally, copy the local copy of the WordPress Files backup (themes and plugins) that was created during the 1st step to the equivalent location of the development site.

The development/test environment should now be an identical copy of the live site where you can test new themes and/or plugins or develop your own.