There's no doubt that WordPress has become as big as it has because of how easy it is to manage content. Due to the multitude of changes that can be made from within the WordPress admin, it empowers users to make changes without any technical knowledge.
With that ease of use comes a bit more complexity and limitations for developers. While WordPress alone is a great solution for many sites, it's still subject to various nuances and additional server-side processing that might not be ideal for others.
Leveraging WordPress' Strengths
Since WordPress' most significant strength is its user-friendliness when managing content, how can developers leverage the benefits while still utilizing a solution that works best for them? By using WordPress as a headless source for their frontend, of course!
For example, a frontend developed with Gatsby can use WordPress as a source for its posts, pages, categories, and even comments! From the user's perspective, everything looks and feels like WordPress, but the frontend can be statically generated to take advantage of substantial performance increases and lower hosting costs.
Our Solution: WordPress + Gatsby
As a supporter of site performance and microservices, I've come up with a solution that can serve as an example of how to use WordPress as a backend for a site built with Gatsby.
https://twitter.com/TheJeffMatson/status/1161659005208530944
In this example proof of concept, the Twenty Nineteen theme has been re-created using the original theme's CSS files.
You can find my re-creation of the Twenty Nineteen theme with Gatsby on GitHub.
How It Works
Upon initializing a Gatsby build, existing content from a WordPress source (via the WPGraphQL WordPress plugin) is automatically pulled and built using various templates for posts, pages, archives, etc.
Since Gatsby is generating static pages from the WordPress source, this also means that the frontend is faster more secure than ever before. Additional server-side processing via PHP is no longer needed when someone visits your site!
What about dynamic content?
You might be asking yourself, "but what about dynamic content, such as commenting?". We've thought the same thing and came up with a solution.
When it comes to dynamic content, the solution is to simply load it client-side. In the case of comments, they can either be loaded dynamically through a GraphQL API request or statically generated when the site is built. Both solutions come with their own list of pros and cons but allow for additional flexibility and performance increases with either.
Similar to how comments are loaded when choosing to dynamically display them, comment submissions occur from the client side as well. Going this route means that comments can be moderated and stored directly from within the WordPress admin backend while being displayed from an entirely different location.
Getting a Test Drive
If you want to give it a try for your own projects, you can clone or fork the example repository on GitHub. Just please be aware that this repository is provided as an example proof of concept and isn't currently intended to run as a production site.
For more information on how to build the example project, take a look at the instructions within the readme file.
Love The Idea? Here's How You Can Help
We created this example as a way to give back to the wonderful Gatsby and WordPress communities that have helped us shape the future of NorthStack. If you'd like to provide your expertise, we'll welcome it with open arms.
For bugs reports or enhancements, feel free to file an issue on GitHub or submit a pull request.
Just want to share your thoughts or your own implementation of a Gatsby site that uses WordPress as a backend source? Let us know in the comments below.
Bonus: Check Out These Other Great Open Source Projects
There are other open source projects that have also used Gatsby as a frontend for a WordPress backend, all with different approaches. If you're looking into doing the same, it might help to see the varying ways of achieving similar end-results.
Here are a few other open source projects that use a Gatsby frontend with a WordPress source:
- Porting the Twenty Nineteen Theme to Gatsby on JS For WP
- WPGraphQL Example Blog by the WPGraphQL team
- gatsby-theme-wp-source-one by @progital on GitHub
Top comments (0)