awesome-awesomeness/html/wordpressgatsby.md2.html

<div data-align="center">
<br /><br />
<a href="https://awesome.re"><img src="https://awesome.re/badge-flat.svg" /></a>
<br /><br /><br />
<a href="https://wordpress.org/"><img width="150" height="150" align="center" src="media/wordpress-logo.svg" alt="WordPress"></a>
<a href="https://www.gatsbyjs.org/"><img width="150" height="150" align="center" src="media/gatsby-logo.svg" alt="Gatsby"></a>
<br /><br />
<p>
<b> A curated list of resources about WordPress as a headless CMS with
Gatsby as a Static Site Generator (SSG). </b>
</p>
<p><br /></p>
</div>
<p>A <strong>headless CMS</strong> 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).</p>
<p>A <strong>Static Site Generator (SSG)</strong> 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).</p>
<p><br /></p>
<p><strong>Why Gatsby and WordPress?</strong></p>
<p>WordPress is one of the <strong>most used CMS in the world</strong>
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. <strong>Gatsby instead, pre-renders the whole site at compile
time</strong> and therefore the user gets a <strong>fully prepared
static site on their first request</strong>, making it one of the
<strong>best approaches for performance</strong>. Another huge benefit
is <strong>security</strong>, as your WordPress instance can be
anywhere, even locally and you don’t need to expose any of it to the
user. <strong>The static Gatsby site therefore, is not
hackable.</strong> Find further arguments for pros and cons in the
resources below.</p>
<h2 id="contents">Contents</h2>
<!-- TOC -->
<ul>
<li><a href="#communities">Communities</a></li>
<li><a href="#articles-and-talks">Articles and Talks</a></li>
<li><a href="#plugins">Plugins</a>
<ul>
<li><a href="#wordpress">WordPress</a></li>
<li><a href="#gatsby">Gatsby</a></li>
</ul></li>
<li><a href="#free-tutorials--courses">Free Tutorials / Courses</a>
<ul>
<li><a href="#written-tutorials">Written Tutorials</a></li>
<li><a href="#video-tutorials">Video Tutorials</a></li>
</ul></li>
<li><a href="#paid-tutorials--courses">Paid Tutorials / Courses</a></li>
<li><a href="#starters">Starters</a></li>
<li><a href="#themes">Themes</a> <!-- /TOC --></li>
</ul>
<h2 id="communities">Communities</h2>
<p>If you need help with anything, there are some highly active
communities.</p>
<p><strong>WPGraphQL</strong> - <a
href="https://wpgql-slack.herokuapp.com/">Slack Chat</a> - <a
href="https://spectrum.chat/wpgraphql">Spectrum Chat</a> - <a
href="https://twitter.com/wpgraphql">Twitter</a></p>
<p><strong>Gatsby</strong> - <a
href="https://gatsby.dev/discord">Discord Chat</a> - <a
href="https://www.reddit.com/r/gatsbyjs/">Reddit</a> - <a
href="https://stackoverflow.com/questions/tagged/gatsby">Stack
Overflow</a></p>
<h2 id="articles-and-talks">Articles and Talks</h2>
<p>List of articles and talks that elaborate on the technology stack in
general.</p>
<ul>
<li>2021.02: <a
href="https://www.gatsbyjs.com/blog/wordpress-integration">Announcing
Gatsby’s New WordPress Integration</a></li>
<li>2021.02: <a href="https://www.youtube.com/watch?v=Me_A0HBYXx8">Jason
Bahl of WPGraphQL’s role in the operating system for the web</a></li>
<li>2021.02: <a
href="https://www.youtube.com/watch?v=8SAdtU8HAwM">Torque News Drop:
Jason Bahl and WPGraphQL</a></li>
<li>2021.02: <a
href="https://wptavern.com/gatsby-launches-new-wordpress-integration-expanding-support-for-headless-architecture">Gatsby
Launches New WordPress Integration, Expanding Support for Headless
Architecture</a></li>
<li>2020.11: <a
href="https://www.wpgraphql.com/2020/11/16/announcing-wpgraphql-v1/">Announcing
WPGraphQL v1.0</a></li>
<li>2020.07: <a
href="https://css-tricks.com/my-long-journey-to-a-decoupled-wordpress-gatsby-site/">My
Long Journey to a Decoupled WordPress Gatsby Site</a></li>
<li>2019.06: <a href="https://www.netlify.com/oreilly-jamstack/">Modern
Web Development on the JAMstack</a> - A report from Netlify about Modern
Web Development on the JAMStack, published by O’REILLY.</li>
</ul>
<h2 id="plugins">Plugins</h2>
<p>List of useful plugins to make WordPress and Gatsby work together.
Ordered alphabetically.</p>
<h3 id="wordpress">WordPress</h3>
<h4 id="essential-plugins">Essential Plugins</h4>
<ul>
<li><a href="https://github.com/wp-graphql/wp-graphql">WPGraphQL</a> -
<a href="https://docs.wpgraphql.com/">Documentation</a> - WPGraphQL
brings the power of GraphQL to your WordPress site.</li>
<li><a href="https://wordpress.org/plugins/wp-gatsby/">WPGatsby</a> -
This plugin configures your WordPress site to be an optimized source for
Gatsby.</li>
</ul>
<h4 id="wpgraphql-extensions">WPGraphQL Extensions</h4>
<ul>
<li><a href="https://github.com/funkhaus/wp-graphql-cors">WPGraphQL
Cors</a> - This FREE plugin from <span class="citation"
data-cites="kidunot89">@kidunot89</span> and <span class="citation"
data-cites="byfunkhaus">@byfunkhaus</span> 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.</li>
<li><a
href="https://github.com/builtbycactus/total-counts-for-wp-graphql">Total
Counts for WPGraphQL</a> - This FREE plugin from <span class="citation"
data-cites="builtbycactus">@builtbycactus</span> exposes total counts to
connections in the WPGraphQL Schema.</li>
<li><a
href="https://github.com/pristas-peter/wp-graphql-gutenberg">WPGraphQL
Gutenberg</a> - Exposes Gutenberg blocks to the WPGraphQL API.</li>
<li><a
href="https://github.com/wp-graphql/wp-graphql-jwt-authentication">WPGraphQL
JWT Authentication</a> - Extends the WPGraphQL plugin to provide
authentication using JWT (JSON Web Tokens).</li>
<li><a href="https://github.com/valu-digital/wp-graphql-lock">WPGraphQL
Lock</a> - Enables query locking for WPGraphQL by implementing persisted
GraphQL queries.</li>
<li><a href="https://github.com/roborourke/wp-graphql-meta">WPGraphQL
Meta</a> - This FREE plugin from <span class="citation"
data-cites="robertorourke">@robertorourke</span> exposes meta registered
via the WordPress register_meta API to WPGraphQL.</li>
<li><a
href="https://github.com/wp-graphql/wp-graphql-meta-query">WPGraphQL
Meta Query</a> - Adds Meta_Query support to the WPGraphQL Plugin for
postObject query args.</li>
<li><a
href="https://github.com/Quartz/wp-graphql-persisted-queries">WPGraphQL
Persisted Queries</a> - This FREE plugin from <span class="citation"
data-cites="qz">@qz</span> adds the ability to use Persisted Queries
with WPGraphQL.</li>
<li><a
href="https://github.com/darylldoyle/wp-graphql-offset-pagination">WPGraphQL
Offset Pagination</a> - This FREE plugin from <span class="citation"
data-cites="enshrined">@enshrined</span> adds basic offset pagination as
opposed to the standard Cursor based pagination that ships with
WPGraphQL.</li>
<li><a href="https://github.com/ashhitch/wp-graphql-send-mail">WPGraphQL
Send Email</a> - This FREE plugin from <span class="citation"
data-cites="Ash_Hitchcock">@Ash_Hitchcock</span> allows you to send
emails via a simple mutation. Includes the abilitty to restrict sending
to trusted origins.</li>
</ul>
<hr />
<p><strong>Extensions for that use other plugins with
WPGraphQL</strong></p>
<ul>
<li><a href="https://github.com/funkhaus/ql-search">QL Search</a> - An
extension that integrates SearchWP into WPGraphQL.</li>
<li><a
href="https://github.com/Quartz/wp-graphql-content-blocks">WPGraphQL
Content Blocks</a> - 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.</li>
<li><a href="https://github.com/DalkMania/wp-graphql-cpt">WPGraphQL
Enable All Post Types (DalkMania)</a> - This FREE plugin from <span
class="citation" data-cites="DalkMania">@DalkMania</span> automatically
adds ALL registered post types to the WPGraphQL Schema.</li>
<li><a
href="https://github.com/TylerBarnes/wp-graphql-enable-all-post-types">WPGraphQL
Enable All Post Types (TylerBarnes)</a> - This FREE plugin from <span
class="citation" data-cites="tylbar">@tylbar</span> automatically adds
ALL registered post types to the WPGraphQL Schema.</li>
<li><a
href="https://github.com/izzygld/wp-graphql-google-schema">WPGraphQL
Google Schema</a> - This FREE plugin from <span class="citation"
data-cites="izzygld261">@izzygld261</span> adds Google Schema support to
WPGraphQL.</li>
<li><a
href="https://github.com/pristas-peter/wp-graphql-gutenberg-acf">WPGraphQL
Gutenberg ACF</a> - Exposes ACF blocks through GraphQL</li>
<li><a href="https://github.com/DalkMania/wp-graphql-mb">WPGraphQL MB
(MetaBox)</a> - This FREE plugin from <span class="citation"
data-cites="DalkMania">@DalkMania</span> adds all registered metaboxes
using <a href="https://metabox.io/">metabox.io</a> to the WPGraphQL
Schema.</li>
<li><a
href="https://github.com/hsimah-services/wp-graphql-mb-relationships">WPGraphQL
MetaBox Relationships</a> - This FREE plugin from <span class="citation"
data-cites="hsimah">@hsimah</span> adds support for the <a
href="https://metabox.io/">metabox.io</a> Relationships field to
WPGraphQL (when also using his wp-graphql-metabox plugin).</li>
<li><a href="https://github.com/andrenoberto/wp-graphql-polls">WPGraphQL
Polls</a> - This FREE plugin from <span class="citation"
data-cites="andrenosouza">@andrenosouza</span> allows you to interact
with data from the WP-Polls plugin via GraphQL Queries and
Mutations.</li>
<li><a
href="https://github.com/valu-digital/wp-graphql-polylang">WPGraphQL
Polylang Extension</a> - Extends WPGraphQL schema with language data
from the Polylang plugin.</li>
<li><a
href="https://github.com/wp-graphql/wp-graphql-tax-query">WPGraphQL Tax
Query</a> - Adds Tax_Query support to the WPGraphQL Plugin for
postObject query args (WP_Query).</li>
<li><a href="https://github.com/rburgst/wp-graphql-wpml">WPGraphQL
WPML</a> - This FREE plugin from <span class="citation"
data-cites="rburgst">@rburgst</span> 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.</li>
<li><a href="https://github.com/wp-graphql/wp-graphql-acf">WPGraphQL for
Advanced Custom Fields</a> - Exposes Advanced Custom Fields to the
WPGraphQL Schema.</li>
<li><a
href="https://github.com/wp-graphql/wp-graphql-buddypress">WPGraphQL for
BuddyPress</a> - This FREE plugin from <span class="citation"
data-cites="RenatoNascAlves">@RenatoNascAlves</span> exposes BuddyPress
data to WPGraphQL.</li>
<li><a href="https://github.com/matepaiva/wp-graphql-crb">WPGraphQL for
Carbon Fields</a> - This FREE plugin from <span class="citation"
data-cites="matepaiva">@matepaiva</span> exposes fields registered using
Carbon Fields to the WPGraphQL Schema.</li>
<li><a
href="https://github.com/wp-graphql/wp-graphql-custom-post-type-ui">WPGraphQL
for Custom Post Type UI</a> - 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.</li>
<li><a
href="https://github.com/hsimah-services/wp-graphql-facetwp">WPGraphQL
for FacetWP</a> - This FREE plugin from <span class="citation"
data-cites="hsimah">@hsimah</span> exposes filters on WPGraphQL queries
to allow for faceted search with FacetWP.</li>
<li><a
href="https://github.com/harness-software/wp-graphql-gravity-forms">WPGraphQL
for Gravity Forms</a> - This FREE plugin from <span class="citation"
data-cites="KellenMace">@KellenMace</span> of <span class="citation"
data-cites="harness_up">@harness_up</span> exposes <span
class="citation" data-cites="gravityforms">@gravityforms</span> data to
WPGraphQL, allowing you to query for forms, fields, entries, and
more.</li>
<li><a
href="https://github.com/hsimah-services/wp-graphql-metabox">WPGraphQL
for Metabox</a> - This FREE plugin from <span class="citation"
data-cites="hsimah">@hsimah</span> exposes fields registered using the
popular http://MetaBox.io to the WPGraphQL Schema.</li>
<li><a
href="https://github.com/toriphes/wp-graphql-ninja-forms">WPGraphQL for
Ninja Forms</a> - 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.</li>
<li><a
href="https://github.com/harness-software/wp-graphql-posts-to-posts">WPGraphQL
for Posts 2 Posts</a> - This FREE plugin from <span class="citation"
data-cites="KellenMace">@KellenMace</span> of <span class="citation"
data-cites="harness_up">@harness_up</span> automatically creates GraphQL
connections for all of your Posts 2 Posts connections.</li>
<li><a href="https://github.com/ashhitch/wp-graphql-yoast-seo">WPGraphQL
for SEOPress</a> - This FREE plugin from <span class="citation"
data-cites="moon_meister">@moon_meister</span> exposes data managed by
SEOPress to the WPGraphQL Schema, allowing for SEO data to be used in
your headless applications.</li>
<li><a
href="https://github.com/wp-graphql/wp-graphql-woocommerce">WPGraphQL
for WooCommerce</a> - This FREE plugin exposes WooCommerce data to
WPGraphQL allowing you to interact with your store’s data via GraphQL
Queries and mutations.</li>
<li><a href="https://github.com/ashhitch/wp-graphql-yoast-seo">WPGraphQl
Yoast SEO Plugin</a> - Exposes Yoast SEO data to the WPGraphQL
Plugin.</li>
</ul>
<h4 id="other-helpful-plugins">Other helpful Plugins</h4>
<ul>
<li><a
href="https://wordpress.org/plugins/advanced-custom-fields/">Advanced
Custom Fields</a> - <a
href="https://www.advancedcustomfields.com/pro/">ACF PRO</a></li>
<li><a href="https://wordpress.org/plugins/headless-mode/">Headless
Mode</a> - 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.</li>
<li><a href="https://wordpress.org/plugins/polylang/">Polylang</a></li>
<li><a href="https://github.com/crgeary/wp-jamstack-deployments">WP
JAMstack Deployments</a> - WordPress plugin for JAMstack deployments on
Netlify (and other platforms).</li>
</ul>
<h3 id="gatsby-plugins">Gatsby Plugins</h3>
<ul>
<li><a
href="https://www.gatsbyjs.org/packages/gatsby-image">gatsby-image</a></li>
<li><a
href="https://www.gatsbyjs.org/packages/gatsby-source-filesystem">gatsby-source-filesystem</a></li>
<li><a
href="https://www.gatsbyjs.org/packages/gatsby-source-wordpress">gatsby-source-wordpress</a></li>
</ul>
<h2 id="free-tutorials-courses">Free Tutorials / Courses</h2>
<p><strong>Note:</strong> 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.</p>
<h3 id="written-tutorials">Written Tutorials</h3>
<ul>
<li>2019.11: <a
href="https://dev.to/nevernull/overview-guide-to-gatsby-wordpress-starter-advanced-with-previews-i18n-and-more-583l">Guide
to Gatsby WordPress Starter Advanced with Previews, i18n and more</a> -
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.</li>
<li>2019.08: <a
href="https://justinwhall.com/live-previews-with-wordpress-gatsby/">Live
Previews with WordPress and Gatsby</a> - Tutorial showing how to use the
theme’s higher order component to facilitate previews for WordPress
posts and custom post types.</li>
<li>2019.08: <a
href="https://dev.to/nevernull/gatsby-with-wpgraphql-acf-and-gatbsy-image-72m">Gatsby
with WPGraphQL, ACF and Gatbsy-Image</a> - A guide, that shows how to
implement gatsby-image, so it can be used for WordPress media
files.</li>
<li>2018.08: <a
href="https://justinwhall.com/headless-wordpress-gatsby-netlify-continous-deployment/">Headless
WordPress + Gatsby + Netlify continuous deployment</a> - Guide showing
how to create a WordPress + Gatsby + Netlify setup in a few simple
steps.</li>
</ul>
<h3 id="video-tutorials">Video Tutorials</h3>
<ul>
<li>2019.11: <a
href="https://whatjackhasmade.co.uk/series/gatsby-wordpress-2019/">25+
Videos - Gatsby + WordPress (2019) Complete Course</a> - 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.</li>
<li>2019.07: <a
href="https://www.youtube.com/watch?v=DH7I1xRrbxs">Gatsby + WordPress
with WPGraphQL (with Jason Bahl) — Learn With Jason</a> - 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.</li>
<li>2019.07: <a href="https://www.youtube.com/watch?v=9KGuI0UmpMw">Crash
Course: Headless WordPress with WPGraphQL, ACF, and React</a> - In this
video, Alex Young (WPCasts) goes over how to get a simple headless
WordPress setup with WPGraphQL and React.</li>
<li>2019.06: <a href="https://www.youtube.com/watch?v=aqEfEuVWqws">Using
WordPress with WPGraphQL</a> - 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.</li>
<li>2019.04: <a
href="https://www.youtube.com/watch?v=rIg4MHc8elg">WPGraphQL for ACF</a>
- Jason Bahl shows how to use WPGraphQL for Advanced Custom Fields.</li>
<li>2018.07: <a
href="https://www.youtube.com/watch?v=6CuM1PY9ESQ">GraphQL with
WordPress and Gutenberg - Jason Bahl - 2018 JavaScript for WordPress
Conference</a> - 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.</li>
</ul>
<h2 id="paid-tutorials-courses">Paid Tutorials / Courses</h2>
<p>List of paid courses.</p>
<ul>
<li>2021.01: <a
href="https://www.linkedin.com/learning/building-a-headless-wordpress-site-with-gatsby">Building
a Headless WordPress Site with Gatsby</a> - This course is a
step-by-step walk through using gatsby-source-wordpress plugin to create
a fully functional headless Gatsby WordPress site with posts, pages,
categories, tags, post navigation and other features.</li>
</ul>
<h2 id="starters">Starters</h2>
<p>List of project starters, that you can clone and start building
upon.</p>
<ul>
<li><a
href="https://github.com/henrikwirth/gatsby-starter-wordpress-twenty-twenty">Gatsby
Starter - WordPress Twenty Twenty</a> - A port of the WordPress Twenty
Twenty theme to Gatsby using the new gatsby-source-wordpress@v4.</li>
<li><a
href="https://github.com/wp-graphql/gatsby-wpgraphql-blog-example">Gatsby
+ WPGraphQL Blog Example</a> - Demo showing how to use WPGraphQL as the
source for Gatsby Sites.</li>
<li><a
href="https://github.com/justinwhall/gatsby-wordpress-netlify-starter">Gatsby
+ Headless WordPress + Netlify Starter</a> - A Gatsby + WordPress
starter for continuous deployment to Netlify.</li>
<li><a
href="https://github.com/henrikwirth/gatsby-starter-wordpress-advanced">Gatsby
WordPress Starter Advanced</a> - An advanced Gatsby + WordPress starter,
that is built along a tutorial series and works with ACF flexible
content fields to create content blocks/layouts.</li>
<li><a
href="https://github.com/zeevo/gatsby-starter-wordpress-blog">Gatsby
Starter Blog</a> - Blog starter with enough features to be production
ready out of the box.</li>
</ul>
<h2 id="themes">Themes</h2>
<p>List of gatsby-themes that work with WordPress as a source, which you
can use in your Gatsby setup.</p>
<ul>
<li><a
href="https://github.com/zgordon/twentynineteen-gatsby-theme">Twenty
Nineteen Gatsby Theme</a> - A port of the Twenty Nineteen WordPress
Theme over to Gatsby.</li>
<li><a
href="https://github.com/staticfuse/gatsby-theme-publisher">Gatsby
WordPress Publisher Theme</a> - 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.</li>
</ul>
<h2 id="contribute">Contribute</h2>
<p>Contributions welcome! Read the <a
href="contributing.md">contribution guidelines</a> first.</p>
<h2 id="license">License</h2>
<p><a href="https://creativecommons.org/publicdomain/zero/1.0"><img
src="https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg"
alt="CC0" /></a></p>
<p>To the extent possible under law, Henrik Wirth has waived all
copyright and related or neighboring rights to this work.</p>
<!--- unicorn --->
<p><a
href="https://github.com/henrikwirth/awesome-wordpress-gatsby">wordpressgatsby.md
Github</a></p>