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.
- 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.
- 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)
- 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 rungatsby clean
and thengatsby 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.
- I ran into issues with unknown types, e.g.
WPGraphQL_Page
.
- I ran into issues with unknown types, e.g.
- 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
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