Install Node.js and Composer

WP Rig depends on NPM and Composer for package and dependency management. Learn how to set them up on your computer.

WP Rig uses JavaScript and PHP dependencies to work its magic on your code. These dependencies are installed and managed using two tools that need to be installed on your computer before we get started: Node.js, and Composer, the dependency manager for PHP.

If you’re on a Mac, you already have Node.js installed. If you’re on a Windows computer you need to install Node.js from the official website, nodejs.org.

If you want a detailed, step-by-step walkthrough of how to set up and use Node.js and npm, the Node package manager, check out “Learning NPM, the Node Package Manager.”

Whether you’re on Windows or Mac, you’ll need to install Composer from the official website, getcomposer.org. If you want a detailed step-by-step walkthrough of how to set up and use Composer on Windows or Mac, check out my course, “Learning Composer, the PHP Dependency Manager.

Set up your development environment

The first step in building custom WordPress themes with WP Rig is to set up a robust development environment on your computer. You’ll need:

  • A local server environment to run WordPress itself
  • A code editor or IDE
  • And all the browsers you can get your hands on for testing.

These will work in combination with the build tools in WP Rig to make up your development environment. My preferred setup, and the one I’m using in this course, is:

Finally, we use VS Code with the editor config, ESLint, PHP IntelliSense, phpcs, Prettier, and stylelint extensions installed. All these tools are free and can be installed across Windows, Mac OS, and Linux.

To follow along I recommend you set up the same or similar tools on your computer. You’ll find a full breakdown of the recommended tools and extensions below, and in the Wiki on the WP Rig GitHub repo.

Recommended code editor extensions

To take full advantage of the features in WP Rig, your code editor needs support for the following features:

VS Code extensions

For VS Code users, here’s a list of recommended code editor extensions.

Wp Rig: A Primer

Before we get started, you might want to know a bit more about what WP Rig is, and where it came from. WP Rig is an open source WordPress community project [Morten Rand-Hendrikson] started in 2018 to make the process of building modern, progressive themes easier for everyone.

It now has a long list of contributors from the WordPress community and beyond, and is rapidly becoming the go-to starter theme and build process for beginners and advanced developers.

WP Rig started off as a simple idea: we wanted to build a tool to help you do what you do best, build accessible, feature-rich, and visually stunning WordPress themes for every person who uses the web. We also wanted to take some of the heavy lifting of staying up-to-date on coding and performance best practices off your shoulders and automate it in the process.

The result is a tool that helps you build advanced, progressive WordPress themes using the latest web and coding standards, performance best practices, and development tools. You write PHP, CSS, and JavaScript. WP Rig lints, optimizes, and minifies your code to make your theme and the site it runs on as fast and performant as possible.

Out of the box you get a fully-styled theme built for performance and maintainability. And as you work, WP Rig does all the heavy lifting of optimizing your code to meet and exceed modern best practices using a custom build process. And that’s not all. WP Rig helps you write better code by checking that you follow WordPress coding standards and letting you know how to fix your code when you make mistakes.

It provides current and upcoming performance best practices including in-body style sheets, conditional pre-loading of content, and code magnification all out of the box. It ships with optional WordPress templates you can use to customize the appearance and behavior of your theme. It uses CSS Grid and Flexbox for modern layouts and dramatically simplified HTML markup. And it has full support for Gutenberg blocks, and full integration with the AMP plugin if the end user activates it.

That’s WP Rig in a nutshell. Now let’s dive in and see how we can make WP Rig work for you.

Introduction: Building Progressive WordPress Themes

I started building WordPress themes more than 10 years ago. And since then, WordPress, the tools we use to build it, and the web it lives on have all changed and evolved.

Now, it’s time to evolve the theme building process as well. Today, I want to introduce you to a whole new way of building modern WordPress themes. It’s a tool my friends from the WordPress community and I have built, called WP Rig, which combines the best WordPress on the web platform have to offer with the latest and greatest build tools and automated processes, to make your theme as light and fast as possible.

WP Rig is a modern WordPress starter theme and build process, bundled into one convenient package. It helps you build WordPress themes that not only look great and provide exciting user experiences, but are also lightning fast and meet the latest web and performance standards.

In this course we’ll get set up and do a full breakdown of how WP Rig works, and how to work with it. And then we’ll explore a hands-on example on how to build advanced, modern PHP, JavaScript, and CSS with WP Rig.

WordPress is 15 years old and powers 34 percent of the web. WP Rig is built to make the web better by helping you build better themes. And in this course, I’ll show you how to get it right. Let’s get cracking!