If you read the first article in this two part post, and followed the instructions, you now have a running WampServer (Windows, Apache, PHP, and MySQL). Aside from the operating system itself, these other components are what make a WordPress web site possible. Apache provides the HTTP server, PHP helps create dynamic web pages, and MySQL stores the content for those dynamic pages. To tie everything together into a complete web site you need to install WordPress (other CMS/Blogging software options exist, but this post focuses on WordPress).

To make the WordPress installation work on your newly installed WampServer you need to complete three pre-WordPress installation steps: Edit your computer’s host file, edit the Apache httpd.conf file and test, and then create a MySQL database and user. Once you’ve completed those steps, you’ll install WordPress.

Step 1: Edit Your Host File

Open your host file located in a subdirectory of your Windows OS directory. This file allows you to map IP numbers to host names which makes it possible to refer to your “staged” or “development” version of your web site with a URL rather than 127.0.0.1 (the default IP number for the localhost, which is your computer).

My copy of the hosts file (and most likely yours too) is located in c:\windows\system32\drivers\etc. Open this file (notice it has no extension) in a simple text editor such as notepad. At the end of the file, after all of the comments, add an entry for each “virtual” site you plan to create. I created an entry for TechTraction and one for Brothers In Blog (my two blogs), and since I still want to access the “real” versions of these two sites, I added the prefix “local” to each hostname so my machine, and more importantly “me”, can tell the difference which site is which by looking at the URL in my browser’s address box.

127.0.0.1 localhost
127.0.0.1 local.techtraction.com
127.0.0.1 local.brothersinblog.com

Note: I added the “local” prefix to my URL in the host file, but you can use anything that suits your needs or personal preference. For example, I could have called my site dev.techtraction.com, staged.techtraction.com, or even foo.techtraction.com

Step 2: Edit the Apache httpd.conf File and Test Apache

Now I need to create a “virtual host” entry in the Apache httpd.conf file for each site I want to stage. If you’re not familiar with the httpd.conf file, it’s basically a configuration file for the Apache HTTP server. You can adjust various settings for your HTTP server in this file and adding a “virtual host” is one such adjustment.

1. If your WampServer is NOT running, start it now.
2. Then, left click on the icon in your system tray to bring up the Wamp menu.
3. Scroll to the “Config files” option and pause. A submenu appears.
4. From the config files submenu select the httpd.conf. This selection opens the file in a text editor (mine was opened in NotePad).
5. Scroll to the bottom of this file and you might see an example of how to enter a “virtual host”. If not, don’t worry.
6. At the bottom of this file, but above the last two “include” lines, enter the text shown below:

NameVirtualHost 127.0.0.1

<VirtualHost 127.0.0.1>
DocumentRoot "C:/wamp/www"
ServerName localhost
</VirtualHost>

<VirtualHost 127.0.0.1>
DocumentRoot "C:/wamp/www/techtraction.com"
ServerName local.techtraction.com
ErrorLog logs/techtraction_error.log
</VirtualHost>

<VirtualHost 127.0.0.1>
DocumentRoot "C:/wamp/www/brothersinblog.com"
ServerName local.brothersinblog.com
ErrorLog logs/brothersinblog_error.log
</VirtualHost>

Make sure you change the path for DocumentRoot to the path to your WampServer’s DocumentRoot. Edit the ServerName to match the name of your virtual host. Update the ErrorLog setting to something that corresponds to your virtual host and save the file. Notice I have a virtual host entry for each web site I want to stage. You may have more or less than I have. Just make sure to update this section of your httpd.conf file to match your configuration and not mine.

Now that you’ve created a virtual host entry you need to create the supporting directory under the “www” directory of your WampServer installation.

I accepted the default directories for my WampServer installation so I only need to create two directories under c:\wamp\www (one directory for techtraction.com and one for brothersinblog.com). I added the .com extension to both directory names so I could quickly see that these directories “stage” those web sites. Feel free to name your directories to whatever makes sense to you.

To test the configuration create a small text file with the following single line of PHP code:

Save this file as “index.php” to the directory for each of your “staged” environments (in my case I saved a copy to c:\wamp\www\techtraction.com and c:\wamp\www\brothersinblog.com). Once you’ve created that file, left click on the WampServer icon in your system tray. Scroll up to the Apache menu option. Hover over this option and a sub menu appears. From this menu select restart service. If everything was entered correctly, you should be able to hover over the WampServer system tray icon and see a message that indicates all services are running. If you don’t see that message, you probably made a typo. Double check your work and try again.

After Apache restarts, open a browser and go to http://localhost the Wamp home page appears with your virtual hosts appearing under the “projects” section near the bottom of the page. Click on your virtual host and if everything is working correctly, and barring any typos, you’ll see a PHP informational page like the one displayed below:

Now that Apache is running, and you can access each virtual host you have configured, you’re ready to move on to MySQL.

Step 3: Configure a MySQL User and Database for WordPress

The WampServer comes with PHPMyAdmin which allows you to easily perform various MySQL operations through a web based GUI.

1. Open a browser and enter http://localhost
2. Near the bottom of the WampServer screen you should see an option for PHPMyAdmin. Click it.
3. In the PHPMyAdmin screen look for the option to “Create new database”

4. Enter “wordpress” as the new database title in the box provided (you can, however, name it something else if you want) and click “Create”. PHPMyAdmin responds with a success message if the database was created without a problem

5. Next, click the home icon in the upper left corner of PHPMyAdmin

6. Further below the “Create new database” option is an option called “privileges”, click that.
7. On the next screen you will see an option to “Add a new user”, click on that option.

8. Enter a user name in the field provided and make sure “user text field” from the drop down menu is selected. For my new username I entered “wordpress.” You, however, can enter any name you want.
9. Skip down to the password field and enter a password. Re-type the password in the next field as indicated.
10. Leave the “Global privileges” set to their defaults and then click on the Go button in the bottom right part of the screen. PHPMyAdmin responds with a success message near the top of the next screen.
11. Click on the “Privileges” option again. This time, however, it most likely appears across the top of the screen with other options.
12. Find the user you just created. At the end of this listed user notice a little icon the represents “edit privileges”, click this icon.
13. In the “Database specific privileges” section, select the database you just created from the “Add privileges on the following database” drop down menu. The page should refresh after this selection.
14. Click “Check All” to select all privileges, and then press the Go button at the lower right part of the screen.
15. PHPMyAdmin responds with a success message near the top of the next screen.

Step 4: Install WordPress

At last the easiest part of the entire installation: WordPress.

1. If you haven’t done so already, go to the WordPress.org web site and download the latest version of WordPress.
2. Save this file to your local machine and uncompress it to a temp directory.
3. Inside the temp directory you should see just a single WordPress directory. Inside of this directory are all the documents and sub directories needed for your staging/development site.
4. Open the WordPress directory and select all of its contents and choose copy.
5. Open the sub directory you created for your “staging” server that sits beneath the Wamp www directory (in my case that directory is c:\wamp\www\techtraction.com). Paste the WordPress contents into this sub directory. Repeat this copy paste process for each site you plan to stage or have configured as a virtual host back in your httpd.conf file.

Once I was finished copying and pasting, my directory structure looks like the following screen shot:

At the root of your virtual host directory (in my case that’s c:\wamp\www\techtraction.com) you’ll find a file called wp-config-sample.php. Open this file in a text editor and update the DB_NAME, DB_USER, DB_PASSWORD settings to those names you used when you created your MySQL database and user. Once I updated those settings, that part of my wp-config-sample.php file appeared as follows:

define('DB_NAME', 'wordpress'); // The name of the database
define('DB_USER', 'wordpress'); // Your MySQL username
define('DB_PASSWORD', '12345678'); // ...and password
define('DB_HOST', 'localhost'); // 99% chance you won't need to change this value
define('DB_CHARSET', 'utf8');
define('DB_COLLATE', '');

Then select File - Save As and give it the new name of wp-config.php.

Next open a browser and enter the following URL (replace techtraction.com with your virtual host name) to kick off the WordPress installation:

http://localhost/techtraction.com/wp-admin/install.php

Provided you did everything correct up to this point, you’ll get the “First Step” WordPress installation page. Click on the “First Step” option.

The next screen appears asking you to enter a name for your blog and your email address. Also, there is a check mark by default next to the option to include your blog in search engines such as Google and Technorati. Since this is NOT your real blog, remove this check mark and click “Continue to Second Step”.

That’s it, WordPress is installed on your brand new WampServer staging/development environment! The final screen provides the admin username and password for your new installation. Make sure to write this information down so you can log into your new environment. Once you do login, I suggest you change the admin password to something you’ll remember. After that, take a look at your new site and give yourself a pat on the back for a job well done.

Share, Bookmark, or Email this post

If you liked this post, subscribe to TechTraction's RSS feed or TechTraction's email feed

Filed under: How-To & Tech Tips