How to Setup a Development Version of Your WordPress Site on Your Computer

“Do you do your design/testing/development on your production website? Have you ever installed or updated something that crashes a section or the entire site? Ever tried to format or fix your site layout while everyone visiting watches you? If you have spent any amount of time in WordPress you can easily identify with these issues.” – Cory Lamle

Whether you are developing a new WordPress site or planning to make any kind of significant change to an existing one, having a development version on your laptop can be immensely helpful, especially for safely testing new plugins, modifying your theme, and testing new updates to make sure they don’t break your site. Having this local setup also lets you work on your site even if you are offline.

Installing a development (“dev”) version of your site probably sounds complex and intimidating if you don’t have much technical expertise, but actually it is fairly simple using free software called XAMPP, which lets you install a system that mimics your webhosting environment (the AMPP refers to Apache, MySQL, PHP and phpMyAdmin). Everything you need to know about setting up XAMPP (the how AND the why) can be found in Cory Lamle’s useful article, “Do You Localhost Your WordPress?” In that article you will find two videos: the first shows you how to install XAMPP and WordPress and the second shows you how to use the Duplicator plugin to make a copy of your existing site on your new local setup. The videos are a bit old so the user interfaces shown have changed but the information is still accurate.

Although the basic setup process is fairly easy, you may well find that your new setup isn’t working. For any problems you might have, check the Apache error log (use the Logs button on the main XAMPP panel) and use the XAMPP forums. I think perhaps the most common problem—and one I had myself—is a conflict between Skype and XAMPP (because they both want to use the same port). Fortunately, it is an easy problem to fix (see this forum thread).

Enhancing Your XAMPP Setup

As seen in the first video, the default setup requires you to put all your files in the C:\xampp\htdocs directory. So, to create your development site, you will create a folder (e.g., mysite) and install WordPress inside that directory. You can now access the site by typing http://localhost/mysite or http://127.0.0.1/mysite. This is a completely fine way to do things, but in some situations if your site’s code uses relative links (e.g., /page/ vs. Creating a Virtual Host

To access your test site via something like dev.mysite.com, you will need just two steps. First, you want to create what is known as a virtual host. To do so, find the hosts file, which should be located in the C:\windows\system32\drivers\etc\ directory. Now, simply add a line like the following:

This simple line tells Windows that when dev.mysite.com is typed in a browser, instead of trying to find that as a live Internet site, it should load 127.0.0.1 (which is a private address, not available to the outside world).

In the second step, we must tell XAMPP what to do when we use our new host name. To do so, edit the httpd-vhosts.conf file found in the C:\xampp\apache\conf\extra\ directory. Add the following lines:

The first five lines of code turn on the Virtual Host feature of Apache, and set the C:\xampp\htdocs folder as the default location for http://localhost/xampp and phpMyAdmin at http://localhost/phpmyadmin. The last seven lines are the magic that tells XAMPP to load your site when you type in your customized domain name. If you are working with multiple websites, simply re-create those last seven lines for each site.

It might seem obvious after mentioning it, but you must restart Apache any time you make a change to one of its configuration files, as above. You can do this simply via the Stop and Start buttons on the main XAMPP control panel.

Changing the Default Location for Your Site Files

If you are the curious sort, after reading the last section it probably occurred to you that you might be able to tell XAMPP to look somewhere other than C:\xampp\htdocs\mysite for your dev site files. And, you would be correct. Let’s say you want to put your dev site directory in Google Drive (in a directory named Websites) to keep it synced across multiple devices. Just change the lines above to be something like this:

Easy, right? Mostly, yes. Unfortunately, a problem you might encounter (I did) is getting an Access Denied error when you try to access your site. To fix this, edit the httpd.conf file found in the C:\xampp\apache\conf\ directory and add something like the following lines:

Restart Apache and you should be set. If you still get a 403 error, look for the following lines in C:\XAMPP\apache\conf\extra\httpd-xampp.conf file:

and replace:

with:

Sending Emails

Something else you might want to do with your development setup is send emails. Actually, XAMPP does send emails but by default it is configured to simply write them as text files in the C:\xampp\mailoutput folder. That may be a good thing since you probably don’t want to accidentally send live emails to members, etc. If that is fine for you, simply look in that directory for the mail file that corresponds to the time your site should have sent an email.

If you prefer to have your dev site actually send emails, you can modify XAMPP to do so. The two files we need to modify are C:\xampp\php\php.ini and C:\xampp\sendmail\sendmail.ini. In the php.ini file, make sure the following line is active (i.e., has no semicolon before it):

Next, find the line:

and change the lines following it to something like this:

That last line already exists so you just need to remove the semicolon that precedes it, or feel free to add it separately. As you can see, the lines above will tell XAMPP to send email using your Gmail account. If you prefer to send emails via your live site’s SMTP server, simply change the lines to match the information relevant to doing so (usually available via mail setup instructions in your cPanel or similar webhosting administration panel).

Now, we also need to change the sendmail.ini file. Look for the following line:

And edit the relevant lines to be something like the following (note that these lines in the file are separated by explanatory comments):

Again, if you prefer to use your live site’s SMTP server, simply modify the lines as appropriate (and note what port your server recommends using – here we have used 587 but many SMTP servers use 465).

As you can see, you need to provide your account password in plain text here, which is obviously a security concern if anyone malicious gets access to your computer. See the next section on security issues for a tip for securing your XAMPP setup, but another simple idea is to simply create a new, dummy Gmail account (hey, they are free) to do your dev setup email sending duties. If this gets discovered, it won’t really matter as this is just a dev setup anyway.

These instructions work for a lot of people, but I was still having a problem. If you do as well, check the error.log file found in the C:\xampp\sendmail folder. If you are not seeing anything in that file, make sure the following line in the sendmail.ini file is active (no semicolon before it):

For even more details, uncomment (remove the semicolon) the debug file line in sendmail.ini:

Anyway, the error I was getting looked something like:

If you get the same error, the solution that worked for me was to allow access for less secure apps from the Gmail settings. Simply enable “Access for less secure apps.” For some others with a similar problem, removing the captcha for Gmail did the trick also, though it didn’t work for me.

I have already mentioned that you can use the changes above to use the SMTP mail server for your live server. You can also do the same thing via a plugin like WP Mail SMPT, WP SMTP, or WP Email Template or you can make the necessary modifications directly in your (child) theme functions.php file. For the code, see Chad Butler’s article, “Easy SMTP email settings for WordPress” (and use his wp_mail test script to make sure things are working). This setup is actually much better if you have multiple websites so you don’t have to tweak XAMPP .ini files each time you want to do dev work on a different site. It also helps get around Gmail’s annoying less secure apps issue. BUT note that regardless you will need to uncomment the mailtodisk line. Actually, I recommend using both – Gmail as your main setup for any and all domains and then domain-specific SMTP as needed to override the default XAMPP Gmail settings.

Using a Secure Site (SSL / https)

XAMPP comes with a default SSL certificate you can use with your dev setup. It is not a “real” SSL certificate like you would buy for your proper domain and thus it will set off warning bells from the various browsers about the site not being verified. There IS a way to setup a proper SSL certificate for your dev site, but honestly I am not sure who really needs that. You might, however, need SSL to test an e-commerce shop or subscription service, and for that purpose the non-trusted default certificate should be adequate.

Still, to actually use the included certificate you will need to make a small modification. Just as we added some lines to the httpd-vhosts.conf file above, we will now want to add some more lines as follows:

As always, restart Apache and give it a go.

Security Issues

One possible problem with using XAMPP as a local dev setup is that it is essentially unsecured, with passwords (including your database password and, possibly, your email password) stored unencrypted in potentially multiple places. Obviously, this could be a big problem if your laptop goes missing. One way to solve this problem is to use encryption. To go this route, I recommend my favorite program, VeraCrypt (which is a direct replacement for the now defunct TrueCrypt). I have previously written about using this terrific program and it can prove valuable here as well.

You have two main options: encrypt your entire XAMPP installation in a large container (and it will be fairly large) or just encrypt your actual site folder. The latter option will require you to modify XAMPP to access sites from a location other than the default C:\xampp\htdocs, as I discussed earlier. It also won’t protect you if you decide to configure XAMPP to use SMTP to send your emails since you will have to include your password in the sendmail.ini file. For that reason I recommend just encrypting everything.

Improving Performance

Strangely, even though XAMPP is setup on your local computer and thus you don’t need Internet access, your dev site can actually perform more sluggishly than your live site. There are many possible reasons for this (unfortunately) so figuring out the specific thing or things needed for your setup is not a simple matter. Here is one useful page which discusses many possible causes and relevant solutions. It seems the two most common problems mentioned involve Windows using IPv6 and a simple host configuration change.

Final Note: An Alternative to XAMPP

XAMPP is great but it isn’t the only game in town for creating a dev setup. If your Web host allows you to create sub-domains, you could do that (say dev.mysite.com) and install WordPress on the sub-domain. Another option is to setup in a folder or even on an entirely new dev domain (e.g., mysite-dev.com), though in any case you will have to take steps to secure the install from prying outside eyes and for a folder install you may run into difficulties with links and paths. I have read that some webhosting companies that specialize in WordPress hosting packages offer a staging area to do development work. The few I have actually investigated were fairly pricey, but that is an option you might consider.

Good luck with your new dev setu,p and leave a comment if you come across any other useful tips.

Like this content? Why not share it?