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: https://github.com/wprig/wprig/

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: https://local.getflywheel.com/

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

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 xxx.dev 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 https://github.com/WPTRT/theme-unit-test 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: https://nodejs.org/en/ 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: https://getcomposer.org/download/
You need to type these into the terminal.

Download gulp by running the commands listed at https://gulpjs.com/docs/en/getting-started/quick-start

• 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: https://code.visualstudio.com
Open the visual Code Editor (an OSX App) editor and go to marketplace and install these extensions:
editor config
ESLint
PHP debug
PHP intellisense
phpcs

• 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 https://github.com/wprig/wprig 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 https://wprig.io. 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.