This tutorial highlights how to create a local WordPress website with XAMPP in a few simple steps.
To host your website on the web requires you to choose a hosting provider which will provide you with a server to store your website files. However, you can host “websites” locally, on your own computer.
Unlike the aforementioned, with this method, only your computer and those connected in its network (if any) would be able to access the web pages.
Software such as XAMPP and Laragon would enable us to host our WordPress website in a local environment – offline.
What is XAMPP?
XAMPP is an abbreviation, which stands for Cross-platform (X), Apache (A), MariaDB (M), PHP (P) and Perl (P).
A typical web server needs a web server application, a database and a scripting language to function.
Hence, XAMPP’s Apache (webserver application), MariaDB (a database) and PHP (scripting language) make it easy for you to set up a local server.
Step 1: Download and Install XAMPP
Log on to the Apache Friends website. On the homepage, you would see various operating systems on which XAMPP is available and can be used.
Download the one which is relevant to your computer’s operating system. In this tutorial, we would download and use the Windows 10 version.
After download is complete, run the installer.
The next screen makes you select which components of XAMPP you would want to install. We would need only Apache, MySQL and PHP. However, you may choose to install all the components, hence leaving all the boxes checked.
Choose a location for the installation files. You can select a different location and a different folder name. Here, we would use the default location and folder name “xampp.”
Click “Next” and keep the “English” in the Language drop-down list. Click “Next” again and uncheck the box “Learn more about Bitnami for XAMPP.” Click “Next” again and wait while the installation of XAMPP takes place.
After installation is complete, you can open the XAMPP control panel by keeping the respective box checked as seen below. Then click on “Finish”.
Step 2: Configure the Local Environment with XAMPP
As you open the XAMPP control panel, start the Apache and MySQL modules.
When prompted by Windows Security, tick the “Private Networks…” box and on “Allow Access.”
Step 3: Download and Install WordPress
Download the latest version of WordPress from wordpress.org/download.
Extract the zip file. Open the extracted folder and copy the folder “wordpress.”
Locate where you installed XAMPP and open htdocs folder. I installed mine at disk C, hence the location is C/xampp/htdocs
Paste the copied wordpress folder into “htdocs” and rename it with the name you want to use for the website.
I renamed mine as “ben” and this will be the name of my local website when I enter localhost/ben into the web browser.
Enter the website address (in this case, localhost/ben) into the address bar to proceed with the WordPress set-up. You should be redirected to the WordPress Configuration (config) file set up.
Select your preferred language and hit “Continue” to proceed.
Click on “Let’s go!” to move to the next screen.
Step 4: Create a Database
The WordPress installation requires a database connection. As a result, it will require the following details:
- Database name
- Database username
- Database password
- Database host
- Table prefix
To supply the required database details, we need to create one. To do this, open the XAMPP control panel and click on the “Admin” action of the MySQL module.
Alternatively, you can enter localhost/phpmyadmin in your browser’s address bar.
Click on “New,” provide the name of the database and click on “Create.” That’s all that is required here; we won’t go deep into databases in this tutorial.
Step 5: Complete WordPress Installation
Having created the database, let’s get back to our WordPress set-up page to enter the database details:
- Database name: enter the name of the database created in the previous step.
- Username: root
- Password: leave blank
- Database Host: leave the default value “localhost“
- Table Prefix: leave the default value
After clicking on Submit, you should see the success message below. Click on “Run the Installation.”
Fill the fields displayed with respective details. You would use the Username and Password to login into your WordPress website’s dashboard. Proceed to “Install WordPress.”
You should see the success message and the login button underneath.
Now, log in by entering the username and password provided in the previous step. You would now be taken to your dashboard, which serves as a control panel for your website.
Your WordPress dashboard can always be accessed by logging in through any of these URLs:
- youwebsiteaddress/wp-admin
- yourwebsiteaddress/wp-login-php
Your website can be accessed at localhost/websitename; an example is localhost/ben in this tutorial.
Enter this URL to take a look at your website. Congratulations! You just created a local WordPress website with XAMPP.
Step 6: Choose a WordPress Theme
You would agree that the appearance of the website in the screenshot above is not appealing at all.
That is the default page that comes with the installation of WordPress. The initial appearance, however, depends on the theme that’s installed alongside the installation of WordPress.
As at the time of this WordPress installation, the default theme is known as “Twenty Twenty-One.”
This teaches you that, a theme is what defines the look and feel of your website.
Let’s proceed to replace the default theme with a more professional one.
One of the high-quality themes I recommend is the Astra theme. It comes with over 300 free and premium templates you easily import to build your website.
For more professional website templates, you can sign up for any of their premium plans.
Step 7: Install WordPress Theme
Go to your WordPress dashboard after you’ve obtained your theme, either by purchasing a premium theme or downloading a free one.
Hover over “Appearance,” then click “Themes,” then “Add New.”
Choose your downloaded theme by clicking “Upload Theme.”
It is necessary to install and activate it.
To get the free version of Astra, go to the dashboard’s “Add New” theme section, search for “Astra,” install it, and activate it.
Step 8: Install Elementor
Elementor is one of the most popular drag-and-drop page builders for WordPress. It allows you to make a website without coding.
It comes with a plethora of tools that allow you to design any component of a fully functional website.
To install Elementor, go to your WordPress dashboard, then to Plugins, then to “Add New.”
Search for Elementor, install it, then activate it.
Step 9: Install the “Starter Templates” Plugin
If you purchased Astra Pro, you can use this simple guide to activate your license and have access to your premium templates.
You can obtain free templates by installing the free Astra Starter Templates plugin.
To do so, go to your WordPress dashboard and install the Starter Templates plugin from the plugins repository.
To do so, navigate to Plugins > Add New.
Search for “Starter Templates,” install it, then activate it.
Your ready-to-import websites are now available.
Go to “Appearance” and select “Starter Templates” to import a template and begin building your website.
The screen that follows will prompt you to choose a page builder.
You can use Elementor or any other page builder.
All of the free and premium templates for your website can be found here.
Look through the beautiful templates and select your favourite.
You have two choices here:
- to import a single page
- to import an entire website
Obviously, importing the entire website at once will expedite the process.
Step 10: Edit Pages with Elementor
After you’ve imported your website, it’s time to customize the pages to meet your needs.
We’d use the Elementor Website Builder plugin for this.
Elementor allows you to easily drag and drop website pieces and customize them.
Edit the pages by simply locating and clicking on “Edit with Elementor,” which appears at the top of every page once you’re logged in.
How to Move a WordPress Website from XAMPP to a Live Server
After you’ve made any necessary changes to your pages, you’ll want to move your website from localhost to a live server.
Follow the procedures below to migrate your website from Laragon to a live server:
1. Download and install the All in One WP Migration Plugin.
This is a free plugin that lets you export your complete WordPress website, including the database, and then import it into another WordPress site.
Install the plugin by going to Plugins > Add New on your WordPress Dashboard.
Search for “All in One WP Migration.” Install and activate it.
2. Export Full Website
Upon activating the plugin, go to All in One WP Migration > Export.
Next, click on “EXPORT TO” then select “file.”
As shown in the screenshot below, wait for your website’s files to be ready for download.
Then download the file to your computer.
3. Get a Bluehost hosting account.
Bluehost is a dependable web hosting company that offers great value for money.
When you join up with Bluehost, you get a free domain name.
To complete the purchase of a hosting package, choose a package and enter your details.
Create a password, log in to the management panel, then install WordPress from here.
4. Import Website
To import the downloaded website, simply use the same steps to install and activate the “All in One WP Migration” plugin as described before.
Go to All in One WP Migration > Import from the WordPress dashboard once more.
Drag and drop the.wpress website backup file or import it from a file to complete the process.
The importation process will begin immediately at this point.
Finally, click on “PROCEED” to complete the process.