Local development setup (Local, XAMPP) in Wordpress - Mini Project: Build & Apply

Local Development Setup with Local and XAMPP for WordPress

📖 Scenario: You want to create a WordPress website on your computer without publishing it online yet. This helps you build and test your site safely before showing it to others.

🎯 Goal: Set up a local WordPress development environment using Local and XAMPP step-by-step. You will prepare the data, configure the environment, install WordPress, and complete the setup to run your site locally.

📋 What You'll Learn

Create a new local site folder for WordPress files

Set up a database configuration for WordPress

Install WordPress core files into the local site folder

Complete the WordPress configuration to connect to the database

💡 Why This Matters

🌍 Real World

Developers build and test WordPress websites on their computers before publishing them online to avoid errors and speed up development.

💼 Career

Knowing local WordPress setup is essential for web developers, designers, and testers working with WordPress sites professionally.

1

Create Local Site Folder

Create a folder named my-local-wordpress inside your local development directory to hold WordPress files.

Wordpress

# Create a folder named 'my-local-wordpress' in your local development directory
# Your code here

Hint

Use your file explorer or terminal to create the folder exactly named my-local-wordpress.

2

Configure Database Settings

Create a database named wp_local_db in your local MySQL server and set variables DB_NAME to 'wp_local_db', DB_USER to 'root', and DB_PASSWORD to an empty string '' in your WordPress configuration file.

Wordpress

# Set database variables DB_NAME, DB_USER, and DB_PASSWORD in wp-config.php
# Your code here

Hint

Use your database tool (phpMyAdmin or command line) to create the database wp_local_db. Then set the variables exactly as shown.

3

Install WordPress Core Files

Download WordPress and extract the core files into the my-local-wordpress folder you created earlier.

Wordpress

# Download and extract WordPress core files into 'my-local-wordpress'
# Your code here

Hint

Download WordPress from wordpress.org and unzip it inside the my-local-wordpress folder.

4

Complete WordPress Configuration

Edit the wp-config.php file inside my-local-wordpress to include the database variables DB_NAME, DB_USER, and DB_PASSWORD so WordPress can connect to your local database.

Wordpress

# Add DB_NAME, DB_USER, and DB_PASSWORD definitions to wp-config.php
# Your code here

Hint

Open wp-config.php and add the database connection lines exactly as shown.

Practice

1. What is the main purpose of using a local development setup like Local or XAMPP for WordPress?

easy

A. To automatically publish posts on social media

B. To host live websites accessible to everyone on the internet

C. To replace the need for a web browser

D. To build and test WordPress sites safely on your own computer

Solution

1. Step 1: Understand local development

   Local development means working on your computer, not on the internet.

2. Step 2: Identify the purpose of Local and XAMPP

   They let you build and test WordPress sites safely without affecting live sites.

3. Final Answer:

   To build and test WordPress sites safely on your own computer -> Option D

4. Quick Check:

   Local development = safe site building [OK]

Hint: Local means work on your PC, not live online [OK]

Common Mistakes:

• Confusing local setup with live hosting
• Thinking local setup publishes sites online
• Believing local setup replaces browsers

2. Which of the following is the correct URL to access your WordPress site running on XAMPP locally?

easy

A. http://www.your-site.com

B. ftp://localhost/your-site-folder

C. http://localhost/your-site-folder

D. https://your-site-folder.local

Solution

1. Step 1: Recall local server URL format

   Local servers like XAMPP use 'localhost' with the folder name to access sites.

2. Step 2: Match correct URL pattern

   http://localhost/your-site-folder uses 'http://localhost/your-site-folder', which is correct for local access.

3. Final Answer:

   http://localhost/your-site-folder -> Option C

4. Quick Check:

   Local URL = http://localhost/folder [OK]

Hint: Local sites use http://localhost plus folder name [OK]

Common Mistakes:

• Using live website URLs instead of localhost
• Using ftp:// instead of http://
• Adding .local domain incorrectly

3. You installed XAMPP and placed your WordPress files in the folder htdocs/mywp. What happens when you visit http://localhost/mywp in your browser?

medium

A. You see the WordPress installation page to set up your site

B. You get a 404 error page because the folder is wrong

C. The browser downloads the WordPress files instead of showing them

D. You see a blank page with no content

Solution

1. Step 1: Understand XAMPP folder usage

   XAMPP serves files from the 'htdocs' folder, so 'mywp' is accessible at localhost/mywp.

2. Step 2: Recognize WordPress behavior on first visit

   Visiting the folder URL shows the WordPress installation page if setup is not done yet.

3. Final Answer:

   You see the WordPress installation page to set up your site -> Option A

4. Quick Check:

   Local WordPress folder URL shows install page [OK]

Hint: Visit localhost/folder to start WordPress install [OK]

Common Mistakes:

• Expecting live site without installation
• Confusing 404 error with wrong folder
• Thinking files download instead of display

4. You installed Local by Flywheel but when you try to access your site, the browser shows "Site can't be reached". What is the most likely cause?

medium

A. Local server is not running or stopped

B. You typed the wrong live website URL

C. Your internet connection is down

D. WordPress files are missing from the folder

Solution

1. Step 1: Check Local server status

   If Local server is stopped, the site URL won't load and shows connection errors.

2. Step 2: Rule out other causes

   Local sites don't need internet; wrong live URL or missing files cause different errors.

3. Final Answer:

   Local server is not running or stopped -> Option A

4. Quick Check:

   Local server must run to access site [OK]

Hint: Ensure Local server is running before opening site [OK]

Common Mistakes:

• Assuming internet is needed for local sites
• Confusing live URLs with local URLs
• Ignoring server status in Local app

5. You want to move a WordPress site from Local to XAMPP on your computer. Which steps should you follow to make the site work correctly on XAMPP?

hard

A. Copy only WordPress files to XAMPP's htdocs and open the site URL

B. Export the database from Local, copy WordPress files to XAMPP's htdocs, import database in phpMyAdmin, update site URL in database

C. Install WordPress fresh on XAMPP and copy themes from Local

D. Change the Local site URL to XAMPP URL and restart Local

Solution

1. Step 1: Export database and copy files

   Export Local's database and copy all WordPress files to XAMPP's htdocs folder.

2. Step 2: Import database and update URLs

   Use phpMyAdmin to import the database, then update site URL in database to match XAMPP URL.

3. Final Answer:

   Export the database from Local, copy WordPress files to XAMPP's htdocs, import database in phpMyAdmin, update site URL in database -> Option B

4. Quick Check:

   Database + files + URL update = successful move [OK]

Hint: Move files + export/import DB + update URLs [OK]

Common Mistakes:

• Copying files without database export/import
• Not updating site URL in database
• Trying to change Local URL instead of moving site