Updating a Large WordPress Site to Gatsby Frontend, Part II: Staging Setup

September 10, 2021

Now that a rough plan is in place, it’s time to set up staging. For the purposes of this project, there was one staging environment for WordPress to live on. The rest of the development (frontend) would happen locally on my own machine.

Cloning to Staging

First, I cloned the WordPress website from production to staging. There are many ways to accomplish this. There is plugin, Duplicator, which can help make this process very easy. Or an rsync or scp command could be used in tandem with a mysqldump and restore.

For the sake of brevity here, I’ll skip the granular details of how to copy a WordPress website to a new location. I’d rather focus on the higher-level concepts to follow instead.

Once cloned to a staging location, I followed the following steps:

  • Ensure robots.txt is blocking and search engines are discouraged
  • Remove all unnecessary plugins
  • Remove all unnecessary themes

Then, add new plugins to the destination installation to support Gatsby and GraphQL:

The active theme from the production site included code to register numerous custom post types and custom fields with Advanced Custom Fields. This code needed to be kept in the new backend theme, because there was lots of content depending on it.

Aside from the necessary ACF registration code, however, the bulk of the theme’s code and functions could be purged.

Normally a WordPress theme is just that: a theme traversing both the frontend and the backend – but for pairing WordPress with Gatsby, I only really cared about the backend on this one. This meant I could lose all the CSS and JavaScript, and many shortcodes.

Tracking Theme Changes

Next, I set up a new repository in GitHub for the new backend theme, and committed the first round of code (the heavily-trimmed-back theme from the original website).

From here on out, there wasn’t too much development needed on the backend of things. Once I had the custom post types, ACF fields, and basic menu support in place, I didn’t need to fiddle much within the WordPress theme. The bulk of the remaining work needed to be done on the frontend.

Next up: Syncability

In the next article, I’ll review the challenges I encountered as well as the steps taken to keep the new WordPress installation up-to-date with the content on the production website. This development project was going to span the course of several weeks, and our marketing and SEO teams aren’t going to be holding off on their work to wait for me to finish this new website version – I had to be able to port in any changes and updates that went live, quickly.

Leave a comment. Let's discuss!

MichaelWritten by Michael - His career path has allowed him to incorporate his creative eye with a love of programming, analytical thinking, and learning. Michael has been married to his lovely wife Yohana since 2012. They have four wonderful children, two St. Bernard dogs, and a chinchilla. Follow @missionmikedev on Twitter