I've worked with WordPress for over 10 years. It's a great platform, and there's no doubt that its come a long way and progressed from a simple blog publishing platform, to a more of a CMS (albeit through the addition of some incredible plugins).
But the way that Automattic steam-rolled the community into adopting Gutenberg, combined with me being bored with WordPress and wanting a new challenge, led to me giving up on the platform and moving onto other things.
Fast-forward 7 months and my new employer tasked me with a WordPress project (meh), but suggested we give Gatsby a try (huzzah). It's only been a couple weeks now, but I'm finding renewed joy and enthusiasm for the stack.
Here's why.
1. It keeps clients happy.
Inspite of it being arguably out-performed by other systems like Laravel or Directus, WordPress is still a great platform. And because of how mainstream it is, it's familiar to end-users and they're comfortable with it.
2. It keeps you happy.
Stands to reason that if you're working with a fun stack, you're going to enjoy your job more. The combination of WordPress, React, Gatsby and GraphQL is just that - fun.
Over the next couple weeks I will be creating some content around some libraries, tips & tricks, methodologies and systems that I've put to use in this site build, and that have made work fun again.
You can look forward to:
- A headless & more secure WordPress install with Bedrock
- Extending the REST-API to extract the most from your CMS
- Setting up your front-end with Gatsby
- Understanding how Gatsby uses WordPress to 'build itself'
- Learning some key GraphQL queries to extract what you need
- Swapping WordPress plugins, with Gatsby plugins, to do things like:
- Form handling
- SEO & XML sitemaps
- Image optimisation
- and more...
- Deploying a Gatsby site, and triggering builds with WordPress webhooks
Join me on this journey, as I make WordPress development fun again.
PS: This post will be updated with links to the other posts in this series, as they are written.
Top comments (58)
I've been advocating this approach to WordPress for the past year :) thanks for bringing more awareness to this awesome stack, but you missed the most important point of all - the WordPress GraphQL plugin!! github.com/wp-graphql/wp-graphql
With one-click, you have programmatic access to all WordPress' features via GraphQL. What a time we live in.
I'm actually not using that plugin at all. I went the route of
gatsby-source-wordpress, but more on that in post 4 ;)Definitely check out WPGraphQL (github.com/wp-graphql/wp-graphql)! Gatsby's new WordPress Source plugin will deprecate support for the WP REST API and will use WPGraphQL on the WordPress Server.
You can read more about it here: github.com/gatsbyjs/gatsby/issues/...
Hi Jason,
What's the best way ? wait for the v4 or use the gastby-source-graphql plugin ?
Like most things in tech: "It depends"
If you have something you need to deliver now, I'd probably suggest using WPGraphQL + Gatsby Source GraphQL.
If you're just experimenting and looking for long term structure, I'd probably wait for the new source plugin as that will have a lot of things specifically optimized for the Gatsby + WordPress experience.
Fair enough! Look forward to your series :)
Oh man you should at least check out the new GraphQL plugin for WordPress! It's made by Gatsby 😍🍻
Either way I love Gatsby
Right, so I understand that you basically use Wordpress as a backend (headless CMS)? Never realized that that was remotely possible!
Yes, for a while now actually. They have had the REST API for a few years, and you could build a de-coupled front-end that made use of this.
This series will cover the usage of GraphQL instead of the REST API, so stay tuned :)
I find Wordpress and Drupal so stressful to code. I can't really stand for its post and postmeta tables self-reference. It also doesnt have routing control and the hooks cycle will confuse anyone. Imagine if they teached at colleges, the student might be quit.
I think that to a certain extent the whole meta tables thing that Wordpress does is now potentially problematic.
At the time Wordpress first came about, it made sense, because it was the only way you could easily store arbitrary keys and values about an object.
Now, however, most relational databases support some sort of JSON field which allows for storing and querying that sort of data. However it's difficult to imagine how Wordpress could adopt that without disrupting existing sites.
I love how you think Wordpress/Drupal is.
Plus, any structural change made in Wordpress/Drupal mostly stored in database, and it will be hard to track when someone else new to the project.
@markbloomfield Does this series assume you're building from scratch, or that you're transitioning an existing WP site to this paradigm? I'm assuming the former. But if you can, consider an addendum article that covers what to think about if you're transitioning from a trad WP site to this stack. Thanks!
It'll cover a from-scratch site, but ultimately, you can create a new JS-powered frontend and with just the addition of a few REST-API improvement plugins, your existing site will be good to go.
IE it doesn't need to be a brand new site. You can retrofit an existing one :)
Awesome, looking forward to it.
The only thing I love about the WordPress front-end is the ability to create excellent web sites quickly using the "Elementor" page-builder. If I go headless with Gatsby, I don't mind losing the "wizard" or "drag-and-drop" simplicity of Elementor, but I'd like to know what tool(s) or repositories I could leverage that would optimize the speed of delivering a beautiful site design. I don't want to suddenly spend weeks or months achieving what I could do with Elementor in hours. Any advice?
I built my personal site (it's still a WIP) to try out the WP + Gatsby stack quite a while ago. I've been working around WordPress for about 6 years now and this new approach was wonderful! I look forward to doing more projects (I have some interesting ideas!) and a blog series about it as well. Good luck with yours!
If anyone's considering deploying it to Netlify, I built Deploy with NetlifyPress, a very simple plugin that helps you set up automatic deployments directly from your WordPress dashboard.
I've been using WordPress for a while, then jumped onto Gatsby to redo JackHarner.com and loved it!
Now time to make the connection between WordPress as a CMS and Gatsby as a front end.
Stay tuned! It's easier than you think 😊
I've been interested in this approach for a while, even though I despise WordPress. Would really like to work out a way of getting WordPress to be 'serverless' within this stack. That way, the WordPress backend would only be created and running when you need to edit something.
You can kinda do that already.
Because
gatsby-source-wordpresshandles the finding & replacing of URL's when fetching the content, your WP site can live anywhere - even on your localhost.The caveat here, is that your
gatsby buildwould need to be done locally then too, as online, it wouldn't be able to find 'localhost' as its source.I'm currently playing with this stack and I love it!! Extending the REST-API it's so easy and with help of some back-end WordPress plugins, the process of build a web app it's smooth and fun.
My clients will love this.
I'm literally just starting to get into Gatsby after building WordPress sites for 6 years. Looking forward to this series dude!
Nice! We're on the same journey then 🖤 You're gonna love it :D
Indeed! Although my JS knowledge bis really limited so I'm struggling with the basics at the moment!
Have you been through this ?
Yeah, I have done that course too. The course is great but also, because it doesn't use any frameworks, sometimes it's confusing about where to put code or what the correct syntax is.
This stuff is relatively new, whereas there is about 17 years of knowledge to Google with native WordPress issues so it can be hard to find solutions online.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.