WP Rig V3 is now live. Check out the video above for a walkthrough, or you can refer to our previous blog post about the beta for more details about this update. Stay tuned to our YouTube channel as we add more build guides and walkthroughs on this new version.
News
TL;DR
- WP Rig now builds 10X faster on average
- esbuild, Lightning CSS, and Gulp 5
- Linting and PHPCS checks moved to more specific scripts
- Now supports Typescript and JSX natively
- Comes with a React-based Settings page configurable with simple JSON file
- Min. PHP version bumped to 8. PHP Type checking added.
Backstory
For the last year, I have been getting deeper and deeper into all things JavaScript. Typescript, React, Node – you name it. As someone who already understands plugin and theme development for WordPress quite well, I wanted to look and go beyond. I’ve been maintaining WP Rig for a few years now and I had still yet to fully understand exactly how the build process worked and how to truly control it. My understanding of Node was relatively novice, and as someone who had already learned Angular, React, and Stencil.js, I still felt like there was a lot going on in the JS universe that I was still not well versed on.
On my quest to change this and improve, I found myself wondering if WP Rig was still “modern” and “progressive” by today’s standards. Issues had been annoying me. Why does it build so slow? Why are dependency issues so common? Do we have to constantly be annoyed by Stylelint, ESLint, and PHPCS errors even if we are using it to build a theme that we will never distribute? Can’t we just selectively run these checks outside of the early phases of iteration? Should we really be relying on Gulp and Gulp plugins to do literally everything in the build? Why can’t I write in Typescript? Shouldn’t we be able to build React functionality within the theme? My mind began to open to the possibility of something greater than what I had inherited.
Version 2.0 was released in 2019. That was a 5+ years ago! Disruptions in JavaScript seem to occur almost monthly these days. While I give enormous credit and gratitude to the previous developers that worked on WP Rig, there have been enormous strides in JS-based build tools since then. I realized, it is my responsibility to keep this thing fresh. So here we are, at the end of 2024, and WordPress themes of 2025 demand more. I realized, it was time to tear this thing apart a bit and start rebuilding from the ground up.
Architecture
Gulp: While I had my issues with Gulp, it has proven effective. Updates seemed slow. However, as fate has it, Gulp decided to release a new major version (Gulp 5) earlier this year. So, for now, I decided rewriting the entire framework without Gulp was a monumental task that might prove too much for a single ambitious developer. So, I started by simple upgrading Gulp to the latest version. That’s a start. I decided to continue to rely on it for orchestrating tasks (which is what it is good at) and managing the image optimization.
JavaScript
I wanted to see if I could find a better, faster and more modern foundation for managing the transpiling of our theme assets. After some broad research into various modern JS frameworks, I found myself inspired by tools like Vite, Astro, and Next.js just to name some. This led me to esbuild. I thought to myself, why not give esbuild a shot at transpiling our JS? I wanted Typescript and JSX and esbuild handles both natively. After some promising proof-of-concept attempts, I realized I was onto something.
CSS
While PostCSS was good, I thought to myself, what else is out there? Can we keep all the best things about our current CSS workflow in Rig and improve it? Turns out, we could. I then found Lightning CSS. With a bit of tinkering and filling some gaps with some custom Node scripting, once again – success! With an all new gulpfile.js, simplifying the build altogether, and stripping out now unnecessary packages, WP Rig was now building 10X faster!
Features
I started to have so many ideas about what I wanted out of WP Rig. How could we dramatically improve the theme authoring experience? We need to streamline workflows, maintain simplicity, and allow theme devs to focus on what themes do best – style.
Theme settings
Previous versions of WP Rig supported settings. However, I became obsessed with the idea of a React-based settings framework a few years back when I got into block development. Unfortunately, the Site Editor has yet to introduce a proper API to allow theme devs to build their theme settings into that UX. So, I decided to do the next best thing. WP Rig now has a React component based theme settings page that can be added/removed using our existing component system. There is now an Options component that facilitates this new system. An important consideration here was that I did not want to force theme authors to learn JSX, React, components…it’s too much for many as has been made obvious by the continued hesitation by many (mainly web agencies) to adopt Gutenberg and full site editing. So, I decided to take inspiration from the EZ_Customizer component and allow theme authors to build out their settings fields by managing a simple JSON file. The app reads the JSON file and uses it to build out the settings fields. This initial implementation is fairly simple currently, but it is effective and it is a good foundation to iterate on in future versions with more field types. Furthermore, the settings auto-save via the REST API. It feels good.
Utility Classes
Default styles now come with utility classes for things like CSS Grid and Flexbox. These utility classes will likely grow in the future, but it’s a decent start.
Fonts
All font considerations have been moved to a fonts controller. Although WordPress now has it’s own build-in font manager, we thought theme authors would like a more straight forward way of adding custom fonts to their themes, so, there is now a home for these considerations. We recommend packaging your fonts with your theme for better performance and less reliance on CDNs. This could also be a decent home for icon libraries you might want to package with your theme.
Recent improvements added in 2.3 worth mentioning
- Add Site Editor compatibility (Full Site Editing) to your theme using a single NPM command.
- Improved PHPCS, Stylelint, and ESLint handling and supports latest version of WP Coding Standards.
- Support for later versions of PHP 8.
Try it now!
If you are interested in helping us test V3 before we push this major release please pull the V3 branch from Github and submit issues as you find them. Thanks in advance for your help in this effort. If you have ideas for features you think should be added to WP Rig, please submit your feature requests here and feel free to tag me.
Possible future features
- Possibly replacing Gulp altogether in the distant future for something like Task.
- A WebP conversion process for image processing system.
- A more obvious cache busting system for scripts/styles
Changes
Thanks to the WordPress Coding Standards folks updating WPCS to V3, we have upgraded that dependency in WP Rig so now PHPCS gives you more updated coding standards straight from the WordPress team.
We noticed some significant room for improvement in the default mobile menu experience, so we decided to upgrade that. The default mobile menu now properly supports accordion style expand/collapse functionality for sub menus.
Furthermore, we have taken some significant time and consideration into make WP Rig as easy as possible to convert to a Universal theme (unlocking block-based features like full site editing). The revamped mobile menu now also works with the Gutenberg Navigation block. So menus built with the navigation block offer a very similar experience to the standard main navigation, but be sure to double check all settings at the block level for expected layout and functionality. Depending on how you layout your header, you will need to tweak the CSS for the navigation to ensure a good UX.
We have had a video on our YouTube channel showing you how to convert WP Rig to a universal theme, however, we wanted to take it one step further. We have now included a node script that can be run via the command line to execute all of the steps outlined in the video with one command:
npm run editor-supportPlease note that once you have run this script, you will need to create/edit your index page template in the Site Editor to see your website. Currently, the script inserts a completely blank index file, so be aware of that. The index page template overrides the default index.php. All other page templates should work accordingly. We recommend building your header and footer as template parts (synced block patterns), then just using the Content block in between.
Changelog – 2.3.1
- Updated WPCS to V3. Props @robruiz
- Improvements to mobile navigation, primarily collapsible sub-menus, including consideration for Gutenberg navigation block. Props @robruiz
- Improvements to header layout. Props @robruiz
- Added FSE Conversion NPM script. Props @robruiz
- Updated all dependencies. Props @robruiz
- Added onload attribute to preload styles. Props @robruiz
- Updated navigation CSS to prevent blocking of content when mobile menu is toggled off and to have smooth transition from toggle-on toggled-off states. Props @Spleeding1
Monthly Contributor meetings are no longer being help, however, our Slack workspace is still up and running and you are welcome to jump in there and ping anyone.
We are looking to hold meetings every month on the first Sunday of the month. Our current time is at 11 am central, but dates and time can change if more people want to attend but it doesn’t fit with their schedule. On that note we are looking for more maintainers so if you are looking to help us grow this project please reach out to us on Github or join our slack. We are planning on putting out the agenda before the next meeting so that those that would like to participate can.
WP RIG Development
Meeting Notes 06/05
06 JUNE 2022 / 11:00 AM CENTRAL
ATTENDEES
Rob Ruiz, Donte Henley, Sue Baily Weaver
AGENDA
Create a Showcase Page
- Talked of salvaging the already created(but not public) showcasing page that we currently have to show of examples of WP Rig being used in projects.
- Talked best way of implementing the page, be it a static page or an index page that pulls from custom post type.
- Talked of creating a form where users can submit their example and it auto generates a draft post to be reviewed and published on the site.
NOTES
- Maintainer Meetings now scheduled for the first Sunday of the month at 11:00 am Central.
ACTION ITEMS
- Next Build: Donte would like to get a new version pushed out in the next week and then have it sent out to the community through social media.
NEXT MEETING
July 3, 2022 at 11:00 am CENTRAL.
Changes
We have update a couple of the NPM dependencies for WP Rig as well as made some effort into slightly improving accessibility. Also put in a fix that caused php to throw an error that it was looking for a custom.js file that wasn’t there, if you have been working from the 2.2.0 release I suggest you either update or remove the code from Inc/Scripts/Component.php
'wp-rig-custom' => array(
'file' => 'custom.min.js',
'loading' => 'defer',
'global' => false,
),Changelog – 2.2.1
- Extended config file to add the ability to modify author name, author url, theme description and version for production. Props @dthenley
- Bumps ajv from 6.10.2 to 6.12.3.
- Bumps handlebars from 4.7.6 to 4.7.7.
- Change Sidebar screen reader text. see #761
- Update blocks css to use grid css
- Added ‘deps’ to css files array Props @Spleeding1
- Removed call for custom.min.js from the Scripts/Component.php file. Was throwing an error before.
We are looking to hold meetings every month on the first Sunday of the month. Our current time is at 11 am central, but dates and time can change if more people want to attend but it doesn’t fit with their schedule. On that note we are looking for more maintainers so if you are looking to help us grow this project please reach out to us on Github or join our slack. We are planning on putting out the agenda before the next meeting so that those that would like to participate can.
We are looking to hold meetings every month on the first Sunday of the month. Our current time is at 11 am central, but dates and time can change if more people want to attend but it doesn’t fit with their schedule. On that note we are looking for more maintainers so if you are looking to help us grow this project please reach out to us on Github or join our slack. We are planning on putting out the agenda before the next meeting so that those that would like to participate can.
WP RIG Development
Meeting Notes 05/01
01 MAY 2022 / 11:00 AM CENTRAL
ATTENDEES
Rob Ruiz, Donte Henley, Sue Baily Weaver
AGENDA
Last Meeting Follow-up
- Gulp issues. Use Webpack and not Gulp? (Getting started with npm and Composer is overwhelming/confusing for inexperienced developers; Donte suggested making issue for updating our Gulp JSON dependencies to the latest versions because he is having to manually update one in particular [postcss-preset-env] – – Call to community to help with addressing updating dependencies??)
New Business
- Education being used to band-aid issues in Rig (YouTube videos on Easy Customizer & ACF are getting views – – we could do more of that, maybe once a month; Donte wants to do a Twitch/live stream of creating a website; OBS for recording – Rob/Donte may meet about that).
- Plugin development – Would developers like using something like WP Rig for plugin development? Block themes are forcing people to not put so much functionality in the theme. WP Rig may be perpetuating that problem (Rob mentioned the goal of not adding too much functionality into themes – theme is primarily for styling?; Donte’s work style is a bit different – he does add more functionality into his themes).
- PRs: Prettier added recently (wondered if it is compatible with the rest of WP Rig or duplicating functionality? Seems to be okay but we should double check it?)
- ISSUES: Donte would like us to spend a little time looking at what PRs are left and figuring out which may have already been addressed; we ran out of time on the call to get through them
NOTES
- Maintainer Meetings now scheduled for the first Sunday of the month at 11:00 am Central.
ACTION ITEMS
- Next Build: Donte would like to get a new version pushed out in the next week and then have it sent out to the community through social media.
NEXT MEETING
June 5, 2022 at 11:00 am CENTRAL.
At the end of 2020, we began transitioning responsibility of WP Rig over to a new team of maintainers. Today, we have a new team of maintainers and progress has been made on getting WP Rig moving again. We pushed out a new release at the beginning of the year that addressed some long-standing issues in the latest version of WP Rig. Specifics around that can be found in Github. So now what?
We have big plans for WP Rig moving forward…
First and foremost, we are currently working on improving documentation around WP Rig in a big way, so stay tuned to the wprig.io website for updates there, as this is where most documentation for WP Rig will be found in the future.
Second, we are working on some semi-secret integrations with some local ;) development build tools to make it easier and faster to get up and running with theme development using WP Rig. We are hoping that by introducing these, we can generate more interest around this amazing tool and get more people actively contributing to this project.
To keep things short and sweet, we have some pretty ambitious ideas for ways to improve WP Rig in the future. More features, better documentation, and integration with other popular development tools are our primary focuses for the rest of 2021.
We are always actively looking for people who would like to contribute to WP Rig. If you are interested in being a part of this journey with us, please feel free to reach out to us on Github, or join our Slack workspace to join the conversations around all things WP Rig and WordPress theme development.
Rob Ruiz
WP Rig – Team Lead
Agenda for the August 21, 2020 meeting about the future of WP Rig. To join the meeting, sign up by following this link. You can read more about the meeting at WP Tavern.
Agenda
- Brief history of WP Rig.
- What stepping up as an owner or maintainer means.
- Q&A + open discussion.
The meeting is scheduled for 1 hour, of which at least 30 minutes will be dedicated to Q&A and discussion.
Relevant links
In advance of the meeting, here are relevant links worth exploring:
Update: A public meeting is scheduled for Friday August 21 at 8am PST to discuss the future of WP Rig. The meeting will be held over Zoom and everyone is free to join. Code of Conduct applies.
It started as a conversation at a sponsor booth at WordCamp US: What would be the most effective way of directly impacting the performance of WordPress sites and through that the performance of the web? The answer: Build tools for designers and developers to build more performant themes. So we did, and WP Rig was the result. Now we’re putting the question to the WordPress community: Is this what you want?
WP Rig is looking for new maintainers and contributors
An open source project stands and falls on the desire of the community to keep it going. Over the past two years WP Rig has grown from a secret project managed by Morten Rand-Hendriksen to a large public endeavor co-maintained by Rachel Cherry, Andrew Taylor, Felix Arntz, Benoît Chantre, and Morten. It is supported by a popular course on LinkedIn learning and is in use by agencies and developers all around the world.
In late 2019 the majority of project maintainers found themselves in professional circumstances that made it impossible to continue committing the necessary time to keep evolving the project, but we all feel WP Rig is an essential tool for the WordPress community and can play a pivotal role in evolving what theme development for WordPress looks like and what themes in WordPress are.
For these reasons, we are making a public call to the WordPress community to recruit new maintainers and contributors.
If you have an opinion about how WordPress themes should be built, want to build a better starter theme for WordPress, and want to explore and experiment with the future of themes, this project is for you.
We are exploring all options here: Donating WP Rig to the WordPress Open Source Project or more specifically the Theme Review Team, donating it to an agency or new group of maintainers, or freezing the project in its current stable v2.0 state until new maintainers come forward.
A meeting will be organized in January (date and location TBA) for anyone and everyone interested in the future of WP Rig. Stay tuned to this post and the GitHub issue for updates.
What is WP Rig?
WP Rig is a modern build process and starter theme in one package. It allows developers to build performant, accessible themes using modern PHP, CSS, and JavaScript and does the complex work of pre- and post-processing, linting, minification, and optimization. It provides a robust build process using modular Gulp written in ESNext, uses modern CSS techniques like conditional in-body stylesheets, custom properties and media queries, and CSS grid, all processed through PostCSS. It tests every line of code you write against the WordPress Coding Standards.
The purpose of WP Rig is to give developers a tool which outputs themes that prioritize
- Accessibility
- Performance
- Modern best-practices
- Coding standards
- Modern languages and tools
New maintainers, contributors, and adopters are expected to adhere to these principles.
What already exists
WP Rig has an established presence on the web and in the WordPress community. There is a website, a Twitter handle, a Slack channel, and a GitHub organization with multiple repos. This project is already up and running. Stepping in as a maintainer means jumping into a moving car and deciding where it should go next.
What WP Rig can be
The WordPress community does not have a canonical boilerplate or baseline tool to showcase what good theme development and build tools look like. For many years _S (Underscores) served this purpose, but that project has lost steam and adoption and is anchored in an old way of thinking about themes and coding languages.
Developers and agencies would benefit significantly from the WordPress Open Source Project having and maintaining a core theme development kit containing a modern build process and starter theme. That’s what WP Rig was always intended to be, and it is uniquely positioned to take on this role.
There are a myriad of starter themes and frameworks available for WordPress, and they all have great features and practices worth adopting. The challenge is almost all of them are tied either to a commercial product, are in themselves a commercial product, or are internal tools used by agencies for their purposes. WP Rig was intentionally built to be agnostic – a true open source project without fealty to any organization or commercial interest. It is a project for, by, and owned by the WordPress community.
As the Block Editor (Gutenberg) moves into “Phase 2” and blocks migrate out of the content blob to take over the whole view, the WordPress community needs first a place to experiment with what this concept means, and second a best-practice starting point for how to build themes the new way. WP Rig can be that proving ground and best-practice baseline.
There is a possible future on the horizon where theme developers, from novice to professional to agency leads, start from the same baseline with the same build process to build the future of the web. There is a possible future where everyone contributes back to this baseline to keep the community on the cutting edge of accessibility and performance best-practices, build tools, and coding standards, and where an entire ecosystem of new starter themes and build tools are built on top of this baseline. There is a possible future in which WordPress theme developers come together and take on the role and responsibility of staking the course for the front-end of the web by building progressive themes based on the latest and greatest in code, design, and tooling.
WP Rig can be the vehicle to make this future happen.
WordPress and the web it lives on has evolved. So have the tools we use to build experiences and interactions on and with the web. WordPress theme development is no longer “just” about writing PHP and CSS and JavaScript. It’s also about accessibility and build processes and coding standards and performance best practices and and modern coding languages and browser support and a myriad of other topics.
WP Rig bridges this gap by building accessibility, performance, coding standards, and modern coding best practices in by default. WP Rig is a modern build process and progressive starter theme bundled together. It does the heavy lifting so you the developer can do what you do best: Write modern PHP, CSS, and JavaScript. And there’s more:
Continue reading “Introducing WP Rig: A tool to help you build better WordPress themes”