Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio ipsa dolore natus eius laudantium accusamus nobis dolorem nulla quaerat molestiae. Vero vel, quae deleniti nam aliquid ipsum cupiditate quasi totam libero atque veritatis distinctio ratione eligendi numquam a obcaecati cum?
The original idea behind this website was only to test Gatsby with WordPress and see if I would be able to build my fully featured websites using these technologies, but the results were so great that I had to make something more out of it.
So the main purpose of this website now is to show how much you can actually do by combining Gatsby and WordPress, and I’ll go through all features that I build daily for several clients in WordPress, proving to you that it’s totally possible to create a fully featured WordPress website while also being able to take advantage of the amazing developer experience that only React and its whole environment can provide you.
But what exactly is the problem I’m trying to solve here?
The problem
Whoever worked with WordPress in the past knows at least some of its flaws, specially when talking about developer experience. All those template files get easily bloated with repeated and unorganized code; functions, filters, actions and every other WordPress functionality just seems to create more chaos between your files than making it easier for you to work.
It will certainly reach a point where you’ll have to install some dependency manager like Composer to help you organize and maintain your code, but that alone won’t help you that much. Soon you’ll notice that the way templates are commonly written is not scalable at all. A lot of PHP inside them, lots of logic together with the UI, and that’s the moment you feel the need for a templating engine like Laravel Blade to help you keep those things separated.
All of these issues are just the beginning of the problem. If you really want to have a decent developer experience using WordPress you’ll need to do something like Sage, which is basically creating a whole framework on top of WordPress (which we can already call a framework), adding a great level of scalability and organization, but at the cost of a lot of complexity and a learning curve to do the same things you were used to do.
So we have a real problem here, but what exactly are we doing wrong?
We’re building our websites within our CMS
That’s the root of our problems in WordPress and any other CMS. What I mean by this is that we have a platform where we’re forced to build our websites using the tools that it provides. This brings us not only limitations but also a lot of pain as stated previously. We’re forced to build themes respecting all of the CMS rules, living us no room to completely decouple our UI from it, leading us to look for hard ways to keep our code well structured and organized.
“But wait a second there”, you might be thinking. We already have WordPress REST API that can provide us all the data we need, allowing us to completely decouple our UI from the back-end, getting rid of all the mentioned problems, right? Ehh… kinda.
Even though it’s completely possible to use React or any other library to build our UI using the WP REST API, it’s still extremely slow. And I really mean it. Every request to the API causes WordPress to load its entire core and plugins, which sometimes can make requests take several seconds to respond.
If there was only a way to have all the data from the API ahead of time so that we could use it to present dynamic data almost instantly to our users, right?
The solution
And this is the moment where you meet Gatsby and you understand the meaning of love ❤️
Gatsby helps you build “dynamic static websites” by giving you the ability to fetch all your data from any source you’d like, then providing a way for you to use GraphQL to query them locally. And since WordPress is such a huge platform, Gatsby even provides us with a plugin called gatsby-source-wordpress, which will automatically fetch all data from WordPress, even from custom fields, keeping you from having to fetch it on your own, while also giving you the most amazing image optimizations you could ever imagine to have.
It sounds too good to be true, right? A dynamic website with completely static files, super speed, automagic image optimizations. So where are the gotchas?
Well, there are no gotchas, it’s really that, but there might be some things you should be aware of.
Content update
It can be tricky to keep your static files up to date if you don’t automate their deploy in some way. However if you host your website in Netlify, it will provide you all the tools you need to have a nice continuous deployment, saving you a lot of time and nerves.
First you’ll want to make sure your website is versioned using Git so that you can configure Netlify to deploy your project every time you push to a certain branch, making sure your code changes are always reflected. Second and trickier, you’ll want to create a hook to trigger deploys, which then you can use in WordPress by creating a deploy button in the admin page that will just trigger this hook, making Netlify build your project right away.
Another option when using the deploy hook is to listen to updates on posts, pages, etc., triggering the hook on these updates, removing the need to click this extra deploy button in the panel. However I found that it worked better to have one single button to trigger the deploy rather than doing it automatically by listening to updates. The latter caused a lot of noise on deploys when updating several contents in a short period of time, while the former was simpler in general since you had total control over when to trigger the deploy.
Last but not least, deploying a WordPress site can take a while, usually around 1~2 minutes, but depending on how much content you have the time can go higher and higher. That shouldn’t be a problem though in most situations since most people won’t bother to wait a few minutes for their content to be updated, but this should be a big concern if you really need that instant update, making you rethink if Gatsby is the way to go in such case.
Plugins
It’s pretty obvious that most plugins won’t work out of the box since we’re completely decoupling our UI from our CMS, but most of the time you can still fully utilize features of a lot of plugins via APIs. ACF is one of the most used plugins in WordPress and works out of the box after you install the acf-to-rest-api plugin. Multi language ones like WPML and Polylang also have APIs that make it possible for you to use them.
When it comes to contact forms, you can still use GravityForms as it has a nice API which allows you to do a lot with it, or you can just build your own function in PHP and call it using AJAX or exposing it to the REST API. In case you choose to use GravityForms, you’ll most likely need to setup a lambda function to run it with environment variables since it requires API keys, which Netlify can help you again pretty easily.
I haven’t tried any e-commerce plugins, but I’ve read that WooCommerce has an API and should work with Gatsby, but I’m not so sure yet if Gatsby is well suited for e-commerces in general.
Other simple plugins that add some features like social media share buttons, breadcrumbs, and others, I just replaced with either some React equivalent or my own implementations since they should all be fairly simple components to create.