WordPress Local Development With XAMPP

Posted on: December 4th, 2014

I recently wiped my PC’s hard drive and am now re-installing everything that’s important for my dev environment. First was Sublime Text, and now it’s time for XAMPP. I figured I’d toss this together so you could get set up and be cool with me.

Step 1 – Download and Install XAMPP

Go here and download it for whatever operating system you are running. I’m on Windows 7 64-bit (because I’m so fly) so that was the download I chose and where all screenshots will come from.

Once you’ve downloaded the Bitnami software, unpackage that dude and load the wizard. You’ll have the choice to uncheck boxes and select or deselect components. I’m leaving them at the default because I want all of them. Tomcat not so much, but it doesn’t hurt anything by being there.

Next you have to decide where you would like XAMPP to be located. I’m placing mine on me E: drive because I keep C: as clean as I can. You can do it however you’d like. Only part is you have to make sure that the targeted directory is empty.

If you’d like to learn more about Bitnami’s installers for WordPress, Drupal, Magento, Joomla or others you can but I’m not going to cover that. You can get those modules here if you’d like.

Beware the firewall. It will most likely block some features of Apache, so allow that access or it will hate you.

If all has gone well the installer should be complete and your XAMPP Control Panel will open. At this point I like to restart my computer.

Step 2 – Running XAMPP

Boot XAMPP Control Panel back up. Did you allow it through the firewall? Excellent. If you’re like me you saw an Apache error whining about “ehhhh I can’t work unless Port 443 is available.” Fine. The boyfriend we need to get rid of so Apache can be with Port 443 forever is Skype (seen in error message). This may throw you for a loop, but have no fear, I’ve got the solution.

From your main Skype window, go to Tools. At the bottom of the Tools window you’ll see Advanced. Click on that and follow it to the Connection window. In Connection, you can see that Use Port 80 and 443 is checked. Uncheck it, Save and restart Skype. You don’t need to restart XAMPP, you should be able to just click Start for Apache and it should run.

The hard part is over, so now we just have to install WordPress.

Step 3 – Set Up A Database

I tend to create my databases via phpMyAdmin although you may have another program you like to run to set it up. This will follow me setting up a database in phpMyAdmin so if you don’t care then move on to step 4.

From Control Panel, click Admin in the MySQL row. Then click databases and create a database. Nothing else, just the name of the database and boom, done.

Step 4 – Installing WordPress

At the time of this writing, WordPress 4.0 Beta 4 was the most recent version and is used for this demo. Placement here is key, so make sure your file structure is locked down.

Unzip WordPress and copy the /wordpress directory. Open Finder and navigate to your /xampp directory that we created earlier. Inside there should be an /htdocs directory. Open it and paste the /wordpress directory you just unzipped. Now navigate to localhost/wordpress and run your installer. I like to avoid the automatic wp-config creator, so let’s adjust that next.

Step 5 – wp-config.php

Open up wp-config-sample.php inside your /wordpress directory. For database name, use whatever you created your database as. I used wordpress, so that’s mine. You’ll notice below a few things we didn’t talk about. DB_USER is the user that has access to the database. We didn’t create a new user, so we can use root (comes default in XAMPP).

Next is DB_PASSWORD, or the password for the user we just specified. The default password for ‘root’ is nothing, so leave that blank. Lastly, is the hostname. For XAMPP we can just keep it as localhost. Note: These are the defaults for XAMPP. Do not use them in production.

define('DB_NAME', 'wordpress');

/** MySQL database username */
define('DB_USER', 'root');

/** MySQL database password */
define('DB_PASSWORD', '');

/** MySQL hostname */
define('DB_HOST', 'localhost');

With the above saved as wp-config.php we can re-test the localhost/wordpress page again and now it should just hop straight to the Welcome screen where you set up your admin user. I’d normally add some debug code in there as well, especially since it’s a local dev environment, but for now I’ll leave it.

Hopefully there will be no errors for you. If there are, feel free to ask in the comments below or Google your issue. If you have other questions feel free to ask, otherwise, happy WordPressing.

previous post: Sublime Text – CTags Package Errors next post: WordPress Error: Cannot modify header information – pluggable.php