WP Rig is a modern WordPress starter theme and build process, bundled into one convenient package. It helps you build WordPress themes that are beautiful, great user experiences, fast and that meet the latest web and performance standards.
WP Rig is an open source WordPress community project that we can use to build advanced, progressive WordPress themes using the latest web and coding standards, performance best practices, and development tools. We write PHP, CSS, and JavaScript. WP Rig lints, optimizes, and minifies our code to make our theme and the site it runs on as fast and performant as possible.
WP Rig provide us best practices like:
- fully styled theme built for performance and maintainability
- optimizing code using custom build process
- Checks that the code following the WordPress coding standards
- lazy-loading of images
- in-body style sheets – in the future
- conditional pre-loading of content
- code magnification
- uses CSS Grid and Flexbox for modern layouts
- full support for the new block editor – AKA Gutenberg
- full integration with the amp plugin
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 lazy-loading of images, 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 the new block editor, AKA Gutenberg, 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.
We should install some vscode extension to write better code and follow WordPress coding standards. This are:
- editor config ESLintPHP
- IntelliSense
- Phpcs
- Prettier
- Stylelint
You can find more info about the extensions and how to install them in the Wiki on the WP Rig GitHub repo.
Setting Up Theme
Run a local server with your favorite tool, I use Wamp.
clone the repo from github: https://github.com/wprig/wprig to the WordPress themes directory. Go to the WordPress admin panel and activate the starter theme. Now we can see the theme in action.
Open the editor VSCODE, install all the extensions that are described in the Wiki on the WP Rig, open the theme in the VSCODE directory panel.
Before starting the development there are some configurations we need to do first. All the configurations are in the config directory of the theme. There are 2 files that relevant to us: config.json and config.default.json. The default file is the default configuration and works as a fallback. All the custom configuration that we will make are in the config.json file.
The most basic configuration we are gonna make are adding the following json inside config.js and change the value of each key to our own theme information:
{
"theme": {
"slug": "newthemeslug",
"name": "New Theme Name",
"author": "Name of the theme author"
}
}
Now we have to install the dependencies. Open the terminal in VSCODE and go to the theme directory. If Node.js and Composer are not installed on your computer then run: “npm run rig-init” if they are already installed on your computer then run ”npm install”.
Now we can run the development process and build out the theme for the first time. In the terminal type “npm run dev” and the build process will start. After its finished, a new tab will open in our browser and we will see the website on port 8181. Now any changes we make to the theme inside VSCODE reflect right away on the website on port 8181. From here we can start coding our theme.
When we finish to create the theme we want we can export it and use it on our server on the internet. In the terminal type “npm run build”. The build will create the theme inside the wordpress themes folder next to wprig directory.