Setting Up WordPress Locally with WAMP

[ Posted: ]

I don’t like having to always push my files to the server in order to work with server side code. It sucks and is really unnecessary. This tutorial will show you how to install WAMP and how to set up a Virtual Host so that you can put your website in any folder.

I’m picky and I don’t want all of my websites to have to live under c:/wamp/www/ and have to reference them as http://localhost/sitename/. I want to be able to put them anywhere I want and reference them with http://mysite.local

My development environment:

  1. OS: Windows 7
  2. Local server: WAMP
  3. Editor: Dreamweaver
  4. Web Host: Hostmonster

Steps:

  1. Install WordPress on my web host
  2. Install WordPress locally on my machine

Ultimately, this website is going to live on a server somewhere and not my local machine so we should make sure it works there first.

Installing WordPress on My Webhost

Installing WordPress on the server is really easy, there’s a ton of tutorials out there that you can Google. Personally, I think the WordPress’ Famous 5-minute Install is more than adequate if you’re just looking to get up and running. So that’s what I always use.

Don’t skip the secret key values section that shows you how to make your WordPress setup harder for people to hack. They even provide a cool key generator for you to use. Why think when you can copy and paste?

Install your WordPress site as you normally would. Put it into your normal folder structure.

I like: c:/projects/client/live/

Installing WP Locally

I’ve tried a few times to install WP locally but it never worked. I also wasn’t entirely motivated. I gave it a few goes and then gave up. This time I was determined to make it work and 1 hour later, I did it! Hopefully this will help someone else.

Step 1: Download WAMP and Install WAMP

  1. Make sure you download the correct version of WAMP (32 or 64 bits)
  2. Double-click on the install file, run and install it in the default destination file.
  3. It will prompt you to pick your default browser I chose FireFox because I use Firebug a lot when I’m doing markup.
  4. Check to see if you’ve installed WAMP successfully by going to: http://localhost/ If you see the following screen you’re ready for the next part.

Step 2: Setting Up Your Virtual Host in WAMP

Setting up a virtual host will allow you reference your dev site using http://mysite.local instead of http://localhost/mysite/. The url does not need to end in .local, you can use whatever you like.

  • My live site: mysite.com
  • My dev site: mysite.local

Update Your Host File

  1. Open your host file using Notepad – C:WindowsSystem32driversetchosts
  2. You should see at the bottom this line:
    127.0.0.1       localhost
  3. Add another entry:
    127.0.0.1 mysite.local      (use whatever site name and extension you want)
  4. When you try to save this file, you might get an error “You don’t have permission to save in this location.” To get around this, you can run Notepad as an administrator.
     

    1. Right-click on “Start”
    2. Left-click on “All Programs”
    3. Left-click on “Accessories”
    4. Right-click on “Notepad” and select “Run as administrator”.
    5. Now open the host file and try again.

Update Your httpd.conf File

  1. Open your httpd.conf file
    1. Left-click on the WAMP icon in the system tray (should be in your bottom right hand corner).
    2. Mouse over “Apache” and you should see the httpd.conf file shortcut, left-click to open.
  2. DocumentRoot “c:/wamp/www/” and insert the following blocks:

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

    <VirtualHost 127.0.0.1>
    ServerName mysite.local
    DocumentRoot "c:/projects/mysite/live/"
    </VirtualHost>

    <Directory "c:/projects/mysite/live/">
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Order allow,deny
    Allow from all
    </Directory>

  3. While we’re in here, we might as well make it so that we can use permalinks. This step isn’t necessary and you can skip it if you like.Look for the line:  #LoadModule rewrite_module modules/mod_rewrite.so
    Just remove the # at the beginning of the line to enable this.

Test your setup, try and go to http://mysite.local.

If you did it right, you will get a page that has the an error message,
” Error establishing a database connection.” – this means your host file and httpd.conf files were modified correctly and we can move on. The next section will show you how to setup a local database so that this error message goes away.

If you didn’t do it right, then you will get a “Server not found” message. Go back and make sure you didn’t miss anything.

Step 3: Create the Local Database Using phpMyAdmin

What I wanted to do was make it so that I didn’t have to change the wp-config.php or any other file when I was ready to deploy to my web host. So I used the same settings for my local db as I did for the db living on my web host.

  1. Launch the phpMyAdmin panel by left-clicking on the “WAMP” icon in your system tray and selecting “phpMyAdmin”.
  2. Give your new database the same name that you did when you originally installed WordPress on your web host (example: myportfolio) and click “Create”.
  3. Click on the “Privileges” tab and then “Add a new User”.
  4. Go through and fill in the login information, again using the same information that you used for your original WordPress installation that’s living on your web host.
  5. Make sure that the “Database for user” has “Grant all privileges on database “myportfolio”.
  6. Click on “Check All” for “Global privileges”.
  7. Click on “Go” and you should be done.

After you’re done, you will want to restart your services.

  1. Left-click on the WAMP icon in your system tray.
  2. Select “MySQL”.
  3. Select “Service”.
  4. Select “Restart Service”.
  5. Left-click on the WAMP icon in your system tray again.
  6. Select “Restart All Services.

I don’t know if you really need to “Restart All Services”, you might be able to get away with just restarting MySQL. My knowledge of databases is pretty limited.

Now try going to http://mysite.local/wp-admin/install.php – it should now show you the standard WordPress initial setup page.

You’re done!!!

If you want to take it a step further, you can create an alias using WAMP that points to your theme directory as another website. In this case you will end up with 3 urls:

  • My live site: http://mysite.com – points to live site
  • My dev site: http://mysite.local – points to my full WAMP WP setup
  • My theme site: http://localhost/mysite/ – points to my WP theme

Acknowledgements

Thank you to the following for your posts which allowed me to piece together this all together: