Gatsby & WordPress (2019)

We'll be specifically looking at how we can use WordPress as a headless CMS (Content Management System) 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.

Finally, we'll cap off the series with a focus on deployment and how you can deploy your Gatsby website for free to Netlify.

View YouTube Playlist

Gatsby & WordPress – 1. Course Overview

In this introduction video, I break down the technologies and frameworks we'll be covering throughout the videos. Specifically WordPress, Gatsby & Netlify.

Gatsby & WordPress – 2.1. Getting Started with WordPress

In this episode, we focus on setting up a local WordPress installation on our local machine. We do this using a free tool called Local by Flywheel.

Gatsby & WordPress – 2.2. WordPress Plugins

In this episode of the series I cover the essential plugins we'll need to build a GraphQL schema in our WordPress system.

Gatsby & WordPress – 2.2.5. – Bedrock and Composer

In this bonus episode I cover how we can make use of Bedrock and Composer to manage our WordPress dependencies and plugins.

Gatsby & WordPress – 2.3. – WPGraphQL

To get an understanding of the schema we do have available to us, we'll be using the WPGraphiQL plugin within our WordPress admin dashboard.

Gatsby & WordPress – 2.4. – Theme Development

In this episode we cover setting up a Timber Starter theme in our WordPress installation and extending it with Custom Post Types (CPTs).

Gatsby & WordPress – 2.5. – ACF and GraphQL

In this video I'll be covering ACF and the WPGraphQL plug-in, and how we can raise some of the ACF fields on custom post types into the schema.

Gatsby & WordPress – 2.6. – ACF Gutenberg Block Development

In this video, I cover how you can build your own custom Gutenberg blocks using the ACF Pro plugin and then show the block attributes in your schema.

Gatsby & WordPress – 2.7. – Yoast SEO and WPGraphQL

We cover the core concepts of what Yoast SEO provides us to our schema and how we can access the Yoast SEO fields using a GraphQL query.

Gatsby & WordPress – 3.1 – Getting Started with Gatsby

In this video, we get up and running with our Gatsby portion of the series. We install a starter kit for our envrionment and spin up a local dev server.

Gatsby & WordPress – 3.2. WordPress as a Data Source for Gatsby

In this video, we'll be linking the WordPress schema we had developed in the previous chapter of the series into our Gatsby system.

Gatsby & WordPress – 3.3. – Querying in a Page

We create a demo query which asks for information regarding our WordPress posts. With the JSON response, we then render some blog posts slugs to the page.

Gatsby & WordPress – 3.4. – Programmatically Creating Pages and Posts

In this video, we will look at how we can programmatically generate pages using the createPages API that Gatsby provides us.

Gatsby & WordPress – 3.4.5. – Render HTML Strings as Elements

When working with our GraphQL schema we will often encounter the issue of having to render an HTML string as HTML elements within our React application.

Gatsby & WordPress – 3.5. – Block to Component Parsing

In this video, we look at the Gutenberg blocks in our WordPress editor and work on a method of converting the blocks into React Components.

Gatsby & WordPress – 3.6. – Styled Components

In this episode, we look at the Styled Components NPM package and why they are of benefit to implementing in our React application.

Gatsby & WordPress – 3.7. – Using WordPress Menus

In this video, we import the WordPress menu data from our GraphQL schema to generate React navigation systems with the Gatsby link component.

Gatsby & WordPress – 3.8. – Correcting The Homepage Slug

Gatsby is rendering our homepage under route /homepage, in this video, I will correct the site to provide the homepage at the index of route of our website

Gatsby & WordPress – 3.9. – Generating SEO Tags

By using the WPGraphQL Yoast plugin we can import the data into our Gatsby application to generate HTML head tags in our custom SEO React component.

Gatsby & WordPress – 4.1. – Deploying to Netlify

With our Gatsby site complete, we now need to deploy it a hosting environment. Netlify is a free hosting platform which we will use to deploy to.

Gatsby & WordPress – 4.2. – Deploying WordPress to Netlify with a Webhook

We want our Netlify to build every time we make a change to the content on our WordPress website. In this video, we do just that.

Gatsby & WordPress – 4.3. – Forms with Netlify

Forms are an important component of any website, I will show you the alternative solution using Netlify forms on your JAMStack Gatsby site.

Gatsby & WordPress – 5.1. – WPGraphQL isFrontPage

In this video, we explore the new isFrontPage field available in our GraphQL schema as of WPGraphQL version 0.4.1. Thanks to Zac Gordon and Jason Bahl!

Gatsby & WordPress – 5.2. Gatsby Node.js Structures

We separate each createPages function into asynchronous NodeJS functions which will query our internal schema and then map over the results to create pages.

Gatsby & WordPress – 5.3. – Increasing WPGraphQL Query Limit

In this video, we will increase the maximum queryable nodes returned by a single GraphQL query in WPGraphQL from 100 items to 300+ items.

Gatsby & WordPress – 5.4. – Creating a Custom Data Source Gatsby Plugin

In this video, we cover how you can enable a custom data source for you Gatsby GraphQL schema. Specifically using the YouTube and Dribbble APis.

Gatsby & WordPress – 5.5. – Registering Custom Taxonomies in WPGraphQL

We go into how you can register a custom taxonomy for your WordPress theme, and then expose the taxonomy within your WPGraphQL schema.

Gatsby & WordPress – 5.6. – Building Taxonomy Pages in Gatsby with WPGraphQL

With our new WordPress Taxonomy surfacing in our WPGraphQL schema, we now go on to build our internal Gatsby GraphQL schema.