How To Install WordPress Using XAMPP

WordPress

05/12/2020


Do you want to install WordPress on your local machine using XAMPP? Do you need a simple and straightforward installation guide? Well, look no further! I've got you covered. Just follow the steps below and you'll have WordPress up and running in no time. ✊

In case you plan on following this guide on Windows, I recommend you opt for a more powerful and convenient development setup: Laragon. I have an article explaining its advantages over conventional tools like XAMPP. It even has a brief setup guide to get you started. Unfortunately, this tool is only available on Windows. Sorry Mac users... 😞

Step 1: Download and Install XAMPP

Alright! First thing to do: download XAMPP and install it. The installation process is quite straightforward, so you'll be on your own for that part. πŸ˜‰ Just remember: when in doubt, leave the default installation settings as is.

Ignore any mentions of Bitnami that you encounter.

Step 2: Launch XAMPP

On Mac

After it has been installed, start the application and launch the server by clicking "Start".

Install Wordpress Using XAMPP: XAMPP General Interface

Time to start the engine, boys and girls! πŸš—

This should automatically start the 3 required services (Apache, MySQL, ProFTPD) in the Services tab. However, if they haven't, make sure to start them manually. Next, you want to choose a port for your server in the Network tab. I choose you, number 8080...

Lastly, in the Volumes tab, you want to mount the data volume /opt/lampp. At this point, if you visit localhost:8080 in your browser, you'll be greeted by a beautiful XAMPP page. 😍

On Windows

For the Windows folks, it's a little different...

First, make sure you start the XAMPP Control Panel as an admin. This can be done by right clicking on the program and choosing Run as administrator. Next, you'll be greeted by the following window.

XAMPP Control Panel Interface

The classic windows look we all know! 🀭

To launch the server, simply click on Start for both the Apache and MySQL modules, as shown in the image above. If you now visit localhost:80, you should be greeted by a XAMPP web page as well.

But wait! What if you want to change the port number like on Mac? Well... on Windows it's not as simple as a button click (as usual). πŸ™„ For the purpose of not having the explanation take up half the article, a detailed step by step guide πŸ“ƒ can be found on Stack Overflow.

However, for the time being, I recommend you stick with the default port 80.

Pitstop

Bonus tip (for Mac) πŸ€“ - Something already occupying your chosen port? You can kill it by running kill -9 <<PID number>> in your terminal. You can find out the PID number with lsof -i @localhost:<<port number>>.

Step 3: Download and set up WordPress

On to the next task! We now have to download WordPress and set it up. For the Windows folks, make sure unzip the file after downloading.

The installation procedure isn't as straightforward since all you get is a bunch of files and folders. For this part, you want to return to your XAMPP application interface and click "Explore" in the Volumes tab. Windows users, however, will want to simply click the "πŸ“‚ Explorer" button (no Volumes tab needed).

Install Wordpress Using XAMPP: XAMMP Volumes Interface

Time to explore the unknown... or not?! πŸ‘€

You'll now find yourself in the XAMPP (or Lampp) directory. From here, you want to open the htdocs folder and create a new folder in it named after your website. How about we name it tutorial, shall we? And it is in this newly created folder where you want to copy all your WordPress files and folders that you downloaded.

Here's what it should look like afterwards: πŸ‘‡

Install Wordpress Using XAMPP: XAMPP Wordpress Folder Structure

Lo and behold!

Step 4: Set up the database

So far so good! Before we move on, we have to set up a mySQL database on which we would like to install our WordPress website. We can access the interface at http://localhost:<<port>>/phpmyadmin/. We then create a new database by clicking on "New" in the left-hand column. Give your database a name and then click "Create".

Install Wordpress Using XAMPP: PhpMyAdmin Interface

Here ya go!

Best not to touch anything else or you might end up messing things up... πŸ˜…

Step 5: Install WordPress

The final step is upon us where we install WordPress on XAMPP! Now that we have a server up and running as well as a database set up for our website, we can finally start installing our WordPress site by accessing it on localhost:<<port>>/<<website name>> (in our case localhost:8080/tutorial). You'll be greeted by a beautiful page to choose your language. πŸ” 

At one point, you'll be greeted by the following page:

Install Wordpress Using XAMPP: WordPress Setup Interface

The final boss...πŸ€–

Here you'll want to you enter the name of the database you previously created as well as the admin's username and password. By default, an admin with the username root and no password exists. The rest you can safely ignore.

Bonus tip πŸ€“ - In case you run into a "Sorry, but I can’t write the wp-config.php file" error, you want to have the wp-config.php file placed in your website folder. In my situation, it would be htdocs/tutorial.

Alright, you did it! Beyond this point it's smooth sailing. I hope you enjoyed this guide on how to install WordPress using XAMPP. Good luck on your WordPress adventures and beyond. πŸ˜„


WRITTEN BY

Code and stuff