XAMPP is used by many WordPress administrators to set up WordPress environments. While there are many different case uses, some of the most common use cases are to set up a staging, development or testing environment. As a highly configurable environment, XAMPP offers many advantages, including the ability to set up multiple WordPress sites through virtual hosts.
What is XAMPP?
XAMPP is what is known as a development environment. It includes all of the packages that a PHP developer needs to develop PHP software. At the same time, it provides us with everything we need to set up a WordPress environment.
WordPress needs quite a few things to run. The server or hosting plan, on which all the components are installed and run, and the domain name are two things we are all familiar with. However, the server also needs a number of software packages to run WordPress. These include:
Web Server – The web server is what actually delivers the WordPress website. There are many different web servers available including Nginx, Apache, and IIS, with XAMPP including Apache.
SQL Database – WordPress uses a SQL database to store data. While most are familiar with the MySQL flavor of SQL, in many cases, what you get is MariaDB. It’s important to note that many people and organizations use the terms interchangeably.
Geek note: MySQL was acquired by Oracle back in 2009. Due to concerns with this acquisition, several MySQL developers forked out development to MariaDB. MariaDB has, in the meantime, become one of the most used RDBMS.
PHP – PHP is the language WordPress is written in and is required by WordPress to run. This is required since the WordPress code needs to be executed by the webserver, which we can only do if PHP is installed.
XAMPP includes all of the above in one, easy-to-install package. Instead of installing each item individually, we get one installer that provides for everything, making it that much easier to install all of the components we need without worrying about dependencies and configurations.
On a side-note, XAMPP also includes Perl. While this is not required to run WordPress, more technical WordPress administrators might use this to write scripts.
One other thing that comes with XAMPP, which you might appreciate, is Bitnami for XAMPP. Bitnami is a packaged applications software product by VMware that allows us to install modules such as WordPress as easily as we would install any other software. With XAMPP and Bitnami, we can have a full staging environment up and running within minutes.
Geek note: The X in XAMPP indicates that it’s available for several Operating Systems. In this case, you can download XAMPP for Windows, Mac OS, and Linux.
Why use XAMPP?
XAMPP makes it easy to install everything we need to build a WordPress staging environment in one convenient package. Of course, you can equally download and install each package individually, and the final result will be the same – provided you’re comfortable getting your hands dirty with configuration files.
Downloading XAMPP
As discussed earlier, XAMPP is available for all major Operating Systems, including Windows, Linux, and Mac. As such, regardless of your setup, you can download XAMPP for your Operating System directly from the XAMPP website.
Installing XAMPP
Installing XAMPP is a pretty straightforward process, with no special technical skills required. To get started, simply double-click the downloaded file and follow the instructions provided on-screen.
You will need to choose the location of where you want to install XAMPP, the language, and whether you want to install Bitnami for XAMPP. Depending on the setup of your machine, you might need to make firewall exceptions for MariaDB and Apache.
Geek note: If you’re planning to only access the environment locally, you will not need to open the firewall ports.
Installing WordPress
Once XAMPP is up and running, you can install WordPress by downloading the WordPress Bitnami Module for XAMPP. Again, this is a fairly simple process. You will need to configure your user account and website name while the installer takes care of everything else, including creating the required databases.
Once it’s complete, you will be able to access your new WordPress installation.
Setting up WordPress
If you already have a live website, and you’d like to set up a staging / dev environment, you can take a backup and restore it to the staging environment. This will help you make sure you have the same environment on both systems. If you do not have a live website yet, you can go ahead and start setting up your website in the test environment.
Additional configuration options – running multiple WordPress sites on XAMPP
You can run more than one WordPress website in your XAMPP staging environment through virtual hosts.
Virtual hosts allow us to use aliases to run multiple websites on the same IP address and web server. The good news is that the functionality is built-in; all we need to do is enable it and then create the virtual hosts we need. While there is no hard limit on how many virtual hosts you can create, if each of the virtual hosts has logging enabled, you might not be able to go above 64 virtual hosts.
Adding multiple virtual hosts
Virtual hosts are added through the HTTPD virtual hosts configuration file. You’ll find this file in the following directory: C:xamppapacheconfextrahttpd-vhosts.conf
If you installed XAMPP in a different directory, the configuration file will be located there instead of the path provided above.
Geek note: the httpd in the filename stands for http daemon. Daemons are Linux background processes with httpd being the Apache background process. On Windows, daemons are called services, but the Linux naming convention stuck. Now back to editing the file.
1. Enable Virtual Hosts in the Apache configuration
The first thing that you’ll need to do is to find and uncomment the following line:
NameVirtualHosts *:80
This tells Apache that we will be using virtual hosts on port 80. Next, at the end of the file, add the following 4 lines:
<VirtualHost *> DocumentRoot "C:XAMPPhtdocs" ServerName localhost </VirtualHost>
2. Defining the Virtual Hosts
Once done, we can start adding virtual hosts. These need to be added manually in the httpd-vhosts.conf file, which you’ll find in /xampp/apache/conf/extra. For each virtual host that we want to add, we need to add a set of directives that provide Apache with the basic configuration details. These are set as follows:
<VirtualHost *> DocumentRoot "C:XAMPPhtdocswppro" ServerName www.wpwhitesecurity.com <Directory "C:XAMPPhtdocswppro"> Options Indexes FollowSymLinks Includes ExecCGI Order allow,deny Allow from all </Directory> </VirtualHost>
Let’s have a look at what each line does
- Line 1 – Opens a new set of directives, informing Apache we will declare a new virtual host
- Line 2 – Specifies where the website files are located, with each virtual host having its own directory
- Line 3 – Provides the name that the website should respond to
- Line 4 – 8 – Specify who should have access to the content of the directory. The directory listed here should match the directory specified in Line 2
- Line 9 – Closes this set of directives for this virtual host
You will need to add a set of directives for each virtual host separately. Once you have configured all of the virtual hosts, save the file and close. To test and confirm that all the syntax in the Apache configuration is correct, run the httpd.exe process with the –t switch from the c:xamppapachebin directory as seen in the below screenshot.
3. Optional: Edit the Windows Hosts File
You can access the test environment via more friendly names by editing the Windows hosts file. As an example. You might want to access your website by typing stagingsite.com instead of localhost/stagingsite – making it easier to remember.
Geek note: The hosts file is a text file that maps IP addresses to host names. Windows checks this file before submitting DNS requests, effectively overriding any actual domain names. While hosts files have been the source of many pranks, they actually pre-date DNS. Originally, it was a file maintained by the Stanford Research Institute and shared by those who wanted to access the earliest version of that is now the internet, allowing them to visit websites. This means that, effectively, you had to periodically download the DNS server instead of simply sending a request. Meh.
Once you’re happy with the test environment, you can simply take a backup and restore it to the live environment.
Same with riyad.. please give me solution
Very nice information. This saved my day. Thanks a lot.
Great article. Thank you. However, when setting up a second website and changing the virtual host file as described, I’m having the same problem as Riyad and possibly others. Any tips on resolving this? thanks.
Hello and thank you for your message.
Offhand it is very difficult to say what the issue is, so I am afraid we can’t help much.
The above article is mostly for educational purposes, and we do not provide such support.
I followed your tutorial – IT WORKED!! THANKS ALLOT- you really helped allot.
Thanks it’s solve my problem
Excellent tutorial. Got everything up and running without any hassle at all. Thank you!
Hi,
I’m using your code.
DocumentRoot “C:XAMPPhtdocsBandR”
ServerName
Order allow,deny
Allow from all
DocumentRoot “C:XAMPPhtdocstest”
ServerName
Order allow,deny
Allow from all
But using above code, always shows first website.
Means when I type stocklunch.com it shows 2827home.com…
Give me a solution.
Thanks in advance.
Hi Riyad,
Not easy to find out the problem offhand. Email us and we will look into your configuration and see what is wrong.
I have the same problem.
Did you resolverd?
Hello Ariel, please send us an email and we will assist you.
Hi,
Thanks for this very nice and informative article!
I have question, after setting up wordpress on XAMPP server, I downloaded the my live website, and also added eCommerce functionality into it!
It’s running fine on local server which is xampp, which is a virtual host for it!
Now How do I transfer this website running on XAMPP to another virtual host for which I have the FTP credentials , and that is located at (e.g.) 111.111.11.11 IP adderess.?
Thanks in advance!
Hi Pratik,
Thank you for following us. To transfer a website from XAMPP to the live server, or from any other source you should do a normal WordPress backup on XAMPP and restore it on the Live server. If you are new to WordPress backup refer to this WordPress backup article.