Build, activate, and test your new theme

Now that both WP Rig and the Editor are configured and ready to go, we can run the development process and build out the theme for the first time.

The starter theme that ships in WP Rig isn’t a full-fledged theme yet. It doesn’t actually work inside WordPress. For that theme to work, it needs to be built out by the development process so that we get all the files optimized and everything strings together properly.

Before spinning everything up, make sure your local WordPress environment is up and running properly by checking it in the browser. Go to the URL for the site, reload it, maybe navigate around a little bit just to make sure things are working.

Looks like it’s working properly. All right, that means we are ready to go. Developing a theme in WP Rig requires the development process to run in the background, so the theme can be generated, and anytime you make a change the code is updated to reflect that change. All this is done in the terminal, automatically.

To generate the starter theme and start my development process, all I need to do is type in npm run dev. Now watch what happens. The build process spins up and goes through a bunch of different tasks to clean the CSS, and clean the JavaScript, and check the PHP, and compress images, and run scripts and everything else. It all gets merged together.

We jump over to the browser, and now Browsersync spins up a new version of our site. You can see the URL to this Browsersync instance is different from the local one. So here I have my local install, WPRig.local, and here I have the Browsersync version, which is not currently logged in. So we don’t have the WordPress tool bar at the top, but what’s cool is now if I go and make changes in the code, in WP Rig, and save those changes, they automatically take place in the browser right away. And that’s not all. If I go to my terminal, you’ll see down here at the bottom, it says Access URLs. And here we have access URLs for the local computer, so localhost:8181. And external, so that would be if someone is on the network and went to log in, and we also have access to the UI for Browsersync itself. So that means I can now take this URL here, and open it in a different browser, let’s see, maybe we’ll open it in Chrome as well… So I’ll paste it in, open it in Chrome, and watch what happens now. If I scroll in Chrome, you can see it also scrolls over in Firefox and if I had a cell phone or tablet, or anything else, and I logged in to that external URL and started scrolling on the cell phone or tablet, it would see all of these instances scroll at the same time. That’s why it’s called Browsersync, it quite literally syncs your browser, not only to your dev environment but also all the browser instances to each other, so you can do multi browser and multi device testing all at the same time, which is really really useful.

But we’re not quite done yet. Now that the theme is up and running, I need to go into the logged in version of my site, go to the backend and go to themes. And here, you’ll find our theme. It’s called WP Rig, and even though it changed the configuration files, it’ll stay named as WP Rig all the way until you’re done and you build the theme out. But that’s for later. For now, we’ll activate the theme, jump back to the front end… And here you see WP Rig up and running on my site. It’s working the way it’s supposed to, it has all the default styles for the theme and we can now start working.

More from this course: