The Beginner’s Guide to Setting up a Localhost WordPress Site
If you’ve been working in WordPress for any amount of time, you know that you can install WordPress directly onto a live server hosted at any number of hosting companies, including Godaddy or A2hosting. For smaller sites with a quicker development timeframe, this setup is ideal. But for larger sites or sites with more than one developer working on them, using a live server may not be the best option.
In this post, I’ll show you how to level up your WordPress Development by developing a WordPress site on your localhost.
What is a Localhost WordPress Site?
Installing WordPress on your localhost means you’re developing the site on your computer before you move it to the internet. You’ll need a program to be able to run PHP on your computer (your computer automatically understands HTML but not PHP). This means your files will all be housed on your computer under whichever folder you set up (instructions below). The database will be on your computer as well.
A site set up on your localhost (your computer) will not, by default, be viewable to anyone else. So while this is great for development of large sites, you will need to push the site to a staging site on a server before anyone can see it.
While this is great for development of large sites, you will need to push the site to a staging site on a server before anyone can see it.
Why Should You Use Localhost?
If you have to move the site from your localhost (computer) to a server online before anyone can view it (besides you), why use this setup?
First, localhost allows you to use SASS. If you’re using CSS in your development, you’ll be shocked at how easy and fast it is to use SASS to create stylesheets. Trust me, this is a huge timesaver and also allows you to organize your code more efficiently so that future edits are easier.
Second, the localhost setup flow allows you to have multiple team members working on one site without erasing other people’s work. This article is the first portion of getting that workflow up and running.
Third, version control is able to be used with github and/or bitbucket allowing you to roll back issues on the site easily.
Fourth, instead of making edits to a live site, you always make edits to your localhost first, so the live site doesn’t end up going down because of a coding mistake.
Finally, even if you don’t normally have the need to use this setup with all client’s sites (see the next headline – why should you NOT use localhost), understanding how to set it up and work within this workflow will make you more employable.
Why Should You NOT Use Localhost?
Localhost is not the end-all only way of developing a WordPress site. Using the workflow starting with this article, will have its downsides. Most importantly, this workflow is NOT for quick and cheap WordPress sites. If the site you’re working on is using a pre-made WordPress theme with very minor edits and is on the lower price range (think under $3,000 – $4,000), you should probably not be using a localhost WordPress site (except for learning/practicing purposes).
This workflow is NOT for quick and cheap WordPress sites.
This workflow does make it more time-consuming to make small edits. Instead of FTPing into a site, editing the CSS and saving, now you’ll need to:
- Turn on your MAMP/WAMP server on your computer
- Open the file and edit and save
- If using SASS, you’ll need to make sure SASS is watching the edits
- Push the Changes to Github
- Log into the live site’s server using SSH in the console
- Pull the site’s edits
- Test the site
Obviously, this makes edits more strenuous. But for larger sites where things need to be tested first before deployment to the live site, this is the way to do it!
Setting up Your Localhost
Your computer doesn’t automatically understand PHP, so to allow your site to run on your computer, we have to download a program that essentially teaches PHP to your computer. The most common, and the one we’ll be using, is MAMP. Visit the MAMP website and download the program; you can use the free version.
Once you download it, simply double-click and install the program.
Then open the program and click on Preferences:
Choose the Web Server tab. Here we’re going to set up your localhost root folder. This is where any website you create on your localhost will be found. I put it under Documents -> localhost on my computer, but you can use any folder structure you’d like. Keep in mind that using an easy one – something close to the root of your user – will be easier for you in the long run. To make it even easier, don’t use spaces in your folder name.
In other words, you don’t want it to be something like “Kim -> Documents -> Website -> My Sites -> Clients -> localhost”. That will end up being a huge annoyance. Trust me on this. You can, however, name this folder anything – it doesn’t need to be named “localhost”. You could name it “candy-canes” if you want… but I wouldn’t recommend it.
To set the Document Root, click the folder icon next to Document Root and select the folder that all of your sites will be under. In my case, I clicked the folder icon and chose Documents -> localhost. Underneath this folder named “localhost”, you can add any number of WordPress or other sites created in PHP.
Running a WordPress Site on Your Computer
Now that your computer knows where to find the files and knows PHP, we’ll need to set up the WordPress site. Download the latest WordPress version, unzip the files, and move them into a folder under your Document Root folder (created above).
If you want more than 1 WordPress site: create a folder underneath your Document Root folder (mine was named “localhost”) for each site you’ll be adding here. For example, this could be your file structure:
- Documents
- localhost
- website1
- a complete wordpress installation
- website2
- a complete wordpress installation
- website3
- a complete wordpress installation
- website1
- localhost
Now, go back to the MAMP program (image above), and click “Start Servers”. It should open up a page for you that looks something like this:
You can click “My Website” to see your current WordPress sites. If you added the WordPress files under a folder, you’ll see folder names here. Click the one you’re installing and it will take you to the “Famous 5 Minute WordPress Installation” page.
But hold on, we don’t have a mysql database set up yet! Go back to the Webstart page, and click on “phpMyAdmin” below the MySQL section on the left.
Just like a database on any other server, you’ll create a new database within this mysql by clicking “new” on the top left. You can name it anything you’d like.
You’ll also need a username and password for the WordPress installation. Typically, your default username will be “root” and the password will either be empty or be “root”.
Password doesn’t work? No worries! Go back to the Webstart page and click phpMyAdmin. Click User Accounts on the top tabs. You should see a user named “root” with a hostname of “localhost”, global privileges set to “all privileges”, and password set to “yes”. Click Edit Privileges next to this, then click “Change Password”. You can choose no password, or set a new password. Set the Dropdown to “native mysql authentication” and click Go.
Now you can go back to your localhost website (Webstart page -> My Website link at the top left), choose the folder your site is in, and complete the WordPress 5 minute installation.
You are now running WordPress on your localhost!
Final Notes
Some final thoughts for those who are looking to make this a normal part of their workflow:
Making the Document Root of your localhost MAMP server close to your user, lowercase, and with no spaces will make your life easier (ie. Kim > localhost NOT Kim > Documents > Website > many Websites > why do you have so many folders > this looks like horrible organization > don’t do this).
When you create a database, name it something relating to the site. You’ll thank me when you have 15 databases in your phpMyAdmin.
See Next: Using SASS on your Localhost WordPress Installation
