Setting up WPRIG on a Macintosh Computer – some comments.

Today I had a go at setting up wprig. It is a development environment for making WordPress themes. I’m using it to try and update our church website. Here are some tips on how to set it up. This is very advanced – for WordPress Theme Coders.

wprig is an environment to help you develop great WordPress themes. It’s available to download from here:

There is a free set of lessons on how to use it at Linked-In.

The tutorial on LinkedIn is great but it assumes some things and there were a few issues that I’ll address below.

1. Install WordPress

The instructions assume you are already developing WordPress themes on your local computer. I wasn’t. So I firstly needed to install AMP – Apache mySQL and php onto my Mac.

I found Local Flywheel to be absolutely fantastic and very easy. It is a MacOS App that sets up a virtual machine, installs all the SQL etc, and installs WordPress all in one step. You could use MAMP and Serverpress to achieve the same result. Flywheel is a commercial app but local flywheel allows you to run it for free on your own Mac. You can get it from here:

Here’s an example of one of the GUI setup screens showing how easy it is to set up:

One of the setup screens for Local Flywheel

Some notes on installing WordPress:

  • When you setup flywheel DO NOT use the default domain of xxx.local as the ‘Site Domain’. It will cause problems later on when you use BrowserSync. Do not use either. I found that xxx.mylocal worked fine. (xxx is the name of your website eg wayne.mylocal)
  • From within wordpress get these tools: developer and show-current-template
  • get the theme test data from and import it into wordpress (Tools => Import => WordPress)

2. Install NPM, Composer, Gulp 4 and Visual Studio Code

Install node.js by clicking on the package from here: It’s a package and you click to install it.

  • NOTE: Don’t worry about a message that says “Make sure that /usr/local/bin is in your $PATH.” It’s already in the path by default in OSX so you can ignore the warning.

Download composer by typing the 4 lines quoted here:
You need to type these into the terminal.

Download gulp by running the commands listed at

  • for the step that says “npm install –global gulp-cli” you need to type “sudo npm install –global gulp-cli” or it won’t work.

Install visual studio code from here:
Open the visual Code Editor (an OSX App) editor and go to marketplace and install these extensions:
editor config
PHP debug
PHP intellisense

  • I’m not sure why but I was having problems with ESLint bit I had to do this: sudo npm install -g eslint

3. Install wprig

Now is a good time to go and watch the tutorial by morten rand hendriksen at Linked-In. He assumes you have done all of the above. I followed his tutorial step by step from here.

  • Firstly you Clone or download the repository from GitHub to the themes folder of a WordPress site on your development environment. To do that copy everything from to your wordpress/wp-content/themes/yourtheme folder.Then you modify some settings to suit your theme. /dev/config/themeConfig.js and  /dev/style.css  and ‘workspace’ settings
  • Then you type “npm install” to get the whole rig running.
  • Then you type “npm run build” to make your theme.
  • These steps are summarised at It’s that simple!

Some problems and observations. I had a few hiccups….

  • When I typed “npm install” to get it going I had a problem. It would not run composer. I had to type “sudo mv composer.phar /usr/local/bin/composer” to make composer available globally before I typed npm install.
  • The tutorial says to add “phpcs.composerJsonPath”: “wp-content/themes/yoursite/” to the json settings file. This actually broke it for me. I think I was already in the right path so no change was needed.
  • browsersync is amazing but it was VERY slow (20 seconds to load a page!) I needed to change domain from mydomain.local to mydomain.mylocal in flywheel. You also need to change this setting in themeConfig.js proxyURL: ‘mydomain.local/’ Then restart flywheel and retype “npm run build” and BrowserSync should be full speed.

A huge thanks to Morten Rand Hendriksen  and the rest of the team for a great development environment.


Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.