One of the great things about using Wordpress with Gatsby if you put the time and effort in to start with, almost everything you build (besides visual components) is re-usable. It's one of the main reasons we do so many Gatsby/Wordpress projects at Audal Labs - because we can create great results quickly, because a lot of the work has already been done before we start the project (via the the includes files in the boilerplate.

Before starting this guide, you should have most or all of your block components created, and your data modelling completed in ACF and CPT UI. This is the quickest way to get your data moving and your project finished.

Your existing gatsby-config.js

There are two plugins in our boilerplate's existing gatsby-config.js file that are disabled by default, but will need to be enabled for Wordpress builds. These are gatsby-plugin-yoast-sitemap and gatsby-source-wordpress. They are both commented out together, just remove the comment.

The wp-specific folder

The wp-specific folder contains everything you need to create a Wordpress build fast. It has templates that will be ready to use with some quick modification, a Wordpress-specific netlify.toml file, and a replacement gatsby-node.js file that will handle creation of templates and data for almost any Wordpress use case without modification.

Here's what you need to do with each file to get set up:

wp-specific/replacement-netlify.toml

This file replaces the existing netlify.toml file in your project's root directory.

Once you've moved it there, open the file up, and replace every something.wpengine.com with the url for your new Wordpress instance. Make sure to not include the http/https.

wp-specific/gatsby-node.js

This is a drop-in replacement for your existing gatsby-node.js file in the project's root directory. Simply delete that and drop this one in the project root instead. You'll need to run npm i gatsby-awesome-pagination after you're done.

wp-specific/wp-templates/*

The wp-templates folder is where you'll put your Wordpress page templates for Gatsby. Your new gatsby-node.js will look for it at /src/wp-templates, so move the directory there.

Once it's in there, open up the wp-templates folder and have a look through the pre-existing templates.

You'll see that templates are grouped into both content-node and term-node folders at the top level. This is what they cover:

• Content Nodes in Wordpress represent your actual post types. This could be posts, pages, and any custom post types you make using CPT UI or another plugin.
• Term Nodes in Wordpress are how taxonomies are put together - or more simply - how you link similar content. In Wordpress, both categories and tags are examples of term nodes - so if you want to provide a page template so that users can browse via category or tag, this is where you'd put them.

You'll also see there's a further breakdown of nodes, inside both the content-nodes folder and the term-nodes folder - dividing both folders into an archive type and a single type.

• Archive Types in Wordpress represent a list of posts by the post's type. Think of it as a term node, but where the category is the post type itself. Things like a blog index (the page where you can see all of the posts on a blog) - that would be an archive type.
• Single Types in Wordpress represent the singular version of a post's type. Whenever you have a single blog post, or a single page, or single something else - this is a single type, and should go in the single folder.

wp-specific/wp.scss

This is your final file in the wp-specific folder. It provides some default Sass styling for working with ACF's Rich Text Areas (also known in ACF as WYSIWYG editors). You should move this into the ./src/layouts folder, and import this into ./src/layouts/index.tsx.

This Sass stylesheet will apply the default styles for any component that contains the classname .wp-post-content. Therefore, wherever you have an ACF WYSIWYG editor, (or more likely, a blog post that needs styling), just add the wp-post-content class to the Chakra component that handles the dangerouslySetInnerHTML that ACF provides.

You will likely need to customise this stylesheet, but it provides a good starting point.

Writing your wp-template queries

Out of the box, you already have pre-written queries in all the file inside the wp-template folder.

Some of these will include a key on the GraphQL query called ACF. This is there as an example of how to query ACF Flexible Content fields inside Gatsby. However - as Flexible Content fields are indeed flexible - it won't be correct for your project. After having a look at how this part of the query works, you should remove the ACF field from your GraphQL queries in all of the templates, before replacing it with your own later on.