WordPress logo for general WordPress tutorials

Local Development Environment for WordPress

2 - How to set up your local WordPress development environment

published: 15.02.2018

Doing WordPress development on a production server is plain stupid. To have your own local environment is a prerequisite for any WordPress (or any backend developer). This tutorial is all about setting up your own development environment; a web server with PHP support and a database.

This tutorial focuses on MAMP -server. I’ll explain why it is my choice as a tool.

About development in general

My preferred OS is Mac OS.  I do use Windows and even Linux (occasionally). I also do work on many computers, which does not make it easier to share local development environments on all computers. The code is easy to replicate on multiple computers but the database and other settings are not.  Or to say it as it is – It’s damn difficult and error-prone to use multiple computers and it makes no sense.

Advice #1: Use only one computer for a project

WordPress requirements

WordPress needs a web server with PHP support and a database.

  • Apache (or nginx), a web server
  • MySQL (or MariaDB) database
  • PHP support on the server

These AMP -stacks come in multiple ready-made “packages”; MAMP for Mac (also for Windows), WAMP for Windows, LAMP for Linux and XAMP for any OS.

The needed services could be installed or put into service in different operating systems in multiple ways. Mac OS and Linux have an easy way to start using a local web server. Installing and starting a database as a service in an operating system is quite easy too. But system maintenance is more difficult and because we want an easy solution, I recommend using MAMP.

Alternatives for local WordPress environments

Setting up a development environment is an important and very personal choice. Every developer seems to have their own opinion about it. You could use virtualization, Virtual Box, Fragrant, Docker, Local by Flywheel or such. Then you “need” task runners, version control, editor, FTP client plus other tools. I do not cover these topics in this article except a few words about Flywheel.

MAMP is my choice

I use MAMP! A great thing about MAMP is, that it’s free and also available for Windows. It’s easy to configure and it’s easy to use for all local web development, not only for WordPress. And as a real server, Apache or Nginx, it is the same as your site will be running in production. Your site will behave the same as it will on a live server.

Downloading and installing MAMP

Download MAMP here https://www.mamp.info/. You can use the free version but there is also a paid Pro version. When you install the software you can choose not to install the pro version.  Install the software with default settings. On a Mac, it installs in Applications -folder.

MAMP local server installation folders

As a default MAMP will use the htdocs -folder as a root folder for web sites. In other words, your websites, HTML -files, WordPress installations etc. should be placed in this folder. You can change the location of this “web-root” and you probably should. I’ll explain later.

Starting the services

Note! This tutorial uses MAMP version 4.4.1 as an example. This is the very latest version of MAMP as of writing this tutorial (February 2018). All the functionality and settings are same as with the previous versions with the exception of the Cloud feature which was added to MAMP in this version.

You need your server(s) running when you do your development. To start your local server just start the MAMP application. When the MAMP application is running, you need to start the web server and the database server. You can configure these to start as soon as the MAMP application starts. If the services are not running, you can not run your local sites.

MAMP Preferences

MAMP has six tabs on preferences

  • Start / Stop
  • Ports
  • PHP
  • Web Server
  • MySQL
  • Cloud

Start/Stop

MAMP start stop settingsI choose to start services when starting MAMP and stopping them when quitting MAMP. This makes my life easier. I do not check for MAMP PRO but do check for updates and I do not let the application to open WebStart page. This is because I can open the page if I need it. I only need start page to get easy access to open PHPMyAdmin to access my databases.

Ports

MAMP Ports settingsI have chosen to set my web server ports (Apache and Nginx) to 80. 80 is the default port for HTTP -traffic.  If the port number is 80, you need not add a port number at the end of URLs when testing your local sites. This setting will cause MAMP to ask for your system password every time you start or stop MAMP but it’s a small price to pay.

PHP

MAMP PHP settingsHere you can choose the PHP version. I have always used the latest version and have never had any problems when brought my sites live on my hosting service. If you have special needs for certain PHP version, check it from your hosting provider.

Web Server

MAMP Web Server settingsThis is important! Here you choose which server you use; Apache or Nginx. I use Apache but either will do. The important detail on this tab is the ability to choose the folder that acts as your web-root. Every web server (hosting account) has a folder which is the place where the web documents (files for your site) are located. This is the point where your domain name is pointing.

MySQL

MAMP MySQL settingsThe MySQL tab only shows the version of database server version. Nothing to change here.

Cloud

MAMP cloud settingsAs of writing this tutorial I have only tried the Cloud functionality. The Cloud functionality is aimed to help distribute your development environment to multiple computers or/and to backup your local server root folder and a selected database. The pricing of the service is still a bit unclear to me. I’ve only just started the demo version and I’m testing it. To buy the service seems to cost 9,99€ and I suppose it is per database. Unfortunately, the shopping cart info does not state if the price is 9,99€ per database per month or 9,99€ per database forever. At this moment I feel that this feature is not important for me.

Files and locations

I do not like to use my Applications folder for storing my sites, so I have created a new folder for MAMP web root. I recommend you to do the same. I have chosen my “web root” to be a mamp_www -folder on my mac and added the folder to the dock for easy access. So, if I place an HTML -file named, test.html into this folder, the URL to the file is http://localhost/test.html And every site I design locally have their own folder underneath this “root folder“. Their addresses are like.http://localhost/foldername

Simple as that.

Alternative for MAMP – Flywheel

I promised to say a few words about Local by Flywheel. It is a great, simple and easy to use local WordPress environment. You can download the application from getflywheel.com. When Flywheel is running you simply install a WordPress with a few clicks. Next time you need your local site you start Flywheel, start the site from Flywheel UI and start doing your job.

Local by Flywheel User interface

Flywheel is great and easy to use. Still, my choice is MAMP because I do more than WordPress development and MAMP is better suited for that. I need to say that Flywheel has one extraordinarily great feature – it can open access to your local site for the world. It’s a great way to let your customer or colleague have a look at your site during the development phase.

Next step, installing WordPress

The next tutorial will cover installing WordPress on your local server (MAMP). I will explain best practices, use of databases and configuring WordPress before and after installation. Then we are ready for the real fun – coding our first theme.

Author of this site: Kari Selovuo

I'm a web developer/designer, instructor, and writer who has a mind of a developer and a heart of a designer. I like to share my knowledge and help others learn web development.

Twitter: @KariSelovuo

Leave a Reply

Your email address will not be published. Required fields are marked *

0 Shares
Tweet
Share
Share