The web is always changing and if you have clients like mine, you may find yourself with a long to do list of website tweaks and updates.  The good news is Wordpress, when combined with Wamp Server, makes it really easy to set up a development environment to safely make changes (and fix errors from those changes) without affecting the live site.

However, in my early days as a developer I found myself making these changes to a live site.  I was lost in the matrix; I didn’t understand the difference between local and live environments and more importantly, how to quickly transition between the two.

I turned beautiful websites into a giant construction project; most of the building intact, but with pieces of brick scattered here and there.  If a user were to go to the site during my renovations, they would be able to see something new every time they reloaded the page.  As I began experimenting with Wamp Server, I started to realize that I could work on websites locally and launch the changes all at once.  But I would find myself making the process too complicated, copying an entire site to my local drive, reconfiguring the files to run locally, and then re-uploading the entire site to the web.  It just took too long.

Some of you may ask, what the heck were you thinking?  Hopefully some will be in the same boat I was in and will be looking for a answer on how to get out.  The simple truth is I was new and didn’t have a lot of experience under my belt; my understanding of how to use WordPress as a content management system was very limited; and even with the plethora of how-to resources available for WordPress, I found it difficult putting all of the pieces together.

As with any business, a key to profitability is developing good processes that save you time and money.  The answer?  Create a local development environment that you can easily interchange WordPress themes with.

1. Download, install and turn on Wamp Server.

WAMP stands for Windows, Apache, MySQL, and PHP.  The last three are specific to servers and don’t come standard on your computer because most people don’t need to run their computers as servers.  A WAMP environment describes the development environment and is essentially a live server, just on your local machine.

Wamp Server is like WAMP for dummies.  In the past you had to download, install, and configure Apache, MySQL, and PHP all separately.  For guys like me, I had no idea how to do this.  Fortunately, the guys who developed Wamp Server have made it incredibly simple to download and setup.

Once you’re done, you should see a “WampServer” Folder under your programs.  Simply click “start WampServer”.

2. Setup your database.

Hopefully you already have some experience with WordPress.  As you know WordPress needs a database to interact with so let’s set one up on our machine.

Type “localhost” (no quotes) into your browser.  Under tools, click “phpmyadmin”.  From that screen you can create a new database.  You can name it whatever you want, but for simplicity I would just name it “wordpress”.

3. Download the latest copy of WordPress.

If you installed Wamp correctly, you should see a “wamp” folder in your C: drive.  Inside this folder you will see a “www” folder.  Anything in this folder will be read like a website.  Navigate to this folder and copy WordPress into it.  Make sure you’re you have unzipped the WordPress folder.

4. Setup Your WordPress Environment.

Look in the WordPress folder and open up wp-config-sample.php with any text editor.  Set DB_NAME to “wordpress” or whatever you named your database.  Set DB_USER to “root”.  Set DB_HOST to “localhost”.

1. /** MySQL settings-You can get this info from your web host */
2. /** The name of the database for WordPress */
3. define('DB_NAME', 'wordpress');
4. /** MySQL database username */
5. define('DB_USER', 'root');
6. /** MySQL database password */
7. define('DB_PASSWORD', '');
8. /** MySQL hostname */
9. define('DB_HOST', 'localhost');
10. /** Database Charset to use in creating database tables. */
11. define('DB_CHARSET', 'utf8');
12. /*The Database Collate type. Don't change this if in doubt.*/
13. define('DB_COLLATE', '');

********  Save the file as “wp-config.php”  ********

5. Setup up your local WordPress site.

Type “localhost” into your browser and under your projects, you should see a “wordpress” folder.  Click it and it will take you to the setup page for wordpress.  After you fill everything out, you will now have a local wordpress environment to work with.

Optional Steps

Here are some optional steps that I have taken to make it easier to operate in my development environment.

1. Download the latest copy of Aptana Studio.

This step isn’t necessary if you are already fond of a specific editor, but Aptana is my preferred editor to use when working on development projects.

2. Create a WordPress web project

In Aptana you can choose to create a new web project.  I created a “WordPress” project and have it linked to my “wordpress” folder in C:\wamp\www.

*To link the folder, un-check “use default location” in the web project wizard and browse to find your “www/wordpress” folder.

Now what?

Now you can download any themes that you want to work on directly into C:\wamp\www\wordpress\wp-content\themes.  Edit them locally and view your changes from “localhost/wordpress” in your browser.  When you’re done editing the theme, simply re-upload it to your live version of WordPress.

Now if I have a client wants changes done to their site, I download their theme folder into my local theme folder, open up WordPress from localhost and activate the theme.  Depending on what changes need to be made, I will either use dummy posts or actually export and import some posts from their live site to work with.  *Note:  You may have to use the WordPress Importer Plugin to do this.

*Depending on how extensive your changes are, you may also want to create a new theme instead of editing the existing theme. This allows you to easily revert back to the original theme in case you find any major issues with the changes you make.   Just open your style sheet and change the name of the theme.  You just never know what will happen when you go live.  Better to be safe then sorry.

My rule of thumb:

• HTML or CSS changes (anything that can be quickly undone) = update existing theme
• Javascript or PHP (anything that involves a script and can mess up the functionality of the site) = make a new theme

Additional Notes:

If you are looking to change your permalink structure in WordPress, which I always do, then you’ll probably need to enable mod-rewrite.

Look for the Wamp Server icon in your task bar.  Navigate to apache, apache modules, then click rewrite_module.

If you have any issues related to this you may be able to find your answer here:

• http://wordpress.org/support/topic/wamp-server-giving-404-errors-for-pages
• http://codex.wordpress.org/Installing_WordPress

Other Resources:

• Canadian Tech Online has a great YouTube video showing this process