Build progressive WordPress themes with WP Rig [Video]

6 min read
Oliver Lindberg

Morten Rand-Hendriksen, senior staff instructor at LinkedIn Learning, has launched WP Rig, a modern WordPress starter theme and build process that helps you create beautiful, fast WordPress themes with great user experiences that meet the latest web standards.

LinkedIn Learning donated Morten’s time to build and maintain the tool, and to celebrate the launch they’ve released the introductory course Building Progressive Themes with WP Rig, taught by Morten himself, for free.

We caught up with Morten at WordCamp Europe to find out how WP Rig works, what part Google played in its development, and how it’s going to evolve.

What exactly is WP Rig?

MR: It’s a new rig for developing progressive themes. It’s a build process and starter theme combined into one convenient package. Just put it into your development environment, whatever it is, and it helps you write PHP, CSS and JavaScript and then compile it into an extremely progressive, forward-looking theme.

Why have you built it?

MR: It was built because I’ve been teaching people how to build themes through and LinkedIn Learning for years, and the number one request I get is a starter theme that gives you some basic styling in the most modern mould possible. So your menu is laid out using Flex, your main layout is a Grid layout, it has an accessible drop-down menu that works with a mouse, keyboard, touch and everything else.

Starter themes work fine, but if you want to extend them, you need to know a lot about WordPress and how the themes and the templates work. And you also need to know how to use all these new technologies that everyone’s using. It becomes very complex. People just want to write PHP, CSS, and JavaScript. They don’t want to know the latest performance standards, read all the blogs and do all this extra research. WP Rig is a tool that helps us create consistently better code without having to do a ton of extra work.

How does it work?

MR: The standard components are included, so you don’t have to build them, and it also gives you a build process that then optimises all the code when you ship it. Out of the box WP Rig gives you minified JavaScript and CSS, so you don’t have to install any plugins later on. It runs your JavaScript through Babel, so you can write modern JavaScript in ES2015. It runs your CSS or Sass through cssnext, so you can use custom properties or CSS Variables and all of this other fancy CSS stuff that doesn’t exist yet. It tests your code against the WordPress coding standards and also features all these other performance enhancements that exist but that we normally don’t use in WordPress because they’re kind of tricky to wire up.

So if you just install WP Rig and run it as it is, you get this nice, minimalist theme. But if you spend some time on it, you can completely restyle it, extend it, add components, and make it into something of your own.

How did the collaboration with Google come about?

MR: We have a joined interest. Google wants to dramatically and quickly improve the quality of the code on the web, and I’ve realised that WordPress is a good vehicle for that, because 30 percent of the web now runs on WordPress. So if the code quality of WordPress is better, 30 percent of the web becomes better as a result.

And I want to use WordPress as a vehicle to further web standards. As WordPress has such a huge footprint, if we do something, it becomes the standard. The best example is responsive images. If you look at the statistics of overall web page load on the internet, you can actually see a drop on the graph when WordPress shipped the version that supported responsive images. Suddenly the average page size on the internet fell because of WordPress!

What part does the community play in WP Rig?
MR: It’s a true open source WordPress project. We wanted WP Rig to be owned by the community, so it lives under a GitHub Organizations account and isn’t owned by a company. I’ve contributed the majority of the code so far, but Google, XWP, and other community members have helped develop it. I invited Rachel Cherry, who runs WPCampus [a community and conference for WordPress in higher education], to be the core maintainer. Everyone can contribute to WP Rig, and we have actively reached out to the accessibility group to get code contributions to make sure that this is the best practice.

And WP Rig is AMP-ready as well?

MR: One of the things that we’ve focused on a lot is making WP Rig work well with the AMP plugin because it will be used by a lot of people. As a theme developer, I cannot have an opinion about whether or not people should use the AMP plugin. That has to be the individual site owner’s choice. What I want as a theme developer is control over what happens when the AMP plugin is activated. So in WP Rig there’s a function that allows you to test whether or not the AMP plugin is activated, and then you can wrap your functionality in the conditional statement and either say if the AMP plugin is active, do this or if the AMP plugin is not active, do that. Once people click on it, you – the theme developer – can then make sure that they get the best experience possible.

What are your plans for the project?

MR: I want everyone to not just think of this as a theme to download, but of a thing that they own. It’ll grow into more than just a development rig. It’s going to be a modular space: you install it and build your own themes, and then you figure out how to build an extension that can benefit other people as well. Code it up as a pull request, and it will probably get added. Let’s say you need WooCommerce support: if the WooCommerce team submits an extension, we will add it in. And you can choose which extensions to plug into the theme. It gives the developer full control of the functionality.

For more on WP Rig, check out the official announcement. To get started, download WP Rig for free from the project’s site or on GitHub. Also don’t miss part 2 of our interview with Morten, in which he discusses ethical web design.