Building a multilingual blog with Gatsby using Wordpress as headless CMS
Hello, I’m a digital product developer @TİO, a digital product studio based in Istanbul. This post is about creating a GatsbyJS website with blog function using Wordpress as a headless CMS.
Even though I originally started digital product development with PHP, I never approached Wordpress as a good option. Maybe it’s because I felt limited with design or the setup was somehow always problematic. At TİO we even created our own very basic CMS platform for the blogs we developed JUST FOR THE SAKE OF NOT using WP. 🙃
But it’s almost 2022 and well it’s time for headless systems! The idea of Wordpress being just a reliable backend source just stole my heart as I can now use the blog posts with my very custom designed gatsby website. YEEAY.
Content managers love the WP admin dashboard as they are used to it and we don’t have to teach anyone how to use the CMS we built. :) I still love how to-the-point it was for our case but it’s time to be faster than ever.
Setting up the gatsby wordpress starter blog with my already existing gatsby website took only 1 hour. I was so happy when I saw how easy it was to just follow the GitHub documentation and see it working like a charm. ✨
BUT things got a little bit more complicated. In TİO’s website we have both english and turkish content, so we wanted to create a multilingual blog which serves seperate blog posts for each language. After a long search I couldn’t find a ready-made solution as it’s relatively a new concept. So I came up with my own solution by hacking the gatsby-node.js a little bit. I’m curious to see alternative solutions, so if you come across with a better solution please let me know!
How to create multilingual blog posts with gatsby and Wordpress?
First follow the gatsby-starter-wordpress-blog instructions until 7th step to set up your blog with gatsby.
Then install Polylang plugin to your wordpress. Choose language of the blog posts you added. I did not use the translation method, I simple have different blog posts for each language.
Now we need to add polylang languages and translations into the GraphQL schema. For this we will use WP GraphQL Polylang plugin. When I searched in add new plugin page of wordpress I couldn’t find this plugin.
As I’m not a wordpress expert I lost time by checking up my wordpress version, php version etc. It was weird for me to not to find something I see in another tutorial. But I didn’t give up and discovered the magical button of upload plugin.
https://github.com/valu-digital/wp-graphql-polylang
I just downloaded the plugin from GitHub as zip. and simple uploaded to wordpress. And I could see the languages in my graphQL query. ✨ Many thanks to @valu-digital.
Now we need to edit gatsby-node file to generate pages according to languages and use different template files to adapt language-based content.
Generating multi-lingual blog posts with GatsbyJS:
1- We create a function to query the active languages in your wordpress.
We add language parameter to getpost query to filter posts with language
2- Edit main generatePages function to get the languages and create blog posts for each language in the system
3- Create your blog post and archive templates for each language.
!! Don’t forget to change the name of the page query in the additioanl language template as it can’t be duplicate in a project.
4- Add language parameters to individual blog post generating function and blog archive generation function.
5- Define template for the language.
6- Generate pages based on the template by passing the template file to createPage function as the component.
6- That’s it! ✨
https://github.com/sedyldz/gatsby-starter-wordpress-blog
Here is the github repo where I edited the official starter. You can have a look in the gatsby-node.js file and the templates. Don’t forget to update gatsby-source-wordpress plugin settings in gatsby-config.js with your wordpress url where you setup polylang plugin.
I hope it is useful for anyone who is searching for making a multilingual blog with headless Wordpress and GatsbyJs.
Don’t forget to check out tio’s blog page as the final result of this tutorial. 👇
