Establish a local WordPress development environment using WampServer

If you have ever thought about how you can improve your website without  impacting your current visitors, you’re probably ready to establish a local development environment where you can make your changes on your desktop or laptop, and then migrate the changed files out to your production web server, to effectively “roll out” new changes.  It’s the best way to go when developing due to the isolation and control you can gain, and perhaps a bit confusing at first.  I’ll walk through how I have recently set up my own personal development server on my laptop so you can too.

I’ll also walk-through setting up a WordPress blog instance so that we can work with WordPress locally.  Being able to do so will bring a few benefits.

• Developing locally is much faster than over the wire, allowing us to get more done, faster
• Because development is isolated to our local system, we won’t impact site visitors, in case the site we are working on is a live site
• We can try new plugins and themes, develop plugins and themes safely
• Develop WordPress solutions without being connected to the Internet

As you might know, this year I’m going to show you how to build an image based WordPress site.  I’m going to use my local development environment to build everything, and when I’m done, I’ll deploy it out to the Internet and make it live.  Actually, there will probably be a few steps where things will be live just for demonstration.

What I’ll show you is everything I went through to establish my own WordPress development environment.  This requires that I have an Apache web server, PHP and MySQL running.  WampServer provides all three of those technologies, and it’s in the name too: Windows Apache MySQL PHP, WAMP.  Although, once WampServer is installed, we’ll need to make some changes to the configuration files.  Once WampServer is set up, we’ll then walk through establishing a working WordPress install, right on your home system.  From there the sky is the limit.  You will be able to do everything you can do on a web host, but with the convenience of a locally running application.

If that sounds appealing to you, let’s not waste any time and get to it.

Who is this for?

This article is geared towards developers and those that are looking to become developers, or teach themselves web development in the comfort of their own system.

Requirements

There are a few things you should know and be aware of before just diving on in.  WordPress requires PHP version 4.3 or greater as well as MySQL version 4.1.2 or greater to run on the date I wrote this.  You also need an Apache or Nginx web server.  WampServer gives everything we need to get ourselves up and running, and that is why we are using it. The official WordPress requirements page may express more.

I’ve been through the install process a few dozen times now as I built this article, and each time I’ve never ran into any problems.  The issues I do run into are more configuration, and I’ll explain those as they occur.

Downloading and Installing WampServer

Download WampServer

Using the link above, check out the WampServer site and grab the download from their download page.  When you do, you’ll find you’re redirected over to SourceForge.  SourceForge is an open-source code repository where many great applications are built by developers around the world.  Save the file to your desktop and run the application.

During the install process, after you accept the license agreement, you are asked to provide an installation destination.  The path you provide here will have an impact on where your root website will be placed.  For instance, I specified my path as c:\wamp to keep things simple.  It’s easy to remember and short.  We’ll be using this path later, and having a short path is going to be helpful in a few different ways.

Clicking through the rest of the installer is fine, there isn’t much else that will happen.  After the files are copied and if you have FireFox installed, you might get the following prompt:

I use FireFox for any and all web development, and I recommend you do too.  It’s easier to make accommodations for Internet Explorer after the fact, than it is the other way around.  Plus you don’t get great tools like FireBug either!

I left the default mail parameters alone for now.

Starting WampServer for the first time

If you didn’t start WampServer automatically after installing, or if you are returning to do more work WampServer, you can do so any time by finding the WampServer menu item and clicking the “start WampServer” link.

You might also see a Windows Security Alert warning you about the Apache HTTP runtime.  This particular executable is going to attach itself to port 80 and listen for any requests coming in, so I’m going to allow it to communicate with private networks, but not public networks.

You should see a new system tray icon now.  The icon will change color depending on the status of the WampServer, the yellow in mine indicates that I have an issue that I’ll have to sort out, not to mention the fact that the message reads “server offline”.

Clicking the system tray icon will display the menu, and it’s here that I’ll refer to many times through the remainder of setting things up. When I do, you’ll see it like this: Apache->Service->Test Port 80.

Go ahead and click Test Port 80 right now.  If you see a message that reads “Your port 80 is not actually used.”, you’re all set and can skip over the next few items.

If you already have another application listening to port 80, then you might want to consider who gets to use port 80.  Each web server needs their own port to listen through, and I have mine in use by Microsoft’s Internet Information Services (IIS) right now, so I’m going to disable the service.

To disable the server, right-click on My Computer and navigate to My Computer->Manage.  This will bring up the following screen.

The numbering follows my own click pattern, yours should be very similar.  Looking at the World Wide Web Publishing Service tells us that the service is “Started” and it’s set to “Automatic” start.  Right-clicking on the service and choosing Properties reveals all you need to stop the current running instance, and configure it to not automatically start every time Windows does.

Running Apache->Service->Test Port 80 again should give you the message “Your port 80 is not actually used.” now.

Testing and configuring the WampServer install

WampServer is now running and we can start playing around with it.  Open up FireFox and enter http://localhost into the address bar.  You can also do this through the WampServer menu via the Localhost link at the top of the menu.  You should see the following screen.

This is the primary WampServer Homepage for your local installation.  From here you can see the versions of Apache, PHP and MySQL that is installed, as well as the extensions that are currently in use by PHP.

Installing WordPress locally

Download WordPress

After you download the latest stable release of WordPress, extract all the files into a folder under c:\wamp\www

You should end up with the root of WordPress local website at c:\wamp\www\wordpress.  We now need to set up the MySQL database instance.

Setup MySQL for WordPress

WordPress installs the database tables it uses automatically when you first run WordPress.  However, this will fail if we don’t first provide a database to use, so we need to create a blank database in MySQL.  To do this, first open the phpMyAdmin application from the top level of the WampServer menu.

Create a new database called “wpdata” and set the collation to utf8_general_ci, unless you feel something else would be better for you.  For most of us, utf8_general_ci should do just fine.

With a new database waiting for WordPress to use, you might notice that WampServer installs MySQL without the root user having a password.  Not a terribly bad thing since everything we’re setting up is behind our own firewalls.  I don’t know what problems might come from this, so I’m going to modify the root MySQL users password to be something other than nothing.  To do this yourself, the first thing we want to do is go to the Privileges tab in the phpMyAdmin interface.

Change the root password for the host 127.0.0.1 first since we’re kinda using localhost right now.  You don’t want to shut yourself out so early.  You’ll need to do these steps again for localhost.  Once you click the icon indicated in the image, you will see an area that looks like this:

Simply fill in the password you want to use and remember it.  Click Go and then change the password on the localhost user account as well.  With both changed, we are now locked out of MySQL.  To rid us of our misfortune, we can update the MySQL configuration file at C:\wamp\apps\phpmyadmin3.2.0.1\config.inc.php and put our password on the line that reads:

$cfg['Servers'][$i]['password'] = '';
and make it
$cfg['Servers'][$i]['password'] = 'Put_A_Passw0rd_Here!';

Now when you hit refresh you should see your phpMyAdmin interface again, as well the warning should now be gone. The next thing we want to do is create a user specifically for our install of WordPress. On the Privileges tab you’ll find a link to add a new user. The values I’m using for my user are the following:

• User name = Use text field: localwpuser
• Host = Any Host:%
• Password = do0obiedoob1edooo
• I set my user for full blown access.

That’s all you need to do with MySQL.  With those steps complete we are almost ready to run WordPress for the first time.

Running WordPress for the first time

Before we can run WordPress for the first time, we need to do is tell WordPress how to access the database. Edit the WordPress configuration file located at C:\wamp\www\WordPress\wp-config-sample.php and fill in the blanks with the values you used above.

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'wpdata');
/** MySQL database username */
define('DB_USER', 'localwpuser');
/** MySQL database password */
define('DB_PASSWORD', 'do0obiedoob1edooo');
/** MySQL hostname */
define('DB_HOST', 'localhost');

After editing the wp-config-sample.php file, rename it to wp-config.php and access the new WordPress site by typing in “http://localhost/wordpress” in the address bar of your browser.

You should be presented with the following screen:

Fill in your information and uncheck the “Allow my blog to appear in search engines like Google and Technorati”, as it’s pretty much unnecessary to have search engines index this test site.

One final step, enable the mod_rewrite Apache module

WordPress uses the mod_rewrite Apache module to keep control over the URL’s that WordPress will create, but WampServer doesn’t enable it by default.  To enable the mod_rewrite Apache module, on the WampServer menu, click Apache->Apache Modules->rewrite_module.

That’s it!

You can now develop solutions for WordPress right from the comfort of your own system.  You don’t need to be connected to the Internet to work with this, and if things go awry, it’s really easy to start all over again.  If you need any assistance, the WampServers forums are an excellent location to drop a question or two, or you can even ask me here in the comments.  I can’t guarantee that I’ll be able to help, but I’ll try my best for you.

Enjoy your new found development freedom!

All images are copyright of their respective owners.

Wayne John is a health coach for people that want to lose weight, gain weight, improve athletic performance, or simply maintain a healthy lifestyle. Wayne has lost over 55 pounds and improves his current health every day by using simple, straight-forward techniques that anyone can integrate into their lives to achieve the same. Contact Wayne today to realize your own health and fitness goals, or get started now by completing and submitting the free Wellness Profile. He also has been developing websites since 1995 and programming solutions for clients even longer. He'd rather be outside having fun in the sun though.