Talking WPRig and Theming in the Gutenberg Era with Morten Rand-Hendricksen

This month we’re taking a look at the WPRig WordPress framework from its developer Morten Rand-Hendricksen. This will be a live remote presentation with Q&A as time allows. If you want to learn more ahead of the meetup, follow this link https://wprig.io/

“Pave the cowpath” – WordPress could be the thing that paves the cowpath for the modern web, but it isn’t.

Underscores used to be the starting theme do build off of, but there was no real standard, and modern, build process.

Build Process

• Modern JavaScript
• Modern CSS (customer properties, etc)
• WordPress Coding Standards
• Code Linting for PHP, JS, CSS
• Automatic internationalization
• Code and asset optimization

Starter Theme

• Accessible
• Modern best-practices
• Styled out of the box
• Minimum required files
• Optional templates
• Progressive features
• Gutenberg

New in WP Rig 2.0

• Full rebuild of Gulp process and scripts
• All-in on OO PHP
• CSS custom properties and components
• PostCSS everything
• No more SASS
  • SASS is to CSS like jQuery was to JavaScript
  • CSS now includes the things that SASS used to provide

Where Do I Get It?

Get it from GtiHub using the v2.0 branch

The WP Rig Philosophy

WP Rig does the heavy lifting so you can focus on what you do best: Build themes using modern PHP, CSS, and JavaScript.

Using WP Rig 2.0

1. Setup you regular WordPress dev environment.
2. Clone/copy the WP Rig into the themes folder
3. Check defaults config/config.default.json
4. Add custom setting as necessary config/config.json
5. In terminal, run npm run rig-init
6. In terminal, run npm run dev
7. Start developing

Requirements

• npm
• composer

Configuration

• config.default.json

SSL Support

• npm to generate the cert
• setup config.json and set https: true

PostCSS

• Allows you to write future CSS that will then get converted to today’s CSS
• Can configure your level of feature support
  • Custom media queries
  • Custom properties
  • Nesting rules

Debugging

• Support to prevent minification/optimization to allow development debugging

Live Editing/Previewing

What Wp Rig Does: PHP

• Watches PHP files
• Checking PHP against WP coding standards

What Wp Rig Does: CSS

• Watches CSS files
• Processes CSS through PostCSS
• Lints CSS to WP Coding Standards
• Integrate with editor
• Minifies files for production release

What Wp Rig Does: JavaScript

• Watches JS files
• Lints JS to WP Coding Standards
• Integrate with editor
• Minifies files for production release

Starter Theme Features

• Accessible down-down menus
• Modern CSS layout
• Modern JS loading
• Optimized Google fonts
• Lazy-loading images
• AMP-ready
• Modular in-body CSS loading
• Plug-n-Play template hierarchy

Demo

• Make your changes in the config.json not the config.default.json
• CSS files are broke out into components/modules and only included when needed.