A progressive theme development rig for WordPress, WP Rig is built to promote the latest best practices for progressive web content and optimization. Building a theme from WP Rig means adopting this approach and the core principles it is built on:
- Accessibility
- Lazy-loading of images
- Mobile-first
- Progressive enhancement
- Resilient Web Design
- Progressive Web App enabled
- AMP-ready
WP Rig office hours take place every other Thursday from 5:30 - 6:30 p.m. UTC, starting January 10, 2019.
Join WP Rig core maintainers to chat about the project, work alongside other devs, discuss ideas, address bugs, and more.
- View the WP Rig Google Calendar to see dates and find info to join the discussion
- Subscribe to the WP Rig Google Calendar to stay informed.
WP Rig has been tested on Linux, Mac, and Windows.
WP Rig requires the following dependencies. Full installation instructions are provided at their respective websites.
- Clone or download this repository to the themes folder of a WordPress site on your development environment.
- DO NOT change the name of the theme directory from the default
wprig.
- DO NOT change the name of the theme directory from the default
- Configure theme settings, including the theme slug and name.
- View
./config/config.default.jsonfor the default settings. - Place custom theme settings in
./config/config.jsonto override default settings.
- View
- In command line, run
npm installto install necessary node and Composer dependencies. - In command line, run
npm run devto process source files, build the development theme, and watch files for subsequent changes.npm run buildcan be used to process the source files and build the development theme without watching files afterwards.
- In WordPress admin, activate the WP Rig development theme.
- Follow the steps above to install WP Rig.
- Run
npm run bundlefrom inside thewp-rigdevelopment theme. - A new, production ready theme will be generated in
wp-content/themes. - The production theme can be activated or uploaded to a production environment.
To take full advantage of the features in WP Rig, visit the Recommended code editor extensions Wiki page.
WP Rig can be used in any development environment. It does not require any specific platform or server setup. It also does not have an opinion about what local or virtual server solution the developer uses.
Before first run, visit the BrowserSync wiki page.
npm run dev will run the default development task that processes source files. While this process is running, source files will be watched for changes and the BrowserSync server will run. This process is optimized for speed so you can iterate quickly.
npm run build processes source files one-time. It does not watch for changes nor start the BrowserSync server.
npm run translate generates a .pot file for the theme to enable translation. The translation file will be stored in ./languages/.
npm run bundle generates a production ready theme as a new theme directory and, optionally, a .zip archive. This builds all source files, optimizes the built files for production, does a string replacement and runs translations. Non-essential files from the wp-rig development theme are not copied to the production theme.
To bundle the theme without creating a zip archive, define the export:compress setting in ./config/config.json to false:
export: {
compress: false
}WP Rig uses a Gulp 4 build process to generate and optimize the code for the theme. All development is done in the wp-rig development theme. Feel free to edit any .php files. Asset files (CSS, JavaScript and images) are processed by gulp. You should only edit the source asset files in the following locations:
- CSS:
assets/css/src - JavaScript:
assets/js/src - images:
assets/images/src
For more information about the Gulp processes, what processes are available, and how to run them individually, visit the Gulp Wiki page.
As WP Rig processes CSS and JavaScript it will support the browsers listed in .browserslistrc. Note that WP Rig will not add polyfills for missing browser support. WP Rig will add CSS prefixes and transpile JavaScript.
WP Rig gives the developer an out of the box environment with support for modern technologies including ES2015, CSS grid, CSS custom properties (variables), and existing tools like Sass without making any configurations. Just write code and WP Rig handles the heavy lifting for you.
Configuring the behavior of WP Rig is done by editing ./config/config.json. Here the developer can set the theme name and theme author name (for translation files), and local server settings for BrowserSync. Additionally, compression of JavaScript and CSS files can be turned off for debugging purposes.
Place your custom theme settings in ./config/config.json to override default settings, located in ./config/config.default.json.
WP Rig ships with advanced features including:
- Lazy-loading images
- Built-in support for the official AMP plugin
- Progressive loading of CSS
- Modern CSS, custom properties (variables), autoprefixing, etc
- Modern layouts through CSS grid, flex, and float
For more information about the advanced features in WP Rig and how to use them, visit the Advanced Features Wiki page.
WP Rig is released under GNU General Public License v3.0.