Building a Headless WordPress Site with Gatsby

Introduction

• WordPress and Gatsby working hand in hand
• What will be covered in this course

1. Setting Up

• Set up WordPress to work with Gatsby
• Set up a Gatsby site using a starter
• Use the exercise files on GitHub

2. WordPress as a Gatsby Data Resource

• Explore the WordPress GraphQL tree
• Use WordPress site data in Gatsby

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

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

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

6. Categories and Tags

• Query categories and tags
• Generate category indexes automatically
• Create a category index template
• Challenge: Create tag indexes
• Solution: Create tag indexes

7. Custom Post Types and Taxonomies

• Add custom post types and taxonomies
• Query custom post types and taxonomies in GraphQL

8. Considerations When Using WordPress and Gatsby

• What to do about Blocks (Gutenberg)

Conclusion

• Next steps