We’ve Re-Created WordPress’ Twenty Nineteen Theme with Gatsby
Tags: wordpress, design, github
Published: 2019-08-15 13:26:01

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Leveraging WordPress' Strengths</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For example, a frontend developed with <a href="https://www.gatsbyjs.org" target="_blank" rel="noreferrer noopener" aria-label="Gatsby (opens in a new tab)">Gatsby</a> 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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Our Solution: WordPress + Gatsby</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:core-embed/twitter {"url":"https://twitter.com/TheJeffMatson/status/1161659005208530944","type":"rich","providerNameSlug":"twitter","className":""} -->
<figure class="wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter"><div class="wp-block-embed__wrapper">
https://twitter.com/TheJeffMatson/status/1161659005208530944
</div></figure>
<!-- /wp:core-embed/twitter -->

<!-- wp:paragraph -->
<p>In this example proof of concept, the Twenty Nineteen theme has been re-created using the original theme's CSS files.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can find my <a href="https://github.com/northstack/gatsby-wordpress-twenty-nineteen" target="_blank" rel="noreferrer noopener" aria-label="re-creation of the Twenty Nineteen theme with Gatsby (opens in a new tab)">re-creation of the Twenty Nineteen theme with Gatsby</a> on GitHub.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>How It Works</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Upon initializing a Gatsby build, existing content from a WordPress source (via the <a href="https://www.wpgraphql.com/" target="_blank" rel="noreferrer noopener" aria-label="WPGraphQL (opens in a new tab)">WPGraphQL</a> WordPress plugin) is automatically pulled and built using various templates for posts, pages, archives, etc.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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!</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>What about dynamic content?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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 <a href="https://graphql.org/" target="_blank" rel="noreferrer noopener" aria-label="GraphQL (opens in a new tab)">GraphQL</a> 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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Getting a Test Drive</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you want to give it a try for your own projects, you can clone or fork the <a rel="noreferrer noopener" aria-label="example repository on GitHub (opens in a new tab)" href="https://github.com/northstack/gatsby-wordpress-twenty-nineteen" target="_blank">example repository on GitHub</a>. Just please be aware that this repository is provided as an example <strong>proof of concept</strong> and <strong>isn't currently intended to run as a production site</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For more information on how to build the example project, take a look at the instructions within the <a href="https://github.com/northstack/gatsby-wordpress-twenty-nineteen/blob/master/README.md" target="_blank" rel="noreferrer noopener" aria-label="readme file (opens in a new tab)">readme file</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Love The Idea? Here's How You Can Help</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For bugs reports or enhancements, feel free to <a href="https://github.com/northstack/gatsby-wordpress-twenty-nineteen/issues" target="_blank" rel="noreferrer noopener" aria-label="file an issue on GitHub (opens in a new tab)">file an issue on GitHub</a> or submit a pull request.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Bonus: Check Out These Other Great Open Source Projects</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here are a few other open source projects that use a Gatsby frontend with a WordPress source:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a rel="noreferrer noopener" aria-label="Porting the Twenty Nineteen Theme to Gatsby (opens in a new tab)" href="https://javascriptforwp.com/porting-the-twenty-nineteen-wordpress-theme-to-gatsby/" target="_blank">Porting the Twenty Nineteen Theme to Gatsby</a> on JS For WP</li><li><a rel="noreferrer noopener" aria-label="WPGraphQL Example Blog (opens in a new tab)" href="https://github.com/wp-graphql/gatsby-wpgraphql-blog-example" target="_blank">WPGraphQL Example Blog</a> by the WPGraphQL team</li><li><a href="https://github.com/progital/gatsby-theme-wp-source-one" target="_blank" rel="noreferrer noopener" aria-label="gatsby-theme-wp-source-one (opens in a new tab)">gatsby-theme-wp-source-one</a> by @progital on GitHub</li></ul>
<!-- /wp:list -->