Connect with us

Guides and Tutorials

How to Create a Local WordPress Site Using XAMPP

Published

on

How to Create a Local WordPress Site Using XAMPP


Want to learn WordPress without buying a domain name and hosting? Would you like to install WordPress on your local computer? Want to play around with your website without impacting customers?

In that case, this article on how to create a local WordPress website using XAMPP is just what you need.

XAMPP is free software you can install on your computer that mimics a web server so you can run WordPress. This allows you to design your website on your computer before uploading it to a live environment.

Before we get into the ‘how to create a local WordPress site’, let us understand why we should create a local installation.

Why Set up a WordPress Website Locally?

I recall my early days as a website developer.

To create a website, the first step would be to set up a server on a local computer. If the website required having a database, my next step would be to set that up as well.

In short, I would have to set up a development environment in my local system.

For this, I would download two separate applications, the web server application, and the database. Each has its own installation procedures and you have to run them independently to start working on your website. Before you know it you have spent a couple of hours figuring out and setting up the environment, even before you have even begun developing the website!

What developing locally allows you to do is to ensure you have a working model of the website on the live server from day one. It is a great option when you’d like to test the functionality locally before the world gets to see your website.

Learn WordPress Without a Domain and Hosting

Another reason to create a local WordPress site is if you are starting out.

If you want to learn WordPress, you would normally have to invest in a domain name and hosting. Yes, there are free options too, such as WordPress.com.

But do these free options allow you to exploit all the features and functionalities that WordPress.org has to offer? No, they don’t!

So, if you’d like to learn WordPress without investing upfront in a domain and hosting, it makes sense to create a local version of your site.

Just in case you’d like to create a WordPress website after purchasing a domain name and hosting, this article on How to Make a WordPress Website should help.

As you may have realized by now, to create a WordPress website locally, we need to set up a local server. Or in networking terminology, we need to set up a localhost.

What is Localhost?

Localhost refers to your computer and how you access it.

The localhost is used to access the network services, such as directory, database, email, files, printers, that are running on the host via the loopback network interface.

Too technical? Well, let me break this down.

The loopback mechanism may be used to run a network service on a host computer without requiring a physical (i.e., hardware) network interface, such as a network port or a socket, or even a network interface controller.

For example, a locally created WordPress website may be accessed from the browser by the URL ‘http://localhost’, as long as XAMPP or other software is running Apache or local web server software.

As is the case with any domain name, the localhost also has an IP (Internet Protocol) address. The IP addresses range from 127.0.0.0 to 127.255.255.255. However, the loopback address has a default IP of 127.0.0.1.

Typically, when you use an IP address, you are trying to connect to a remote computer over the internet.

For example, when typing wpastra.com in a web browser it directs you to Astra’s web server and Astra’s main page.

However, with the loopback address, you are calling the localhost, i.e., your computer.

And, for the sake of this article, we will go ahead and set up our local server using XAMPP.

Which takes us to the next topic.

What is XAMPP?

While we did cover what localhost is, we haven’t covered why we need the localhost.

WordPress is written using PHP (Hypertext Preprocessor). Just like WordPress, PHP is also open-source and is a widely-used programming and scripting language to create dynamic and interactive websites.

And where do you think all the data, such as blog articles, product details, shown on your website is stored? That’s where the MySQL database comes into the picture.

MySQL is a DBMS (Database Management System) that is used by WordPress to store and retrieve all your website information.

Again, just like WordPress and PHP, MySQL too is open-source.

And just in case you are wondering what an open-source is.

Well, an open-source is software for which the source code is made freely available and it may be redistributed and modified to best suit your requirements.

And to run PHP and MySQL, which in turn is required to run your WordPress website, you require a web server.

Yes, you’ve guessed it right.

To create your local web server, you will need to install XAMPP.

xampp homepage

As their website puts it across, XAMPP is a very popular PHP development environment.

For a newbie, setting up the Apache, PHP, and MySQL environments individually on your local computer could be overwhelming. That’s where using XAMPP helps.

XAMPP is a completely free and easy to install software package that helps you set up a local server environment.

You can download the software for Windows, Linux, and Mac.

In this article, we will go ahead and install XAMPP so we can use the localhost on both Windows and Mac.

Step 1: Download and Install XAMPP on Your Local Computer

Installing XAMPP on Windows

Visit the XAMPP website and click on the ‘XAMPP for Windows’. An installer file (EXE file) will download. Click on the installer and proceed as instructed.

xampp setup 2

You can leave the default settings as shown in the image below.

xampp setup 3

You could decide on the folder where you’d like to install XAMPP.

xampp setup 4

By default, the destination drive and folder will be “C:xampp”.

xampp setup 5

And the default language will be set to English.

xampp setup 6
xampp setup 7

Click on ‘Next’ when you find the above window, wherein you are prompted ‘Ready to Install’.

xampp setup 8

You may also be prompted via a security alert to allow access to the installation.

xampp setup 9

Click on ‘Allow access’ to continue.

xampp setup 10

That’s it! XAMPP has been installed.

On clicking ‘Finish’, the Control Panel will open up.

xampp settings

The control panel allows you to ‘Start’ and ‘Stop’ the corresponding services.

Go ahead and click ‘Start’ against Apache and MySQL.

xampp settings for wordpress

Now, to check if the installation has been completed successfully, type ‘http://localhost’ in your web browser.

localhost successful installed

Upon successful installation, you will be able to access the above home page.

Now that we have installed XAMPP locally on a Windows operating system, let’s look at the steps involved to install XAMPP locally on the Mac.

Installing XAMPP on Mac

While the steps are more or less the same, there are a few differences you should take note of.

To begin with, instead of clicking on the ‘XAMPP for OS X’ tab on the homepage, click on the ‘Click here for other versions’ link under ‘Download’.

Download xampp for OS X 1

In some cases, the default download file after clicking on the ‘XAMPP for OS X’, may not work. Hence, it is recommended to select a different version of the download file.

Under the ‘other versions’ page, scroll down to the ‘XAMPP for OS X’ section.

Download xampp for OS X 2

Click on ‘More Downloads’.

You will be directed to an external website.

Download xampp for OS X 3

Select ‘XAMPP Mac OS X’.

And then click on ‘7.4.11’. This option will have the maximum downloads per week.

Download xampp for OS X 4

Now, you will notice two versions of the software.

The first being ‘xampp-osx-7.4.11-0-vm.dmg’ and the other being ‘xampp-osx-7.4.11-0-installer.dmg’.

Download xampp for OS X 5

Select the ‘installer’ version.

Once the download has completed, double click on the image to start the installation process.

xampp installation on Mac

And then, drag the XAMPP folder into the Applications folder.

That’s all. XAMPP is now installed below the ‘/Applications/XAMPP’ directory.

Double click on XAMPP. You will be prompted to proceed with opening the application. Click on ‘Open’.

Open xampp installation on Mac

The installation process will start and you could follow through with the next steps, that are self-explanatory, as shown below.

xampp installation on Mac 1
xampp installation on Mac 2

In the above-shown window, you can select or unselect the components you wish to install.

The ‘XAMPP Developer Files’ can be unselected, if you wish to. The ‘XAMPP Core Files’ is mandatory and will remain selected.

xampp installation on Mac 3
xampp installation on Mac 4
xampp installation on Mac 5
xampp installation on Mac 6
xampp installation on Mac 7

With the installation process complete, launch XAMPP by clicking on the ‘Finish’ button.

This will open up the application window, as shown.

xampp installation on Mac 8

Click on ‘Go to Application’ or type ‘http://localhost’ into the browser to check if your installation process has gone well.

xampp successful installation on Mac

If you find the above page, well then, you have successfully installed XAMPP on your local Mac computer.

xampp manage servers on Mac

Head back to the application window and click on the ‘Manage Servers’ tab.

You will notice the ‘Apache Web Server’ is running by default. If this isn’t running, you may not be able to access the localhost page. To start the service, all you have to do is click on the ‘Start’ button. Likewise, to stop running the Apache service, click on the ‘Stop’ button.

While we will be covering this in the next step, I would also recommend you start the ‘MySQL Database’ service.

Now that we have installed XAMPP on our local computer, the next step is to install WordPress.

Step 2. Download and install WordPress on your local computer

Download the latest version of WordPress (currently 5.5.3) from WordPress.org.

Download WordPress

A ‘wordpress-5.5.3.zip’ file will get downloaded. Extract the contents of the file.

WordPress Folder

As shown in the image above, the contents of the file have been extracted to a folder ‘wordpress-5.5.3’. Yes, if you have a different version of WordPress, the folder name will change accordingly.

Now, copy the ‘wordpress’ folder. This folder contains all the files required to create a WordPress website.

Head over to the XAMPP folder.

XAMPP folder

Under XAMPP, you will notice the ‘htdocs’ folder.

Go ahead and paste the ‘wordpress’ folder inside ‘htdocs’.

Upload WordPress on XAMPP

Once you have transferred the folder into ‘htdocs’, you can rename the folder to that of your choice. Typically, you can name it as the website you are creating.

For example, I’ve renamed the folder to ‘wpastra’, as shown in the image above.

Now, to access your WordPress website and to verify if the installation has gone through without any errors, type out the URL ‘http://localhost/<wordpress-folder>’ in the web browser. Where ‘<wordpress-folder>’ is the name of the folder you’ve entered.

Which in my case will be ‘http://localhost/wpastra’.

Upon successful installation, you should reach the following page.

WordPress language setup using XAMPP

Select the language of your preference and click on continue.

On the following page, as shown below, you will be asked to enter in details of your database.

XAMPP enter WordPress database details prompt

And how exactly do we get the details of the database?

Well, that is where our final step comes into play.

And just to add, the steps involved to install WordPress locally on a Mac is the same until here.

Step 3. Setting up the MySQL Database

Head back to the localhost main page, i.e., ‘http://localhost’. You should be directed to the Dashboard (http://localhost/dashboard).

XAMPP WordPress database setup 1

Click on the ‘phpMyAdmin’ link on the top right-hand corner of the page.

You will be directed to the ‘phpMyAdmin’ dashboard.

XAMPP WordPress database setup 2

On the left-hand side, you will notice several existing database names.

To create a new database, click on the ‘Databases’ tab on the top.

XAMPP WordPress database setup 3

Enter a ‘Database name’ and click on ‘Create’.

XAMPP WordPress database setup 4

For example, I’ve created a database by the name ‘wpastra’.

XAMPP WordPress database setup 5

Now that the database has been created, head back to the WordPress installation page and click on ‘Let’s go!’.

XAMPP WordPress installation database settings

To begin, enter the name of the database you just created under ‘Database Name’.

As for the ‘Username’, enter the same as ‘root’. And the ‘Password’ field can be left empty. Leave the remaining two fields, i.e., ‘Database Host’ and ‘Table Prefix’, as the default values. Which are ‘localhost’ and ‘wp_’ respectively.

Once completed, click on ‘Submit’.

XAMPP WordPress run installation

You should now reach the following page. If you have, well then, your connection to the database is working just fine!

Go ahead and click on ‘Run the installation’.

XAMPP WordPress installation settings

Key in the ‘Site Title’, the ‘Username’, the ‘Password’ and ‘Your Email’.

As is shown in the image above, I’ve keyed in the required fields.

And then, click on ‘Install WordPress’.

WordPress succesfull installation on windows

Click on ‘Log In’ once the installation has been completed successfully.

WordPress login page

And you will get to see your WordPress login screen.

Enter the username and password you just created.

Wordpress installation using XAMPP

And voila! You are on the WordPress dashboard. You have created a local WordPress website using XAMPP.

You can access your website by entering in the URL, which for this example is ‘http://localhost/wpastra’.

WordPress website on XAMPP

Go ahead, install your themes, the plugins, test the complete functionalities, and create your WordPress website locally. The local installation works exactly the same as a hosted version.

Related articles

  1. How to Install Astra Theme?
  2. How to Install Starter Templates (Free) Plugin?
  3. Best Free Theme for Elementor

Setting up MySQL on Mac

While most of the steps mentioned above while setting up MySQL and creating the database locally on the Windows operating system are the same, there are a couple of differences to be noted.

And the steps to be noted are after entering in the database details.

XAMPP WordPress database settings for Mac

As shown above, the steps until here are the same as explained earlier.

After entering the database details, click on ‘Submit’.

You will now find yourself on a page, as shown below, with some bit of PHP code.

XAMPP WordPress installation on Mac wp config settings

You will have to copy the code highlighted above and create a file ‘wp-config.php’.

Alternatively, if you check the ‘wordpress’ folder you transferred into the XAMPP folder, you would notice a file by the name ‘wp-config-sample.php’.

wp config file setting for Mac OS

Open this file in a text editor of your choice. Delete the contents of the file and replace it with the code you just copied. And save the file.

Once you’ve completed this step, rename the file to ‘wp-config.php’.

And then, go back to the installation process and click on ‘Run the installation’.

XAMPP WordPress installation settings

The remaining steps are the same as what has been covered earlier while setting up MySQL for the Windows operating system.

WordPress succesfull installation on windows

And you will have successfully installed WordPress locally on your Mac system as well.

Troubleshooting Common Issues While Installing XAMPP and WordPress

I may have been lucky while installing XAMPP and WordPress while creating this article. However, if you face any issues during installation, here are links to some common issues and their solutions.

  1. XAMPP for Windows FAQs
  2. XAMPP for OS X FAQs
  3. XAMPP installed, how to add WordPress

Conclusion

As mentioned in this article, if you would like to create a local WordPress site and test its functionalities before making the site live, it is a good practice to set up WordPress locally.

And now that we’ve covered how to create a local WordPress site using XAMPP both on the Windows and Mac operating systems, we’re guessing it should be easy for you to follow through.

We’d like to hear from you. Do let us know if you’ve been able to set up your WordPress site locally using the steps mentioned above.





Source link

Continue Reading
Click to comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.