Special offers now — see discounted courses.
day
:
hour
:
min
:
sec
See special offers
Building a Headless WordPress Site with Gatsby

Building a Headless WordPress Site with Gatsby

2h 32mIntermediate2022-03-23

Authors

Morten Rand-Hendriksen

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

About us

LyndaKade is a leading learning platform that helps people learn business, software, technology, and creative skills to achieve personal and professional goals.

Phone numberAparat ChannelTelegram SupportTelegram ChannelInstagram Page

All rights to this site belong to LyndaKade.

Terms of Service|Privacy Policy

نماد الکترونیک enamad در صورت اتصال با آی‌پی داخل کشور، نمایش داده خواهد شد.
logo-samandehi - لوگو ساماندهی
Zarinpal
Zibal