Configuring OS X for WordPress development

This post will cover setting up OS X for WordPress development. We go the extra mile to set up all our packages in OS X using Homebrew this include

  • PHP
  • Nginx (Better under load than Apache the default web server in OS X and for WordPress, Apache vs Nginx here)
  • MySQL
  • Unix Sockets for
  • dnsmasq so we can use real URL’s like mysite.domain and not localhost:8080.

 

While apache might be easier to set up we will use Nginx so you can become familiar with it in a development environment.

Install Xcode and the command line tools

Xcode is available at the app store here, you will need to agree to the license. Once it’s finished open up a terminal and enter the following to install the Xcode command line tools.

Press the enter key to read the Xcode license, keep hitting space till you reach the bottom and then type agree.

Installing Homebrew

We will first need to install homebrew a package manager that will download, manage and upgrade our dependencies (Nginx, MySQL, Php and Dnsmasq) while keeping them separate from any packages included in macOS.

To install copy and paste this command into your terminal. Do not run it as root. You should see Installation successful! Once finished

Brew also asks us to run doctor to make sure everything works.

If everything is ok brew should return the following.

It’s a good idea to run brew update before installing anything, This will make sure you have the latest version of Homebrew and all the newest formulae from the main repository.

All homebrew packages get installed to the Cellar in /usr/local/Cellar/ with the name of the package and the version as the folder name. These folders are then system linked to /usr/local/opt so the latest version is available in a folder named after the package. An example would be the nginx package which we will be installing next.

/usr/local/Cellar/nginx/1.10.1/

/usr/local/opt/nginx/


Installing Nginx

If you haven’t run brew update earlier or recently do it now. Now we will install Nginx

Once that finishes you should see the following. This means Nginx is serving files from /usr/local/var/www and listening on localhost:8080. Localhost simply means “this computer” and will always point to the computer your using, rather than your website being served from a domain such a J-Tronics.co or and IP address such as 192.168.1.100 its found a localhost:8080 since Nginx runs on 8080 by default. Later down we will change this to something more ppleasant such mysite.dev.

As homebrew mentions above to make Nginx start a login we’ll issue the following command.

Now we can open our browser and navigate to localhost:8080 and the following will show if everything is working.

nginx index html
nginx index html

Installing PHP

Before we configure Nginx we need to install Php. The following command will install PHP version 7.0 with MySQL, PHP-FPM modules and won’t include the Apache module.

Then set PHP to start at login.

One last change is we will change PHP-FPM to listen on a unix socket instead of a TCP socket. These means if Nginx needs to make a PHP request and on they are on the same computer it will skip the IP/Network stack. This ends up being much faster.

The file is located below. We use nano to edit it. At the bottom of the file add the line below

At the bottom of this file add the following.

Then we check that PHP-FPM is  correctly configured

Which should return something similar

Restart PHP

 Installing MySQL

And set it to start a login and now.

Secure your MySQL installation by running the following command.

The first question will be if you’d like to use the validate password plugin press no.

Next it will ask you to set a root password, your password won’t ben shown when you type.

Remove the anonymous user and tables

Next set root access to only  be allowed on localhost

Remove the test database

Reload the table privileges

All done!

Rather than deal with MySQL commands we can instead use a nifty tool called Sequal Pro. Go ahead and download it. Click on the Socket tab, settings are as follows with your password of course. Before you click connect make sure to add this connection to your favorites for future reference.

sequel pro login
sequel pro login

Then add a user called wp-user, add a password and click apply.

sequel pro add user
sequel pro add user

Then click the “Choose Database” drop down and click add new database and call it WordPress. Once your done with that open up the Users page again and click Schema Privileges and click the WordPress table on the left and shift click and select all the privileges and click the arrow to move them over to the Granted Privileges tab.

sequel pro add privalges
sequel pro add privileges

After that we’re good to go as far as database go.


Configuring Nginx

Next up we will configure Nginx

Run the following command to create the sites available and sites-enabled which is how Nginx on Linux Ubuntu is set up. First we will setup the WordPress directory in your user folder. The ~ (tilde) is a shortcut for the current user’s folder.

Create the site configurations

Edit the nginx.conf file with nano or your favorite text editor such as text wrangler.

Paste the following into nginx.conf. This will create a minimum conf file and will include all other config files in the sites-enabled that end with .dev thanks to the user of a wildcard *.

Then either create the file with nano or a text editor.

And paste the following into wordpress.dev be sure to replace my site with your choice of domain and change the root and fastcgi user paths to your username.

Restart Nginx to apply the changes.


Adding WordPress files

wordpress setup config
wordpress setup config

Visit the WordPress.org site and download the software. Unzip it and copy the WordPress folder from your downloads folder to the Nginx site root we created earlier. Once your done visit your browser at localhost:8080 and you should see the WordPress setup config.

Where not done yet, if your working on a single user site or don’t care for pretty domains you can stop here.


Using Dnsmasq and Nginx for pretty domains

Not only is typing localhost into the browser not very nice, but WordPress multi site won’t configure correctly with ports applied. We will instead use pretty domains that way we can type something like mysite.dev into the browser instead of localhost.

Add it to start a login

The configuration file  dnsmasq.conf is fount under /usr/local/etc/.

Inside we put the following line:

This will redirect all *.dev sites to the local IP eg 127.0.0.1

Then open your OS X system settings and click on network, click on advanced. Click on the DNS settings, click the + and add 127.0.0.1 and drag it to the top if its not already. Your settings should look as follows.

os x dns settings
os x dns settings

Now if we attempt to ping any address ending in .dev should return 127.0.0.1

 

Forwarding port 80 to 8080

The first file we need to add is an anchor file. This defines the ports we want to forward. Create the file in /etc/pf.anchors/dev  and add the following.



Create a pfctl config file /etc/pf-dev.conf and add the following.

Start the config file.

Forward ports at startup

Create the LaunchDaemons  /Library/LaunchDaemons/com.apple.pfctl-dev.plist file with the following contents

Add the file to startup using the following command:


Nginx.conf Part 2 Pretty Domains

Go ahead and open you wordpress.dev conifg file again.

We’ll go ahead and change the port if you run different applications, I’ve changed it to 8085. Also add the new pretty domains of your choice, add a space for multiple domains.

Restart Nginx to apply the changes.

Finish WordPress Setup Config

Go ahead and open your browser and go to your newly configured mydomain.dev, click on your language of choice, change the username to wp-user and add your password

wordpress setup config database
wordpress setup config database

Once your done  you’ll  be asked to create a user, then sign in!


WordPress Multisite

Add the following to your wp-config.php above where it says /* That's all, stop editing! Happy blogging. */.

Then go to your WordPress admin and under tools click on network setup. You can choose sub domains or sub directories. Don’t worry we will use a plugin so site1.mysite.dev will show up as site1.dev

wordpress create network multisite
wordpress create network multisite

Then the next screen will tell you to add the following to your wp-config.php above the previous multi site settings.


Mapping are custom domains using WordPress MU Mapping

Download the plugin. Then copy sunrise.php to /Users/user/www/wordpress/wp-content/sunrise.php from the WordPress MU Mapping plugin folder.

Then add to  define( 'SUNRISE', 'on' ); your wp-config.php

Then add your computers IP address.

 

wordpress domain mapping configuration
wordpress domain mapping configuration

If you enjoyed this article read more at our WordPress Section. We also have a subscription box at the footer.

Leave a Reply

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