WordPress, a prevalent content management system, is predominantly coded in PHP. Powering countless websites, it seamlessly integrates with MySQL databases to efficiently manage and organize content. Its widespread adoption attests to its user-friendly interface and robust functionality, making it a go-to platform for website development.
Table of Contents
Tools We Will Be Using
The tool we will be using to host our WordPress website locally will be Xampp. Xampp is short for Cross-platform (X), Apache (A), MySQL (M), PHP (P), and Perl (P), although we will only need two services this robust tool offers. XAMPP is an essential tool for local web development, complements WordPress by bundling Apache, a web server, and MySQL. Together, they provide a user-friendly environment for creating and testing dynamic websites on a local machine before deployment.
Benefits of Developing a WordPress Site Locally
Developing your WordPress site locally offers cost-saving advantages. By doing so, you eliminate expenses for web hosting and a custom domain during the development phase. This approach allows you to refine your site without incurring additional financial commitments until you’re ready to launch it online. So, let’s get started with the tutorial.
Configure the Local Environment
Download XAMPP
- Download Xampp from the link provided above.
- Download wordpress from the link provided. (wordpress.org, not .com)
Ok so we have all the required files. Install Xampp, in the start menu you should see the XAMPP Control Panel; launch it. You will be presented with the control panel interface shown in the picture. The Apache service defaults to port 80 (HTTP) and 443 (HTTPS), but I like to change it for developmental purposes. This is fairly straightforward.
Change the Listening Ports for the Apache Server
- Stop the XAMPP Apache service and navigate to C:\xampp\apache\conf.
- Within this directory, open the httpd.conf file
you can Change the line starting with Listen to whatever development port you want, in my case it’s 8081, notice line 60 in the picture. It’s advisable to edit this file using a text editor like VS Code or Notepad++. Restart the Apache service, if the service is running you are good to go.
Copying WordPress Source files to Local Host
Now let’s add the WordPress source files to our web server. If you looked at the httpd.conf file at around line 250ish, you noticed the document root defaults to C:\xampp\htdocs. Lets create a sub directory called TestSite, so C:\xampp\htdocs\TestSite. Shut down all XAMPP services (Apache and MySQL).
Ok. Now let’s download WordPress, then extract the zip file. You can copy the contents of the folder C:\Users\%userprofile%\Downloads\wordpress-6.4.2\wordpress and paste them into the web server {documentroot}\TestSite, so C:\xampp\htdocs\TestSite
Now the files are in your TestSite directory and should have this directory structure shown in the picture. I also highlighted wp-config-sample.php because we will be tweaking it a bit and also renaming it to wp-config.php. Let’s spin back up the Apache and MySQL services and see if they work. In a web browser, type
localhost:8081 (or whatever port you configured to listed in the httpd.conf file). You should see the XAMPP dashboard. This happens because index.php is in the root of C:\xampp\htdocs and redirects you to the dashboard location.
<?php
if (!empty($_SERVER['HTTPS']) && ('on' == $_SERVER['HTTPS'])) {
$uri = 'https://';
} else {
$uri = 'http://';
}
$uri .= $_SERVER['HTTP_HOST'];
header('Location: '.$uri.'/dashboard/');
exit;
?>If you see the XAMPP dashboard, let’s try to configure WordPress so you can start creating. navigate to
http://localhost:8081/testsite
and after a few seconds you should be redirected to localhost:8081/testsite/wp-admin/setup-config.php
Configuring the MySQL Database
We create the DB name and Username, in this case the DB name is testSite and username is root, with no password but do as you please.
but when you hit submit you notice the connection failed, this is because we need to edit the wp-config-sample.php file. First lets copy the file and change the name to wp-config.php. Ok we renamed the file, now let’s edit it.
Configuring the wp-config.php file
Based on the creds we entered in the browser we will duplicate that in the wp-config.php file.
// ** Database settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define( 'DB_NAME', 'testsite' );
/** Database username */
define( 'DB_USER', 'root' );
/** Database password */
define( 'DB_PASSWORD', '' );
/** Database hostname */
define( 'DB_HOST', 'localhost' );
/** Database charset to use in creating database tables. */
define( 'DB_CHARSET', 'utf8' );
/** The database collate type. Don't change this if in doubt. */
define( 'DB_COLLATE', '' );
Let the wp-config.php file reflect the new Database name you create along with the username and password (if you’re using one).
Configure phpMyAdmin
To setup the database, navigate to http://localhost:8081/phpmyadmin, select new, then the database name. Then in the top right of phpMyAdmin, click the little house and then navigate to user accounts. Since this is a local site, select user accounts and make this reflect the wp-config.php file you saved.
- user name: root
- hostname: localhost
- password: “” (there is an option for no password)
Alright let’s get this done, OK? We are so close to your real website, where you can learn WordPress absolutely free and create your own website. Listen, once you get this up and running, you can really make a career out of WordPress and learn it in this local environment for no cost at all. Contact me sometime when you become a WordPress Wizz and teach me how to monetize, yeah?!
After a successful database connection, you should see a Welcome page, assuming you wp-config.php file matches the user account and a database name in phpMyAdmin. Simply follow the instructions and fill out the required fields. Then hit the magic button, “Install WordPress”!
Now loading...