Building a Headless WordPress Site with Gatsby
2h 32mIntermediate2022-03-23
Authors

Morten Rand-Hendriksen
Senior Staff Instructor, Speaker, Web Designer, and Software Developer
Course details
WordPress, the powerful publishing platform, powers much of the web. Gatsby allows developers to build performance-focused, modern websites and applications with React. In this course, discover how to combine this dynamic duo to get a web publishing powerhouse. Join instructor Morten Rand-Hendriksen as he explains how to use WordPress to populate a Gatsby site. He shows you the plugins you need to use WordPress data in a Gatsby site, then demonstrates how to connect WordPress and Gatsby. He covers how to create a variety of custom menus, including a nested menu and a footer menu. He demonstrates how Gatsby can be configured to generate new pages based on WordPress posts. Morten goes over how you can query categories and tags, as well as how to generate index pages for each category of the WordPress site. He walks you through how to access custom data through GraphQL and use it in your Gatsby site, then concludes by explaining how to deal with WordPress blocks when working in Gatsby.
Skills covered
WordPressJavaScript FrameworksContent Management Systems (CMS)Front-End Web DevelopmentWeb DevelopmentOpen SourceOne-Off
Concepts
Introduction
- WordPress and Gatsby working hand in hand
- What will be covered in this course
Setting Up
- Set up WordPress to work with Gatsby
- Set up a Gatsby site using a starter
- Use the exercise files on GitHub
WordPress as a Gatsby Data Resource
- Explore the WordPress GraphQL tree
- Use WordPress site data in Gatsby
Working with Pages
- Query pages in GraphQL
- Generate pages automatically
- Create a page template
- Work with featured images
- Challenge - Add metadata to the page template
- Solution - Add metadata to the page template
Custom Menus
- Query custom menus in GraphQL
- How WordPress manages menu items
- Create a flat menu in Gatsby
- Create a nested menu in Gatsby
- Challenge - Create a footer menu
- Solution - Create a footer menu
Working with Posts
- Query posts in GraphQL
- Generate posts automatically
- Add category and tag info
- Create an index template
- Generate index pages automatically
- Challenge - Create a post navigation component
- Solution - Create a post navigation component
Categories and Tags
- Query categories and tags
- Generate category indexes automatically
- Create a category index template
- Challenge - Create tag indexes
- Solution - Create tag indexes
Custom Post Types and Taxonomies
- Add custom post types and taxonomies
- Query custom post types and taxonomies in GraphQL
Considerations When Using WordPress and Gatsby
- What to do about Blocks (Gutenberg)
Conclusion
- Next steps