DEV Community

Cover image for An awesome list of WordPress-Gatsby resources.
NeverNull profile image Henrik Wirth
Henrik Wirth for NeverNull

Posted on • Edited on • Originally published at github.com

An awesome list of WordPress-Gatsby resources.

#gatsby #wordpress #list #resources

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 :)

GitHub logo henrikwirth / awesome-wordpress-gatsby

An awesome list of resources about WordPress as a headless CMS with Gatsby






WordPress 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…

View on GitHub

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

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.

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

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

Video Tutorials

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.

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)

Collapse
 
digital_hub profile image
hub •

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. 🙂

Collapse
 
laxmariappan profile image
Lax Mariappan •

Awesome list, I am trying out staticfuse now.

Collapse
 
benunc profile image
Ben Meredith •

I'm a bit biased, but the headless mode WP plugin is a hit: wordpress.org/plugins/headless-mode/

Collapse
 
henrikwirth profile image
Henrik Wirth •

Oh thats gold, why did I not know of this one already? Thanks a lot.

Collapse
 
henrikwirth profile image
Henrik Wirth •

By the way: The future of WordPress with Gatsby is discussed here in the following issue on GitHub.

WordPress source V4 & Theme Epic #19292

TylerBarnes avatar
TylerBarnes commented on Nov 06, 2019

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 a WPGatsby 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

    • [ ] Incremental builds support and aggressive cacheing
    • [ ] Preview support
    • [ ] GraphQL introspection and full data download
      • [ ] Fetch any types that are lists of nodes
      • [ ] Fetch specific types that are not lists of nodes (such as options)
    • [ ] Use schema customization to add types from WPGQL to Gatsby via introspection
    • [ ] Recursively process schema
      • [ ] Connections of the same type as one of our Gatsby nodes should be linked to Gatsby nodes instead of pulling queried data from WPGQL connections
      • [ ] Process lists of multiple types
    • [ ] Media items
      • [ ] Fetch all media posts
      • [ ] Fetch media files only when they’re queried for
      • [ ] Download and process all media files in html
    • [ ] Add request rate limiting controls
      • [ ] Make some importable defaults for “shared”, “vps”, “dedicated”, and “local”?

  • [ ] WPGatsby

    • [ ] Action monitor post type
      • [ ] a post is created for every content-related action performed in wp
      • [ ] recent actions are exposed to the WPGQL schema for cache invalidation and pulling new content in Gatsby

  • [ ] gatsby-theme-wordpress

    • [ ] gatsby-wordpress-permalink-structure
      • [ ] Get entire WordPress site structure and build pages using the path of each page or post
      • [ ] This needs to play nice with template sync and hierarchy
    • [ ] gatsby-wordpress-template-hierarchy
      • [ ] Needs to play nice with themes and shadowing gatsbyjs.org/blog/2018-11-11-intro... ← this is how it will
      • [ ] Replicate wphierarchy.com/ using folders instead of dashes for organization. For ex “archive-post.php” would become “templates/archive/post.js”
      • [ ] Only replicate a subset of the hierarchy for now (maybe parity later if needed?)
      • [ ] Fork github.com/pressupinc/wphierarchy and make it into a gatsby theme for documentation purposes
    • [ ] gatsby-wordpress-template-sync
      • [ ] Makes gql mutations sending available templates back to WP
      • [ ] Need to think about how this will work with multiple frontends (staging, production, local, etc)
    • [ ] gatsby-wordpress-menus

Not in scope now but may be implemented in the future

  • Bridge plugins
    • Yoast
    • Gravity forms
  • Ecommerce support
  • Multi-language support
View on GitHub
Collapse
 
laxmariappan profile image
Lax Mariappan •

Looking forward to WPGatsby :)

Collapse
 
hwd28503760 profile image
hwd •

Great ressources. I'll link that to our blog on France Web Design

Collapse
 
henrikwirth profile image
Henrik Wirth •

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.

Collapse
 
misucai profile image
misucai •

hello,gatsby awesome.gatsbyawesome.com/

Collapse
 
henrikwirth profile image
Henrik Wirth •

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.

Read next

anand_jaisy_2f7644a12001b profile image

OpenAPI + Swagger UI with Micronaut Application

anand jaisy -

vinodatwal profile image

Annotations: Java's Hidden Weapons ⚔️

VINOD ATWAL -

sumit_rajak_4b33e1b609150 profile image

सिनेमैटिक स्क्रिप्ट: अर्जुन का संकल्प थीम: "कर्तव्य और भक्ति की समझ" अवधि: ~200 शब्द --- [दृश्य 1: कुरुक्षेत्र का मैदान - सूर्योदय] (स्क्रीन पर एक विशाल युद्धभूमि दिखाई देती है। दोनों सेनाएँ तैयार हैं। अर्जुन अपने सुनहरे रथ पर खड़ा है, हाथ में धनुष है।

Sumit Rajak -

thesohailjafri profile image

Do check these tips for SEO Boost

Sohail SJ | chakraframer.com -