Nexcess
Nexcess Blog Logo
January 27, 2021

WordPress Local Development with XAMPP

One of the first environments I used to build sites with was XAMPP. The XAMPP abbreviation stands for Apache, MySQL, PHP and Perl. The X derives from the fact that XAMPP is cross-platform. Other tools like MAMP are only for running Apache, MySQL and PHP on macOS. If you’re on Windows you could look at using WAMP or WAMP Windows Server for an environment that’s specific to Windows. We’ll look at XAMPP today because it’s cross platform. If you learn to use it on Windows and then switch to macOS or Linux, you get to keep the development environment you know and love.

There are a few benefits to building your sites locally. First, you don’t have to wait for changes to upload via FTP so you have faster turn around times. Second, you don’t mess with a live site and break everything which usually makes clients upset.

Let’s walk through how to set up WordPress with XAMPP.

Installing XAMPP

To get started you’ll need to head to the Apache Friends site and download the version of XAMPP that is meant for your computer.

If you’re on macOS you’ll need to open the DMG file that is downloaded and then run it. Recent versions of macOS will complain that they can’t verify the developer of the application. This simply means that it didn’t go through Apple’s special signature process. You’ll need to go to the Security Settings in your System Preferences where you should see a button that lets you run the application anyway.

If you’re on Windows here are directions to set up XAMPP on Windows 10. For Linux, this is a good set of directions to setup XAMPP on Ubuntu.

Once you’ve installed XAMPP on your machine and run it you should see its start screen.

To start running your XAMPP click the start button. Occasionally when I’ve freshly installed XAMPP on macOS I’ve run into issues with components not being initialized due to the macOS security settings we just toggled. To force XAMPP to initialize the components it needs to run the following command in terminal rm -rf ~/.bitnami/stackman. Note that in addition to getting XAMPP to install it’s initial components again, it will also wipe your htdocs directory. If you already had sites installed, they’ll be gone so make sure you kept a backup of your work. 

Adding WordPress to XAMPP

To get WordPress installed we’ll first need to download a copy of it. Open the .zip file you downloaded and we’ll move it to the htdocs folder. If you dig around right now, you won’t find it though. First, we’ll need to head back to XAMPP and mount the volume that contains our server files.

Now you should see it mounted in finder and you can navigate to htdocs. Copy your downloaded copy of WordPress into this directory and rename the folder nexcess-test. If you’re working on a client project, choose a folder name that matches your client project.

Next, we need to create a database for our site to use, but first, we need to return to the XAMPP application and turn on it’s connection to our system. Go to the Network tab and enable localhost.

If you visit localhost:8080 you should see the default XAMPP starting page. Windows users should find this same page at localhost. You can access phpMyAdmin by visiting localhost:8080/phpmyadmin on macOS or localhost/phpmyadmin on Windows so that we can create our database.

Click on Databases on the top left side of your screen and then enter a name for your database and click create. Make sure you remember the name you’ve used because you’ll need it in a minute for the installation of WordPress.

To install WordPress we’ll need to visit the URL that corresponds with the folder we created in htdocs. For me, that’s localhost:8080/nexcess-test. Here I’ll see the default WordPress installation screen and need to enter the information for my database connection and site. 

The database name corresponds with the name of the database you just created. Your username is root and you can leave the password blank. Your database host should remain localhost Also note that I’ve changed the table prefix to match with my folder. You don’t have to do this, but it is considered best practice.

Once you’ve changed this information to suit your settings click submit and WordPress will install in XAMPP for you. If WordPress tells you it can’t write your wp-config.php file in XAMPP then you have a file permission issue which can be solved by editing them.

That’s it, XAMPP is now installed and running WordPress for us.

Developer Tools

To get access to the XAMPP server so that you can run unit tests, you’ll need to head back to the General tab in the application and click Open Terminal. This will open the terminal on your computer connected to the Debian Linux machine that is running your XAMPP server. From here you can install PHPUnit and then run your unit tests.

XAMPP makes viewing your database easy as we already saw. Simply visit phpMyAdmin and look through any database values you need to see.

To capture email for testing we’ll use MailHog again. Directions differ for installing MailHog in macOS and installing MailHog in Windows. Either way, once MailHog is installed you’ll be able to test the email systems of WordPress without emailing all your site users by accident.

Why XAMPP

While there are more steps involved in setting up XAMPP over other tools like VVV it’s also got a graphical user interface. VVV relies on your being comfortable with the command line, which was overwhelming when I was starting development.

Using XAMPP gets you up and running with an easy graphical interface to use as you deal with your server.

Avatar for Curtis McHale
Curtis McHale
Curtis is a husband, father, developer and business coach. He specializes in helping people build a business that lets them spend time with their family instead of working all the time.