Gatsby WordPress Themes Project Partners with Theme Shops to Port Popular Themes to Gatsby

Gatsby WordPress Themes is a new collaborative project led by Zac Gordon with help from Jason Bahl, Rich Tabor, Muhammad Muhsin, and Alexandra Spalato. The group is working together to port popular themes for use with Gatsby, the React-based static site generator that uses GraphQL for its data layer.

Known for its performance and ease of deployment, Gatsby has captured developers’ attention and was one of the rising stars of the React ecosystem throughout 2018. Using WordPress as a headless CMS, developers can pull data into Gatsby and enjoy the scalability, speed, and security that comes with serving static files.

Although static site generators have been around for awhile, the current Gatsby craze seems to be rooted in the fact that the project uses React, Webpack, and modern JavaScript and CSS.

“WordPress devs love Gatsby because it lets them throw away the entire old school PHP based WordPress theming system and built sites with React and GraphQL,” Gordon said.

“Gatsby devs are finding a new interest in WordPress because by default you have to edit Gatsby content in Markdown. WordPress gives a much richer editing experience.”

Jason Bahl, creator of the WPGraphQL project, is a technical advisor for the Gatsby WP Themes project. He was inspired to collaborate with the team because he thinks Gatsby has a lot of benefits for WordPress sites.

“The end result of a Gatsby site is a static site with no live Database connection,” Bahl said. “Just HTML and JavaScript files, so performance is better than even the most highly cached WordPress sites, and security is better because there’s no live database connection to be compromised.

“Also, Gatsby is fully React. With Gutenberg in core, WordPress developers are writing a LOT more React. Using Gatsby as the presentation layer for a site allows for components to be re-used across the admin and the theme, where now developers need to create React components for Gutenberg and PHP template partials for the ‘regular’ theme rendering.”

Regular WordPress theme are not immediately compatible with Gatsby, since the entire theme has to be built with React, but developers can use the same styles.

“We are taking a distinctly different direction than the WordPress themes on the Gatsby themes repo currently,” Gordon said. “We are going to base all of our themes on the WP GraphQL plugin. The default Gatsby themes now work on a wrapper on top of the REST API and don’t have live GraphQL endpoints, so they are limited.”

Gatsby WordPress Themes Project Partners with Theme Shops to Offer Free and Commercial Gatsby Themes

The Gatsby WordPress Themes project will offer a combination of free and commercial Gatsby themes. Gordon is partnering with theme shops that are open to his team doing the heavy lifting of porting popular themes over to Gatsby.

“The first two theme partners are Rich Tabor of CoBlocks and ThemeBeans, who is licensing us his super clean and Gutenberg perfect ‘Tabor’ premium theme,” Gordon said. “Then we have Leland Fiegel, a fellow DC WP chap and long time friend, from Themetry. They specialize in themes on WordPress.com, which means they are also battle tested. They have licensed us their great business theme Belmont.”

Gordon said the first versions of the Gatsby themes are targeted towards business and brochure sites that might have a couple pages laid out in Gutenberg and possibly a news/blog section and contact page.

“Since headless sites don’t work with a lot of plugins by default, the V1 of all the themes will be super opinionated and focused (but 100% extendable),” Gordon said.

“The final set of themes are from the WordPress default themes collection. We will have a detailed article showing how we ported the Twenty Nineteen theme over to a Gatsby theme and that will be the first of the default themes we do.”

Although this initiative is aimed at simpler WordPress sites, creating and maintaining a Gatsby site isn’t necessarily going to be well-suited to beginners.

“As far as the target audience, I think any WordPress site that doesn’t have super fast moving content – like the average marketing site or documentation site is perfect for Gatsby,” Bahl said.

“Gatsby does have a ‘Build’ step, where it collects ALL the data needed for the entire site, then outputs the content in the static Gatsby site. So even changing a typo on a post would require the ENTIRE SITE to rebuild, which can take anywhere from a few seconds to several minutes, which may not be acceptable for sites that need content live FAST (like a newspaper).

“But for your average WordPress site, waiting two minutes for your changes to be live in production is acceptable. Many heavily cached WordPress sites already experience a delay in content being live anyway.”

Gordon said he doesn’t believe Gatsby is the right fit for all WordPress sites but for certain projects it “can be a really cool approach both in terms of development experience and gains in speed and security.”

The group is aiming to have its first themes released for WordCamp Miami in mid-March and plans to release more as they make new partnerships and see an actual demand. Gordon is actively looking for more theme shops to bring on board.

“Zac will be primarily maintaining the Gatsby themes, though I’ll help where I’m needed,” ThemeBeans founder Rich Tabor said. “We’re still in the very initial stages of development.

“Overall, it’s a super interesting idea. Static site generators are increasing in popularity and Gatsby is pretty much leading the pack in terms of performance and ease-of-use — both of which WordPress is not particularly well-known for (but is making strides to improve).”

14 Comments


  1. You all are killing it! Keep up the great work @ Zac Gordon, Jason Bahl, Rich Tabor, Muhammad Muhsin, Alexandra Spalato

    Report

    Reply

  2. This is a great news! Gatsby is very interesting and I’m planning to discover more about it.

    Report

    Reply

  3. Gatsby has a long way to go to have a publishing experience that rivals all-in-one WordPress.

    Try previewing your content. Or make a quick edit after it’s published. Or add a form to a page.

    The workflow is dev friendly but hostile to content creators

    Report

    Reply

    1. These are important points to consider, for sure. Some thoughts –

      Fast Builds:
      From what I’ve heard, the Gatsby team is working on supporting incremental builds in the future, so that when changes are made, only the static pages of the site that were affected would be regenerated. So that would make builds lightning fast. You’d be able to tell content creators: “After you update a post/page, you’ll be able to reload that page on the frontend and see your changes reflected there within seconds.”

      Previewing Changes:
      The Postlight Headless WordPress + React Starter Kit project has a way to view draft posts from the decoupled frontend React app. Here’s the code: https://github.com/postlight/headless-wp-starter/blob/master/frontend/pages/preview.js. I bet that could be adapted for Gatsby so that when a logged-in user visits a certain endpoint on the static site, the React app fetches the data for that draft post from the WordPress backend and displays it in exactly the same way it would display a published post. Sounds like setting that up could be a fun project! :)

      Adding Forms:
      Adding a form to a page can be done, as long as you use the WP REST API, WPGraphQL, or some other means to send the submitted form field values back to the server to be stored.

      So in summary, I agree that these things are harder to implement with Gatsby than what you get out of the box with a traditional, monolithic WP site, but I think they’ll get easier. And depending on the site, dealing with them may be worth it for the speed gains and other features that Gatsby brings to the table.

      Report

      Reply

    2. The idea of merging the world of static site generators and WordPress is appealing on many levels, and this development is refreshing. However, what you described are serious limitations, and also a huge amount of plugins would be incompatible with this approach.

      That’s why we created Strattic: it allows you to use WordPress as usual, no change in behavior, and we’re not tossing PHP out the door. But the production site on the live domain is generated as a static site so you also get all the benefits of a fast, very secure static site. (Plus a CDN, plus SSL for all, and more.)

      In any case, all these efforts contribute to bringing WP more in line with modern web development approaches, and it’s great. Looking forward to seeing where this project goes!

      Report

      Reply

  4. it lets them throw away the entire old school PHP based WordPress theming system

    I don’t understand this constant bashing of PHP as of late. WordPress is where it is thanks to the ease of PHP.

    Report

    Reply

    1. Because – I guess – React is all the rage now? Which it isn’t. It’s the new, popular, shiny thing that has people Oooing and ahhing. More FB assimilation as far as I’m concerned.

      Y’all will remember how well. NET did, right? 😉

      Report

      Reply

    2. This isn’t bashing PHP in any way. The source, WPGraphQL is built on PHP and empowers the WordPress server in great ways.

      This is decoupling concerns though. Letting the WordPress server do server things and letting a new stack of theme rendering do theme rendering things.

      It’s not a move _away_ from WordPress, but a marriage between WordPress and a new stack.

      Partly because, as Kevin said, it’s new and shiny, but also because it solves some real problems (speed/security) and improves (arguably) the developer experience.

      Report

      Reply

  5. OK.

    But what if i create booking forms or other non-static content?
    This means finding new ways to generate the data back in WP.

    That makes no sense at all.

    First we had html and

    Then dynamic languages. PHP, Javascript …

    Then CMS – in this case WordPress. With a bit of caching and code optimization, a WP page can be very fast.

    Yeah and today?
    html, javascript (unlimited frameworks), css (unlimited frameworks), node.js, webpack, graphql, CLI without end, etc.

    What do we do with it?
    We first build a WordPress page and then we pack the whole thing again in a framework to Gatsby and then pack Markdown again.

    Unfortunately that makes no sense at some point.

    To build a simple landing page you need html and css.
    Not more. Hardly anyone can still build a website with these simple tools today.

    It’s crazy what Web development comes up with to find fewer and fewer solutions that are simple.

    Report

    Reply

    1. Agreed. Sadly, web development is getting less and less accessible and fun each day.

      Report

      Reply

  6. I speed-tested their main website as well as their showcase sites. The showcase sites appear rather slow compared to many wordpress websites. Their own site is extremely fast although it does seem to be slow on all the speed tests.

    Report

    Reply

  7. I’m sure this is scratching a technical itch and more Gatsby themes sound great. But if you want a screaming fast WordPress site you could use a full page caching solution and be done.

    Report

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.