Learn to set up a local testing server for WordPress, so you can develop WordPress websites without buying hosting!

Before we install WordPress to our local computer, we need to download and install a testing server.
We are going to use a Testing Server called XAMPP – which can be used on MAC and WINDOWS.

How to install XAMPP on both MAC and WINDOWS

NOTE:  Before installing XAMPP you need to turn the User Account Controls off on your computer via the Control Panel – then turn them back on after the install.

• Go to the web address below
  https://www.apachefriends.org/download.html
• Scroll down the page until you see the link called “Installer “under the heading  XAMPP Windows 1.8.2
  
• Click on the “Installer “link
• You will be redirected to another page – just wait until a pop up box appears
• A box will ask you to save the file – click on Save File
• Save the file onto your desktop
• The download will take several minutes
• Once the download is finished
• Go to the Desktop – double click on the XAMPP EXE file
• Follow the prompts  – leave all the default settings
• After the installation is complete the Control Panel should open (If not you can open it via the Desktop icon)   – leave the Control Panel open for now!

• Go to the web address below
• https://www.apachefriends.org/download.html
• Click on step 1: Download
• Click on the Download link
• Click on XAMPP Mac OS X 1.7.3
• Save the file to the desktop
• Go to the desktop
• Open the DMG-Image

• Drag and drop the XAMPP folder into your Applications folder (Shift-Command-A)
• XAMPP is now installed below the /Applications/XAMPP directory

Note: XAMPP is used for a development only.

Now let’s start XAMPP!

• Go to the Desktop and double click on the XAMPP Icon
• Double click the orange icon as seen in the image above
• If you cannot see the icon – go to all programs (PC) Applications (MAC)and look for the XAMPP folder > then click open the XAMPP icon
• See screenshot below of the XAMPP Control Panel

• Click on the Apache button
• Then click on the MySQL button
• You should see running appear – this means the testing server is now started
• Now to test that XAMPP is running correctly
• Open up Firefox or Internet Explorer (web browser)
• Type in the following URL into the web address area of your browser- see image below
• https://localhost

If XAMPP is working you should see the start page of XAMPP containing some links to check the status of the installed software and some small programming examples.  See image below:

Close this web page for now!

To view our WordPress site we need to create a folder inside XAMPP on your local computer.

Inside the xampp folder there is a folder called “htdocs”.  It is necessary to set up a subdirectory for each website in the htdocs folder.  So we now need to create a unique folder for our WordPress site.

To locate this folder “htdocs”

• For Windows – go to the C:Drive (Desktop > My computer > C:Drive)
• For Mac  – go to the Applications folder  (Shift-Command-A)
• Locate the xampp folder
• Open the xampp folder
• Open the htdocs folder
• Create a new folder in this directory
• Type a name for the folder e.g. “your-website-name”

When creating folders or web pages use the following protocol:

• all lowercase
• no spaces
• no special characters
• use an underscore or dash to replace a space for e.g. your-website-name
• Open up your internet browser e.g. Firefox, Safari
• Go to https://wordpress.org
• Click on the download button
• Save the zip file to your Desktop
• Once the download has finished go to the Desktop
• If you cannot find the download in your desktop > go to your downloads folder
• Right click the wordpress zip file  – select Extract All > then select Extract
• Open the extracted folder to view the contents – the contents should look similar to the picture below.

Now we are ready to download WordPress into this new folder “your-website-name” and install.

Local WordPress Download & Installation

• We need to put a copy of all the contents of the  WordPress folder  into the testing folder – xampp/htdocs/your-website-name
• We need to select all the content and copy it to the new location
• Click on the last file > hold the shift key down > and select the top folder
  OR
• For PC select Control A (select all shortcut key)
• For Mac select Command  – A  (select all shortcut key)
• Now we need to copy the files
• For PC > Right click > select Copy OR Control C (shortcut)
• For Mac –  Command  – C
• Navigate to the xampp folder on the C:Drive (Windows)or Applications (Mac)
• Open the xampp folder then the htdocs folder
• Open the “your-website-name” folder to paste the contents
• For PC – Control V or right click > paste
• For MAC  –  Command  – V
• Check all files were copied over
• Close all folders for now
• Open up the Control Panel for XAMPP
• Click on Start for Apache (local server)
• Click on Start for MySQL (local database)
• Check to see if they are both running
• Minimize this window  DO NOT CLOSE

Start up the local testing server in XAMPP

What is a Database?

A database is a collaboration of data tables that store all the information you have in your website, including text, images, video, shopping cart, blog posts and more. We need to create a database to store all the content of our WordPress site.

Let’s create a database

• Open your web browser e.g. Firefox or Internet Explorer
• Type this URL into the browser https://localhost/xampp
• Click on English for the language
• Scroll down to Tools (on the left side)
• Click on phpMyAdmin link
• The following window should appear

• Go to Create new database
• Name the database e.g. “your-name_db”
• Click on Create
• Look at the left sidebar and you should see the new database name
• ·         Close the web browser (phpMyAdmin)

What is a Config File?

The config file is an important file that needs to include the credentials of your database in it to be able to connect to your website.  It allows the website to talk to the database, to add a retrieve the information stored.  Without these details the website will not work.  The config file looks similar to the image below.

Changing the Config file

We need to add some information to the Config file for it to connect to the database we just created for our WordPress website to work.

• Open your newly created WordPress website in xampp > htdocs > your-name
• We need to modify the sample file – wp-config-sample.php
• ·         Right click on the wp-config-sample.php and open with your default text editor e.g. Notepad (PC)-  Text Editor (Mac)

We will modify the Database name, Username and Password ONLY. Make sure you do not delete any quotes, brackets or semi-colons. You are simply adding the data in between the single quotes.

Scroll down to the following block of code:

/** The name of the database for WordPress */

define(‘DB_NAME’, ‘database_name_here’);

Where it says ‘database_name_here’   – change the name to your database name – your code should look like the following:

/** The name of the database for WordPress */

define(‘DB_NAME’, ‘your-name_db’);

Go to the next line of code:

/** MySQL database username */

define(‘DB_USER’, ‘username_here’);

Change the ‘username_here’ to “root” – your code should look like the following:

/** MySQL database username */

define(‘DB_USER’, ‘root’);

Go to the next line of code

/** MySQL database password */

define(‘DB_PASSWORD’, ‘password_here’);

We will have a blank password – delete the text ‘password_here’ – leaving the single quotes.

Your code should look like the following:

/** MySQL database password */

define(‘DB_PASSWORD’, ‘  ‘);

• Go to File – Save as  “wp-config.php”
• Remove the text    “ –sample”
• See image below

Now we can finish the installation process!

• Type the following  URL into the browser – adding the name of your site e.g. “your-name”
• https://localhost/your-name/wp-admin/install.php
• You should see the Welcome screen!

If not something is wrong with your config file or your WordPress download.  If all else fails try it all again!
Make sure you copied all the files and folders from the download over to the htdocs/wordpress folder you created.

In the Welcome Screen add the following:

• Site title:  name of your website “your-name”
• Username:  your preferred username e.g.:  jodia
• Password:   Make sure you use a strong password including upper and lower case letters, numbers and symbols like –  ! ” ? $ % ^ &   (read below for some tips on creating passwords)
• Save your login details in a text file > store in a save place on your computer
• Email:  your email
• Uncheck “Allow my site to appear in search engines like Google and Technorati” – we don’t need this for our local version
• Click on Install WordPress

Some tips for creating a strong password

• Never use your name, the site name or anything obvious (kids or pets names)
• It should be at least 8 characters long
• It should include numbers and symbols as well as letters

Try this website https://strongpasswordgenerator.com/

• Once WordPress is successfully installed you can login with your username and password just created. See image below. Type your login details in a text editor and save in a secure location. If there is a problem with the installation check your config file settings.

You now have WordPress installed on your local computer!

By Jodi Allbon 2014.