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.