WordPress Gatsby

Introduction

I’ve been spending some time with Gatsby recently, attempting to integrate a WP back-end with Gatsby as the front-end. It has been a much more complicated journey than I’d like. I’ll share what I’ve learned and the resources I’ve found here.

Helpful Hints

• Use yarn instead of npm for package management with Gatsby. Otherwise every time you have to blow away a Gatsby install and then create a fresh one will take FOREVER. Yarn caches its packages making the process pretty quick (still not lightning).
• Be careful not to mix tutorials using the two different data sources for WP (REST, GraphQL) together accidentally.

Articles

• Jeff Matson. Dynamic Comments with Gatsby and WordPress. northstack, 9/2019.

Using REST API

• Maedah Batool. Blazing Fast WordPress Sites with Gatsby. scotch.io, 7/2019.
• Shaumik Daityari. Intro to Building Websites with Gatsby and WordPress (Fast and Static). kinsta, 2020.
  • Of the tutorials I’ve found this was the most WordPress-ish, thus providing a lesser learning curve, imho.
• Tim Smith. How to Build a Blog with WordPress and Gatsby.js Series. 2019.
  • This is the best tutorial I’ve found thus far…The series is also available on Gatsby’s blog.
  • Part 1.
  • Part 2.
  • Part 3.
• Sourcing from WordPress (official Gatsby documentation)
  • Uses the Gatsby plugin gatsby-source-wordpress to pull data from a WP REST API. Unfortunately, the instructions are incomplete, and Gatsby will fail to develop/build/serve the site.
• Getting Started with Gatsby and WordPress (official Gatsby blog)
  • The documentation referenced above is based on this blog article. This article does a better job than above but as the author mentions at the end, isn’t meant as a tutorial but more of a high-level walkthrough.
• Peter Tasker. Headless WordPress: Why Gatsby Should Be Next on Your List of Things to Learn. spinupwp, 2019.
  • For beginners.

Using WPGraphQL

• Justin W. Hall. Live Previews with WordPress and Gatsby. 2020.
• Scott Bolinger. How to Build Headless WordPress Sites with Gatsby. static fuse, 10/2019.
  • Covers how to use Static Fuse’s Publisher theme.
• Jason Lengstorf. Migrate Your WordPress Site to the Jamstack. netlify, 3/2020.
  • Covers creating templates, shared layouts, adding basic styling, programmatically creating pages/posts, supporting Gutenberg, adding navigation (menus), publishing to Netlify.
• Henrik Wirth. Guide to Gatsby WordPress Starter Advanced with Previews, i18n, and More. dev.to, 12/2019.
  • Part 1: Overview.
  • Part 2: Basic WordPress and Gatsby Setup.
  • Part 3: Setup Menu Navigation.
  • Part 4: Deployment.
  • Part 5: Pagination.
  • Part 6: Handling Images (gatsby-image).
  • Part 7: PageBuilder with ACF Flexible Content.
• Muhammad Muhsin. Porting the Twenty Nineteen WordPress Theme to Gatsby. JavaScript for WP, 2019.
  • A good tutorial, but relies on the repo for some portions of code so you’ll need to switch back and forth between article and repo.

Videos

• Watch and Learn Gatsby.js + WordPress Series.
  • Part 1: Getting Posts and Pages.
  • Part 2: Listing Posts.
  • Part 3: Creating Menus.
  • Part 4: Pagination.
  • Part 5: Advanced Custom Fields.
  • Part 6: Displaying Images.
  • Part 7: Deploying and Fixing Errors.
• Headless WordPress with Gatsby JS. JavaScript for WP ($79).
• Gatsby JS: Build Static Sites with React WordPress & GraphQL. Udemy ($20).
• Gatsby with WordPress as a Headless CMS. Udemy ($60).
• Jack Pritchard. Gatsby & WordPress. 2019.
  • Part 1: Course Overview
  • Part 2: Getting Started with WordPress
    • Covers Plugins, Bedrock and Composer, WPGraphQL, Theme Development, ACF and GraphQL, ACF Gutenberg Block Development, and Yoast SEO and WPGraphQL.
  • Part 3: Getting Started with Gatsby
    • Part 3.2: WordPress as a Data Source for Gatsby
    • Part 3.3: Querying in a Page
    • Part 3.4: Programmatically Creating Pages and Posts
    • Part 3.4.5: Render HTML Strings as Elements
    • Part 3.5: Block to Component Parsing
    • Part 3.6: Styled Components
    • Part 3.7: Using WordPress Menus
    • Part 3.8: Correcting the Homepage Slug
    • Part 3.9: Generating SEO Tags
  • Part 4: Deploying to Netlify
    • Covers deploying to Netlify with a Webhook, Netlify Forms.
  • Part 5.1: WPGraphQL IsFrontPage
  • Part 5.2: Gatsby Node.Js Structures
  • Part 5.3: Increasing WPGraphQL Query Limit
  • Part 5.4: Creating a Custom Data Source Gatsby Plugin
  • Part 5.5: Registering Custom Taxonomies in WPGraphQL
  • Part 5.6: Building Taxonomy Pages in Gatsby with WPGraphQL

Plugins

• WPGraphQL Plugin
• WPGraphiQL Plugin
• JAMstack Deployments – Triggers a build of Gatsby on WP changes.
• WPGraphQL for Custom Post Type UI – Adds settings to CPT UI plugin to show Post Types in WPGraphQL Schema.
• WPGraphQL for Gutenberg
• WPGraphQL for Advanced Custom Fields – Exposes ACF fields to WPGraphQL Schema.
• WPGraphQL for Gutenberg ACF Blocks – Exposes ACF Gutenberg blocks.
• WPGraphQL JWT Authentication Plug
• WPGraphQL Yoast SEO Plugin.
• WPGraphQL Meta Query Plugin.
• WPGraphQL Taxonomy Query Plugin.
• WPGraphQL BuddyPress Plugin.
• WPGraphQL WooCommerce Plugin.
• Insights and Logging for WPGraphQL Plugin.
• WPGraphQL Lock Plugin
• Headless Mode Plugin

Themes

• Twenty Nineteen WordPress Theme Port (Zac Gordon)
  • See Muhammad Muhsin’s article.
  • Front page loads fine, trying to click on Blog or Continue Reading yields blank page.
• WordPress Twenty Nineeten Theme Recreation (Northstack)
  • See Jeff Matson’s article.
• Create Gatsby Theme Publisher (Scott Bolinger)
  • See Scott’s article.
  • Throws an error if you don’t have any tags.
• Gatsby WordPress Theme Libre (Armada)
  • SEO optimized, fully responsive.
• WP Gatsby Starter Theme (Calvin Koepke)
  • Supports Local Images, Gutenberg, Post and Page Generation. Includes a paired WP theme.
  • You’ll likely receive a RootQuery.blocksBy defined in resolvers, but not in schema error. I thought going into the WP install and running Update under GraphQL Gutenberg might fix this, but it did not initially. I had to run gatsby clean and then gatsby develop again and then it worked.
• Tabor Gatsby Theme Port (Zac Gordon)
• Gatsby WordPress Starter Theme (Pulsar Media)
  • Meant to accompany the Gatsby WordPress Starter Project.
• Gatsby + WPGraphQL Blog Example (Jason Bahl)
  • Supports menus, pages, single posts, authors, categories, tags.
  • You’ll probably need to change the name of the menu in src\components\SiteHeader\index.js. By default it is PRIMARY, some WP themes use MENU_1 etc.
  • You may also need to change the size of the logo, this can be done in src\components\SiteHeader\index.js.
  • The generated menu doesn’t seem to work correctly. Clicking on a menu link leads to a 404 with the URL looking like: http://localhost:8000/http:/yoursite.com
• Gatsby WordPress Starter Advanced.
  • See Henrik Wirth’s article series.
  • I ran into issues with unknown types, e.g. WPGraphQL_Page.
• Using WordPress Example from Official Gatsby Repository.
  • Spins up quickly but displays html/css markup, not formatted text.
• Gatsby Apollo WPGraphQL JWT Starter.

Other Resources

• Awesome WordPress Gatsby

People Who Know About WP and Gatsby

• Jason Bahl – Author of the WPGraphQL plugin, the most popular way to integrate WP with Gatsby using GraphQL.
• Jack Pritchard – Author of a fairly thorough video series on WP and Gatsby including some more advanced functionality.
• Tim Smith – Author of an extended tutorial series on WP and Gatsby.
• Scott Bolinger – Creator of the Gatsby Theme Publisher.
• Ashley Hitchcock – Author of WPGraphQL Yoast SEO plugin.
• Peter Pristas – Author of WP-GraphQL-Gutenberg, WP-GraphQL-Gutenberg-ACF, etc.
• Henrik Wirth – Maintainer of the Awesome WordPress Gatsby list, author of several tutorials on the subject.
• Tyler Barnes
• Zac Gordon