Today we are thrilled to announce the general availability of Gatsby’s completely rewritten WordPress integration! Gatsby now offers the most seamless front-end integration for your headless WordPress projects.
Get started immediately with our step-by-step docs, or spin up our official Gatsby for WordPress starter.
Also, join us for a webinar on how to build fast and secure websites with Gatsby and WordPress.
WordPress Developers have been excited about the possibilities of “headless WordPress” for several years, but until now the hype has outpaced the tooling. Building a site with a decoupled architecture has required a high level of JavaScript experience, and the final product complicated the familiar publishing experience for Content Editors.
Gatsby set out to solve those difficult problems. We wanted to make it simple to create web experiences with WordPress that are performant for website users and fun to build for Web Developers, without requiring writers to adopt a different workflow.
With these goals in mind, last year we beta launched:
- Experimental source plugin for WordPress – a public beta of our new plugin for fetching data from WordPress
- WPGatsby – a preview of our WordPress plugin for adding content preview and Incremental Builds, powered by Gatsby Cloud.
We also financially supported the development of WPGraphQL to a stable 1.0. This open source WordPress plugin turns any site into a GraphQL server, and makes the content within your WordPress install faster and easier to work with.
During the beta period, we were excited to see developer teams we admire adopt Gatsby’s WordPress integration for their projects. Teams from Facebook, Bluehost, and Apollo used Gatsby with WordPress to create accessible, scalable, and easy-to-update web experiences. We listened to their feedback, solicited yet more comments from other users, and improved both the Developer and Content Editor experience for our integration.
We think your whole team will love the results!
Fast and Secure by Default
Optimizing a WordPress project for performance and securing the site from attack is possible — but it’s also expensive and requires constant maintenance. On the other hand, a decoupled WordPress site with a Gatsby front-end starts out fast and resilient, and is inexpensive to host even as your traffic grows.
Also, with just a few free plugins you can enable Progressive Web App (PWA) features on a Gatsby / WordPress site. That means a Web Developer can rapidly build a site that works on flaky internet connections and low powered mobile phones, without having to become a web performance expert!
Fetching WordPress Content Made Easy
The core of our WordPress integration is gatsby-source-wordpress 4.0, a complete rewrite of our previous source plugin. We’ve taken the hardest part of working with WordPress content and encapsulated all of our best practices into an open source plugin.
By installing the plugin, and adding your WPGraphQL enabled endpoint, you’ll have WordPress content appear in Gatsby’s data layer and available to use in your React templates. What used to be the trickiest part of building a front-end theme with headless WordPress is now solved in one step!
The new source plugin optimizes the links and images within your content’s HTML, with gatsby-image and gatsby-link. This solves a common issue with Gatsby’s original source plugin for WordPress, and is unique to any other front-end framework.
Gatsby’s WordPress integration also restricts image processing and optimization only to images that are referenced in published content. Even if your WordPress install has a large media library it won’t slow down your build times.
And the really cool feature you’ll love is that any WPGraphQL extension automatically makes its data available to your Gatsby project! Say you needed to add metadata to your site for search engine optimization. On the WordPress side you can install the popular Yoast SEO plugin, and the corresponding free WPGraphQL extension that makes Yoast’s data available from your GraphQL endpoint. Now you can use content from Yoast in your page templates!
This powerful capability means your site can leverage popular WordPress plugins for content modeling, translation, ecommerce, and more!
No Compromise Content Editor Workflow
Onboarding an editorial team to headless WordPress used to be painful. Content Editors lacked the ability to review content before publishing. And when they did publish, they had to suffer through long build times to see content live on the web.
Gatsby’s WordPress integration solves those issues by giving editors a seamless publishing experience through Gatsby Cloud. After you install the WPGatsby WordPress plugin and connect it to Gatsby Cloud, the “preview” button in the WordPress content editor will now show a preview of how the drafted content will appear on the site.
Once the content is published, it will be statically built in less than 7 seconds for a medium-sized site. Content editors never have to log in to Gatsby Cloud or concern themselves with how their content is being served. They can create and iterate on content using the same workflow they’ve always used with sites build on traditional WordPress!
Massive Front-End Plugin Library
On the front-end side, Gatsby’s WordPress integration replaces many popular WordPress plugins with free Gatsby alternatives.
Instead of requiring content editors to optimize images using the EWWW or Smush plugins for WordPress, developers can leverage Gatsby Image, a cutting-edge Gatsby plugin that transforms images using the very latest browser capabilities and performance best practices. Similarly, WordPress plugins that add Google Analytics to a site can be replaced by a powerful Gatsby plugin.
Also, WordPress plugins that are needed for caching, query monitoring, security, and performance are made obsolete by Gatsby’s core features.
And if a solution cannot be found amongst Gatsby’s library of over 2500 plugins, developers can also choose from tens of thousands of compatible React libraries and projects.
New to React and GraphQL? Level Up Through Gatsby
WordPress developers who are new to creating websites with React can learn JavaScript deeply by using Gatsby’s WordPress integration.
You can get started quickly by downloading Gatsby’s official WordPress starter, which includes a template that uses basic “post” data from WordPress. Many developers find that it is faster to learn React and GraphQL if they begin with a project with best practices already baked in. And that’s exactly what our WordPress starter provides for you.
Our friendly docs will walk you through the setup and customization of your project. And there’s a wide ecosystem of free tutorials and high-quality courses that will take your skill even further.
Reduce Your Hosting Bill (Almost to Zero)
Gatsby’s WordPress integration is open source, and small projects on Gatsby Cloud are free to build.
Instead of paying hundreds of dollars a month for the fastest, most resilient WordPress hosting, your Gatsby / WordPress sites are infinitely scalable at a dramatically lower cost. That’s because a headless WordPress project only needs to serve content for new site builds, instead of dynamically building pages for every site visitor.
The lower hosting cost of the Gatsby stack makes it easy to tinker, learn, and explore, but also attractive for launching production-ready sites.
Start building with Gatsby and WordPress!
Gatsby’s WordPress integration combines the fastest front-end framework with the most popular CMS! To get started, install Gatsby’s source plugin for WordPress!
And join us on March 3rd at Gatsby Conf to participate in a Gatsby and WordPress workshop with Gatsby Engineer Tyler Barnes and WPGraphQL creator Jason Bahl.
Ready to go headless? Register for GatsbyConf — two days of speakers, workshops, and some really cool launches and announcements. And don’t miss special event Gamer vs. Gatsby. Watch live as David Livingston, a.k.a. Kosmic, tries to beat his world record Super Mario Bros speed run time of 4:55 while Gatsby engineer Kyle Gill races to spin up and deploy a live site! Thrills! Chills! Free and virtual, March 2-3, see you there!