Guide to Gatsby WordPress Starter Advanced (7 Part Series)
- Basic WordPress & Gatsby Setup
- Setup Menu Navigation
- Blog with Pagination
- How to handle Images and make use of gatsby-image
- PageBuilder with ACF Flexible Content
- Internationalization - i18n
- Dynamic Previews
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
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.
- Highly Customizable
- Easy to use
- 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.
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.
Here is the code used in the tutorial. Checkout the branches for the different parts.
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:
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.
We will create our basic setup with WordPress & Gatsby.
Part 2 - Basic WordPress & Gatsby Setup