Here is a list I created in an attempt to gather all the helpful resources there are about how to work with Gatsby in combination with WordPress. Happy to add new resources, if someone has some awesome suggestions. Please feel free to contribute :)
henrikwirth / awesome-wordpress-gatsby
An awesome list of resources about WordPress as a headless CMS with Gatsby
A curated list of resources about WordPress as a headless CMS with Gatsby as a Static Site Generator (SSG)
A headless CMS is a back-end only content management system (CMS). Its purpose is to serve content and make it accessible via an API (e.g. REST or GraphQL).
A Static Site Generator (SSG) is a framework or setup, that helps you to generate static websites (HTML/CSS/JS). The source of your data can be anything from local files (e.g. text files or markdown) to APIs (e.g. REST, GraphQL).
Why Gatsby and WordPress?
WordPress is one of the most used CMS in the world and therefore many people already know how to work with it. The typical front-end approach with PHP-based templates is getting more and more problematic in an environment where performance is key. The approach to use WordPress as a headless CMS with normal API calls through JavaScript already exists, but…
The List
Date: 07.03.21
A headless CMS is a back-end only content management system (CMS). Its purpose is to serve content and make it accessible via an API (e.g. REST or GraphQL).
A Static Site Generator (SSG) is a framework or setup, that helps you to generate static websites (HTML/CSS/JS). The source of your data can be anything from local files (e.g. text files or markdown) to APIs (e.g. REST, GraphQL).
Why Gatsby and WordPress?
WordPress is one of the most used CMS in the world and therefore many people already know how to work with it. The typical front-end approach with PHP-based templates is getting more and more problematic in an environment where performance is key. The approach to use WordPress as a headless CMS with normal API calls through JavaScript already exists, but also has the downside of having to make requests to the server and rendering depending on the response. This adds time to load. Gatsby instead, pre-renders the whole site at compile time and therefore the user gets a fully prepared static site on their first request, making it one of the best approaches for performance. Another huge benefit is security, as your WordPress instance can be anywhere, even locally and you don't need to expose any of it to the user. The static Gatsby site therefore, is not hackable. Find further arguments for pros and cons in the resources below.
Contents
- Communities
- Articles and Talks
- Plugins
- Free Tutorials / Courses
- Paid Tutorials / Courses
- Starters
- Themes
Communities
If you need help with anything, there are some highly active communities.
WPGraphQL
Gatsby
Articles and Talks
List of articles and talks that elaborate on the technology stack in general.
- 2021.02: Announcing Gatsby’s New WordPress Integration
- 2021.02: Jason Bahl of WPGraphQL's role in the operating system for the web
- 2021.02: Torque News Drop: Jason Bahl and WPGraphQL
- 2021.02: Gatsby Launches New WordPress Integration, Expanding Support for Headless Architecture
- 2020.11: Announcing WPGraphQL v1.0
- 2020.07: My Long Journey to a Decoupled WordPress Gatsby Site
- 2019.06: Modern Web Development on the JAMstack - A report from Netlify about Modern Web Development on the JAMStack, published by O'REILLY.
Plugins
List of useful plugins to make WordPress and Gatsby work together. Ordered alphabetically.
WordPress
Essential Plugins
- WPGraphQL - Documentation - WPGraphQL brings the power of GraphQL to your WordPress site.
- WPGatsby - This plugin configures your WordPress site to be an optimized source for Gatsby.
WPGraphQL Extensions
- WPGraphQL Cors - This FREE plugin from @kidunot89 and @byfunkhaus claims to enable authentication with WPGraphQL to “just work” by allowing you to set CORS headers that GraphQL will accept, which means WordPress default auth cookies can be accepted.
- Total Counts for WPGraphQL - This FREE plugin from @builtbycactus exposes total counts to connections in the WPGraphQL Schema.
- WPGraphQL Gutenberg - Exposes Gutenberg blocks to the WPGraphQL API.
- WPGraphQL JWT Authentication - Extends the WPGraphQL plugin to provide authentication using JWT (JSON Web Tokens).
- WPGraphQL Lock - Enables query locking for WPGraphQL by implementing persisted GraphQL queries.
- WPGraphQL Meta - This FREE plugin from @robertorourke exposes meta registered via the WordPress register_meta API to WPGraphQL.
- WPGraphQL Meta Query - Adds Meta_Query support to the WPGraphQL Plugin for postObject query args.
- WPGraphQL Persisted Queries - This FREE plugin from @qz adds the ability to use Persisted Queries with WPGraphQL.
- WPGraphQL Offset Pagination - This FREE plugin from @enshrined adds basic offset pagination as opposed to the standard Cursor based pagination that ships with WPGraphQL.
- WPGraphQL Send Email - This FREE plugin from @Ash_Hitchcock allows you to send emails via a simple mutation. Includes the abilitty to restrict sending to trusted origins.
Extensions for that use other plugins with WPGraphQL
- QL Search - An extension that integrates SearchWP into WPGraphQL.
- WPGraphQL Content Blocks - This FREE plugin from the folks at QZ.com exposes a way to query HTML content from WordPress Posts and Pages as “Blocks” (not related to Gutenberg) to bring more structure to your queried content.
- WPGraphQL Enable All Post Types (DalkMania) - This FREE plugin from @DalkMania automatically adds ALL registered post types to the WPGraphQL Schema.
- WPGraphQL Enable All Post Types (TylerBarnes) - This FREE plugin from @tylbar automatically adds ALL registered post types to the WPGraphQL Schema.
- WPGraphQL Google Schema - This FREE plugin from @izzygld261 adds Google Schema support to WPGraphQL.
- WPGraphQL Gutenberg ACF - Exposes ACF blocks through GraphQL
- WPGraphQL MB (MetaBox) - This FREE plugin from @DalkMania adds all registered metaboxes using metabox.io to the WPGraphQL Schema.
- WPGraphQL MetaBox Relationships - This FREE plugin from @hsimah adds support for the metabox.io Relationships field to WPGraphQL (when also using his wp-graphql-metabox plugin).
- WPGraphQL Polls - This FREE plugin from @andrenosouza allows you to interact with data from the WP-Polls plugin via GraphQL Queries and Mutations.
- WPGraphQL Polylang Extension - Extends WPGraphQL schema with language data from the Polylang plugin.
- WPGraphQL Tax Query - Adds Tax_Query support to the WPGraphQL Plugin for postObject query args (WP_Query).
- WPGraphQL WPML - This FREE plugin from @rburgst extends the WPGraphQL schema with language data from the WPML plugin. In addition it turns off WPML default filters in order to be able to iterate over all posts regardless of language.
- WPGraphQL for Advanced Custom Fields - Exposes Advanced Custom Fields to the WPGraphQL Schema.
- WPGraphQL for BuddyPress - This FREE plugin from @RenatoNascAlves exposes BuddyPress data to WPGraphQL.
- WPGraphQL for Carbon Fields - This FREE plugin from @matepaiva exposes fields registered using Carbon Fields to the WPGraphQL Schema.
- WPGraphQL for Custom Post Type UI - This FREE plugin adds settings to Custom Post Type UI allowing you to set which Post Types and Taxonomies registered by CPTUI should display in the WPGraphQL Schema.
- WPGraphQL for FacetWP - This FREE plugin from @hsimah exposes filters on WPGraphQL queries to allow for faceted search with FacetWP.
- WPGraphQL for Gravity Forms - This FREE plugin from @kellenmace of @harness_up exposes @gravityforms data to WPGraphQL, allowing you to query for forms, fields, entries, and more.
- WPGraphQL for Metabox - This FREE plugin from @hsimah exposes fields registered using the popular http://MetaBox.io to the WPGraphQL Schema.
- WPGraphQL for Ninja Forms - This free plugin exposes forms created by the Ninja Forms plugin to the WPGraphQL Schema and allows for the forms to be submitted via GraphQL Mutations.
- WPGraphQL for Posts 2 Posts - This FREE plugin from @kellenmace of @harness_up automatically creates GraphQL connections for all of your Posts 2 Posts connections.
- WPGraphQL for SEOPress - This FREE plugin from @moon_meister exposes data managed by SEOPress to the WPGraphQL Schema, allowing for SEO data to be used in your headless applications.
- WPGraphQL for WooCommerce - This FREE plugin exposes WooCommerce data to WPGraphQL allowing you to interact with your store’s data via GraphQL Queries and mutations.
- WPGraphQl Yoast SEO Plugin - Exposes Yoast SEO data to the WPGraphQL Plugin.
Other helpful Plugins
- Advanced Custom Fields - ACF PRO
- Headless Mode - Headless mode sets up a redirect for all users trying to access the site. The only requests that are granted admission are ones that are either trying to access the REST API, the WP GraphQL API, or any logged-in user looking to access the headless install to edit or create posts.
- Polylang
- WP JAMstack Deployments - WordPress plugin for JAMstack deployments on Netlify (and other platforms).
Gatsby Plugins
Free Tutorials / Courses
Note: Since the release of gatsby-source-wordpress V4, it is the preferred over gatsby-source-graphql and therefore I will only list tutorials related to that approach.
Written Tutorials
- 2019.11: Guide to Gatsby WordPress Starter Advanced with Previews, i18n and more - A tutorial series starting with the basic setup of WordPress and Gatsby with WPGraphQL and then dives into more advanced subjects like deployments, previews, i18n and a page-builder like setup with ACF flexible cotent fields.
- 2019.08: Live Previews with WordPress and Gatsby - Tutorial showing how to use the theme’s higher order component to facilitate previews for WordPress posts and custom post types.
- 2019.08: Gatsby with WPGraphQL, ACF and Gatbsy-Image - A guide, that shows how to implement gatsby-image, so it can be used for WordPress media files.
- 2018.08: Headless WordPress + Gatsby + Netlify continuous deployment - Guide showing how to create a WordPress + Gatsby + Netlify setup in a few simple steps.
Video Tutorials
- 2019.11: 25+ Videos - Gatsby + WordPress (2019) Complete Course - The series focuses on how we can use WordPress as a headless CMS with a GraphQL schema to interface with. After setting up our WordPress site and theme, we'll move onto Gatsby and how we can use our new schema to generate content for our Gatsby site, programmatically generating pages, converting Gutenberg blocks to React components and finishing off the chapter with a focus on SEO in Gatsby.
- 2019.07: Gatsby + WordPress with WPGraphQL (with Jason Bahl) — Learn With Jason - In this stream, Jason Bahl teaches how to use WordPress with Advanced Custom Fields and WPGraphQL to create an powerful, flexible admin dashboard, then query and display that data in a Gatsby site.
- 2019.07: Crash Course: Headless WordPress with WPGraphQL, ACF, and React - In this video, Alex Young (WPCasts) goes over how to get a simple headless WordPress setup with WPGraphQL and React.
- 2019.06: Using WordPress with WPGraphQL - In this video you will learn how to use GraphQL with WordPress using an awesome plugin named WPGraphQL and some extra cool stuff like GraphQL + Advanced Custom Fields.
- 2019.04: WPGraphQL for ACF - Jason Bahl shows how to use WPGraphQL for Advanced Custom Fields.
- 2018.07: GraphQL with WordPress and Gutenberg - Jason Bahl - 2018 JavaScript for WordPress Conference - In this talk from the 2018 JavaScript for WordPress Conference, the Developer of the WP GraphQL Plugin, Jason Bahl, gives updated examples of how you can use GraphQL with WordPress and Gutenberg.
Paid Tutorials / Courses
List of paid courses.
- Please contribute known resources that use the current stack with newest versions.
Starters
List of project starters, that you can clone and start building upon.
- Gatsby Starter - WordPress Twenty Twenty - A port of the WordPress Twenty Twenty theme to Gatsby using the new gatsby-source-wordpress@v4.
- Gatsby + WPGraphQL Blog Example - Demo showing how to use WPGraphQL as the source for Gatsby Sites.
- Gatsby + Headless WordPress + Netlify Starter - A Gatsby + WordPress starter for continuous deployment to Netlify.
- Gatsby WordPress Starter Advanced - An advanced Gatsby + WordPress starter, that is built along a tutorial series and works with ACF flexible content fields to create content blocks/layouts.
- Gatsby Starter Blog - Blog starter with enough features to be production ready out of the box.
Themes
List of gatsby-themes that work with WordPress as a source, which you can use in your Gatsby setup.
- Twenty Nineteen Gatsby Theme - A port of the Twenty Nineteen WordPress Theme over to Gatsby.
- Gatsby WordPress Publisher Theme - The Gatsby Publisher Theme allows you to create a headless (or decoupled) WordPress site. This theme will display all of your pages and posts in a static front-end built on React and Gatsby.
Top comments (10)
Thank you for writing this bro. This was really helpful. i like this list alot. Thank you for supporting the WP-Community.
keep up the great work - it rocks
btw:- we look forward to see more support for the upcoming WordPress Version 5.9
with all the great features like
Full Site Editing (FSE)
Query Loop
Block-Theming
Gutenberg etc. etx.
Great things and enhancements ahead. The global WordPress-Community is waiting for this. And is curious about some news that cover all the good news. 🙂
Awesome list, I am trying out staticfuse now.
I'm a bit biased, but the headless mode WP plugin is a hit: wordpress.org/plugins/headless-mode/
Oh thats gold, why did I not know of this one already? Thanks a lot.
By the way: The future of WordPress with Gatsby is discussed here in the following issue on GitHub.
WordPress source V4 & Theme Epic #19292
Intro
This epic is to track a new major version of
gatsby-source-wordpress
which is currently being worked on. This will be a ground-up rewrite using WPGraphQL instead of the REST API in order to enable better caching, previews, incremental builds, and an overall better developer experience.How it will be done
The next major version of
gatsby-source-wordpress
is V4, and the release will coincide with the release of WPGraphQL V1. This project will inform some potential changes in WPGraphQL as a concrete example of a framework implementing many WordPress conventions and functionalities headlessly via WPGQL. There will also be aWPGatsby
WordPress plugin that will modify the WPGQL schema when changes are Gatsby-specific, as well as add support for incremental builds and preview on the WP side.Additionally, an opinionated theme,
gatsby-theme-wordpress
, will be built and it will compose a few new plugins together to implement many WordPress conventions and functionalities such as the template hierarchy, automatic routing (page creation using the WP permalink structure), ability to use the WP admin template selector, easy use of WP menus, and more.Philosophy
We want to enable you to do what you're already doing with WordPress and more.
The intention behind the theme is to reduce friction as much as possible both for WordPress developers coming to Gatsby and for anyone else that's interested in using WP and Gatsby together for a wonderful and familiar admin experience. We want to lower the barrier of entry and make it as easy as possible for everyone to use Gatsby and React with WordPress. As a very large portion of the web is built on WordPress, our hope is that this will empower many more people to build React apps/sites and push the WordPress community and the internet as a whole forward.
The intention behind the source plugin is to create a scalable, cacheable integration with WordPress. It will support Gatsby cloud Preview and incremental builds and will generally be more efficient than current solutions and will have an improved DX.
Responsibilities
I will be leading the new source plugin and theme, and @jasonbahl will of course be leading WPGraphQL V1. The two of us will be leading the
WPGatsby
plugin together.Github Project Links
Initial scope
This will likely change as things progress, but for now:
[ ]
gatsby-source-wordpress@v4
[ ]
WPGatsby
[ ]
gatsby-theme-wordpress
gatsby-wordpress-permalink-structure
path
of each page or postgatsby-wordpress-template-hierarchy
gatsby-wordpress-template-sync
gatsby-wordpress-menus
Not in scope now but may be implemented in the future
Looking forward to WPGatsby :)
Great ressources. I'll link that to our blog on France Web Design
This list just got updated with some new content. Let me know if you have any other resources you want to share through this list about the stack.
hello,gatsby awesome.gatsbyawesome.com/
So much awesomeness about Gatsby. Looks good :)
I work a lot right now with WordPress and Gatsby and therefore I tried to focus on resources, that are helpful for this combination.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.