Repository files navigation

I spent a lot(!) of time getting WordPress and Gatsby working together and then Gatsby improved the integration withgatsby-source-wordpress-experimental. At the time I wrote this article there wasn't a guide I found sufficient on implementing the new methodology - so here we are.

This tutorial walks you through the basic process of setting up WP and Gatsby and then pulling (post/page) data from WP into Gatsby. Unfortunately, at this time it doesn't include anything beyond this - e.g. adding menus from WP.

1. Use an existing WordPress site or setup a new site.
2. Download, install, and activate theWPGraphQL plugin from GitHub.
3. Download, install, and activate theWP-Gatsby plugin from GitHub.

Forstep-by-step instructions on setting up a Gatsby environment, I use VS Code to accomplish this quickly.

You'll now need to installgatsby-source-wordpress-experimental into your Gatsby instance so that Gatsby can use data coming from your WordPress site.

1. Runnpm install gatsby-source-wordpress-experimental
2. Opengatsby-config.js and provide a configuration for the plugin within theplugins: [] section:

{  resolve: `gatsby-source-wordpress-experimental`,  options: {    url: `https://gatsby.wpdeveloping.com/graphql`,  },},

Lets test to make sure everything is working correctly.

1. Rungatsby develop.
2. Wait for Gatsby to spin up.
3. Visithttp://localhost:8000 to see the Gatsby site.
4. Visithttp://localhost:8000/__graphql to use GraphiQL, an IDE for writing GraphQL queries.
5. Run a test to ensure that your local Gatsby instance can successfully pull data from WPGraphQL.

• You can use thisquery for pulling Pages and this onefor pulling Posts

1. Create atemplates folder inside of thesrc folder in your local Gatsby instance.
2. Add a template fileblog-post.js.

We can programmatically have Gatsby create a page for each blog post pulled from WordPress. This is configured ingatsby-node.js

Pages are stored in thesrc/pages folder, we'll be editingindex.js.

You can publish your site by runninggatsby build and then copying the contents of the resulting public folder onto your host. This is super simple (and free) to do withSurge orNetlify, I'd recommend using one of them.

Most of what I write here (at least the good stuff) isn't my own, so check out thepartial bibliography for credits / additional resources.