Gatsby Starter WordPress Advanced

HomeSample PageExternal LinkBlog

Guide to Gatsby WordPress Starter Advanced with Previews, i18n and more

Tutorial Outline

  1. Overview
  2. Basic WordPress & Gatsby Setup
  3. Setup Menu Navigation
  4. Deployment
  5. Blog with Pagination
  6. How to handle Images and make use of gatsby-image
  7. PageBuilder with ACF Flexible Content
  8. Internationalization – i18n
  9. Dynamic Previews
  10. …

Depending on time and upcoming discussions, this outline might change. I might add some more parts, if I discover other topics, that could be of interest.

Find the latest version here: https://gatsby-starter-wordpress-advanced.netlify.com

Who is this tutorial for? 👥

For people who want to get started with Gatsby in combination with WordPress and create a production ready client-site or personal sites with lots of nice features. You should have a basic understanding of WordPress and JavaScript. The tutorial will get more advanced and into edge-cases, the further you go.

Feel free to use the comments if something doesn’t make sense to you. I’ll try my best to help out for any level of experience.

Requirements used for the project 📋

  • CMS
    • Highly Customizable
    • Easy to use
  • Secure
  • Translatable (Multi-Language)
  • Low Frequency Updates
  • Responsive Design
  • Good performance (SEO and site speed)
  • Scale: ~100 Pages

So in short: A modern extensible multi-language site.

What will you learn? 🎓

Obviously this depends on your knowledge. The first parts (1-3) of the tutorial, will be more basic things, while from the middle onwards it will get more advanced, more specific to use cases and more edge-case.

I just worked on a client project, that had all the above requirements and there is not many tutorials out there, which in depth, explain how to implement a full-fledged production ready site with i18n, previews and the ability to have some sort of page builder ability.

You will learn about:

  • The basic setup and deployment.
  • How to make use of ACF flexible content field
    • How to dynamically render your components depending on which components are in use.
  • How WPGraphQl works and how you can extend it to your needs.
  • How to implement your multi-language setup with Polylang.
  • How you get Previews to work with dynamic data. Without the need of rebuilds.

Repository

Here is the code used in the tutorial. Checkout the branches for the different parts.

 henrikwirth / gatsby-starter-wordpress-advanced

Gatsby WordPress Starter Advanced – Tutorial

Credits ❤️

I want to thank some people, who helped me out a lot while working with those technologies. First of all thanks to all peeps on the WPGraphQL Slack Chat. Especially Jason Bahl, Peter Pristas, Justin W Hall, Esa-Matti Suuronen, and all the others there I probably forgot about. If you ever need help, this is a great place to get well treated and sorted out. Thanks to NeverNull for letting me work in this.

Cover-Image vector art from rawpixel

You might wanna checkout our huge list of resources for this subject:

 henrikwirth / awesome-wordpress-gatsby

An awesome list of resources about WordPress as a headless CMS with Gatsby

Questions & Constructive Criticism 💭

I’d love to have discussions about my approaches. If you have any questions, or want to point out any mistakes. It is more than welcome. I’m new to writing tutorials and therefore am happy to improve in any way.

Let’s dive in ➡️

We will create our basic setup with WordPress & Gatsby.

Part 2 – Basic WordPress & Gatsby Setup