Setting up a Local Environment for Your WordPress Website

Setting up a Local Environment for Your WordPress Website

What Exactly is a Local Environment
Let's first address what exactly it means to setup a local environment. What you’re essentially trying to do is run a copy of your WordPress website on your own computer.

This can come in handy for several reasons, such as testing out changes before making it live to the public, doing any theme or plugin development or simply testing anything out such as swapping themes or making sure an update doesn’t break anything beforehand.

If you’re making those changes on a live website and something suddenly breaks, you could reverse it, but you could have brought your site down which means website visitors during that time period may experience an error.

Who This is For
With that said, we don’t recommend setting up a local copy of your website for everyone. You won’t need to setup your own local environment if all you do is add new blog posts or pages, as these can be easily added and edited and saved in draft mode before publishing live.

Or if you hire developers to manage your website for you, in that case, they would probably have this setup on their own machines.

You can choose to just have WordPress installed on a live server on the web, or choose to also have a local copy on your computer. If you’ve decided a local environment would come in handy for you, it’s time to choose the method.

There are several ways in which you can get all this setup on your computer. Below is a table breaking down your options:

Development: Live Site:
MAMP (Mac) / WAMP (Windows) Shared Server
BitnNami  
Desktop Server (both Mac & Windows)  
WebMatrix  
Manually on a Mac  

The easiest methods is to use MAMP (for Mac users) or WAMP (for Window users) or DesktopServer (both Windows and Mac).

For more advanced users, we have a guide for a manual setup for Mac since it comes with Apache and PHP built-in. We’ll show you how to configure it. This option requires you to touch host files etc. but will give you more control than the out-of-box solutions above.  (Coming Soon)

Develop Locally, Use Live Site For Your Real Content
Before we get started installing WordPress locally on a computer, let me address a common issue people run into. Oftentimes, after someone successfully installs WordPress and builds an entire website, they wonder how they can move that website from their computer to a live site on the web.

But that’s not easy. We recommend that you only use a locally hosted version of WordPress to develop and any real content that you want to post to do it on your live site.

So to reiterate, use your local copy of WordPress to develop or customize themes, plugins or test different features from WordPress on your computer. But to build out your real site with real content always do that on the live site on the web.

To move content from your computer to the live site on the web is a real challenge. You can publish content on your live site and if you need, pull the live content on the web down into your computer.

The reason is because your live site will have a different database. There are ways to share the same database but then you'll run into issues such as making real changes to your live database on your local machine. For a beginner, we recommend:

  • Develop on local development environment
  • Post real content on live site

The Technology Stack
First, let’s start with the basics for creating a simulated server environment on your computer. To run WordPress, the software application, you’ll need 3 core things:

  1. Apache/Nginx - This is the web server that serves up your website on the internet. You should choose either Apache or Nginx as they are the most robust and featureful servers for running WordPress. To learn how a web server works, read the post on how a web server works.
  2. MySQL - This is the database that stores all your information.
  3. PHP - This is the programming language that WordPress is written in. Your computer needs to have PHP installed in order to interpret or “understand” how to run WordPress.

 

Installing WordPress with MAMP
MAMP allows you to install an AMP stack on your computer. That is, Apache, MySQL and PHP. As noted above, the 3 core things you’ll need to get WordPress working.

The first M used to stand for Mac, but it’s now also available on Windows, so it now means “my”. We’re going to walk through installing MAMP on a Mac.

Step #1:
First install MAMP from https://www.mamp.info/en/downloads/

Step #2:
Double click on the .pkg file that was downloaded and follow the installation prompts to install.

Step #3:
In your Applications folder, you’ll see a folder for MAMP and another one for MAMP PRO. MAMP PRO automatically gets installed and if you choose to pay for it, it provides you with added features, but to get WordPress up and running, we’re okay with just the free version.

Step #4:
In the MAMP folder, you'll find the MAMP application. For your convenience, create a shortcut in your dock by dragging the MAMP application icon down to the dock.

Step #5:
Double click on the MAMP application to open it. If it asks you whether you want to launch MAMP or MAMP PRO, just click on MAMP.

Step #6:
Click on Preferences. In general, you can leave the settings as is. But just so that you’re familiar with it, the Start/Stop tab allows you to choose to start the server only when you start MAMP itself and stop it when you stop MAMP, this is a good idea. Also, uncheck “check for MAMP PRO”, otherwise it will pester you to upgrade to PRO each time you launch MAMP.

Step #7:
Under the Ports tab, you’ll see that by default Apache is set to run on port 8888, Nginx is set to run on port 7888 and MySQL on 8889. This is to avoid any conflicts with other server software applications running on your computer.

The default port for your web server would be port 80 and MySQL is 3306. If you choose to leave Apache on port 8888, which we recommend, you’ll have to type in your browser localhost:8888 instead of just localhost if it were to run on port 80 instead.

It’s up to you which port you choose, but an additional 8888 is not too much typing to avoid conflicts down the road.

Step #8:
Under the PHP tab, it will have selected the most recent PHP version to use by default. Leave that setting as is.

Step #9:
Under the Web Server tab, you’ll have the option to choose either Apache or Nginx as your web server. Apache will be selected by default, so leave that as is. You’ll also have the option to choose a document root.

You can click on the folder icon and choose the folder where you want to place all your website documents. For example, you can create a folder called Sites for all your websites, under User -> Documents -> Sites

Step #10:
Click OK

Step #11:
Then click on Start Servers

Step #12:
A browser page should automatically pop up or you can visit it directly by typing in locahost:8888 (or just localhost, if you chose port 80). This page is being locally hosted on your computer.

MAMP now gives us the server environment needed to get WordPress to work. Now we must go and install WordPress itself.

Step #1:
Go to https://wordpress.org/download/ to download the latest version of WordPress.

Step #2:
It will download a zip file. Double click to expand the zip file and you’ll get a folder called wordpress. All the files included in this folder are the files for running WordPress.

Step #3:
Now in order to get it working with MAMP, we’ll need to put those files into the sites folder we had configured earlier in step 6 of setting up MAMP above. That was User -> Documents -> Sites. We’ll need to drag all the contents within the wordpress folder into the Sites folder. This way MAMP knows about it.

Step #4:
Then you can visit localhost:8888 in your browser and you’ll be taken automatically to localhost:8888/wp-admin/sestup-config.php

Step #5:
Click English (United States), or any language you want

Step #6:
Click Continue

Step #7:
It will now tell you to setup a database. Click on "Lets Go"

Step #8:
In order to get the database information needed for this screen, we'll have to first go setup a new MySQL database.

Step #9:
In a new browser tab, type in the address localhost:8888/phpMyAdmin. phpMyAdmin allows you to manage your MySQL database over the web. By accessing that address, you'll be able to go to the administrative interface for your MySQL database and do things such as managing databases, tables, columns, relations, indexes, users, permissions, etc.

Step #10:
Click on the "database" tab and under create database, enter a name for your database. I've went ahead and called mine "indigothemes" in the example, choose a different name for yours. Then click create.

Step #11:
Now lets go back to our WordPress setup and enter the database information. Under database name, our enter "indigothemes". Enter the name you used to create your database. The MySQL username that MAMP created when it installed MySQL is "root" and the default password is also "root". Our database host is "localhost:8888". You can leave the table prefix as "wp_", that way any new database table will have this prefix.

Step #12:
Click "Run the Install"

Step #13:
You'll be taken to a screen to enter your site information and admin login. Use any name for your Site Title. You can always change this later. Enter a username, password and email. Click "Install WordPress".

Step #14:
You've successfully installed WordPress on your local machine. Congratulations! Sign in with the username and password you just used.

Step #15:
Anytime you need to run WordPress, simply click on the MAMP application and click "Start Servers". Then visit localhost:8888 in your browser. That's it!