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.
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:
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 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
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.
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
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.
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.
