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

Using REST API

Using WPGraphQL

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

Themes

Other Resources

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