Skip to content
A re-creation of the WordPress Twenty Nineteen theme in Gatsby, using WordPress/WPGraphQL as a backend. Non-production example code.
CSS JavaScript
Branch: master
Clone or download
Latest commit 760eb5c Aug 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src initial commit Aug 14, 2019
.gitignore initial commit Aug 14, 2019
.prettierrc initial commit Aug 14, 2019
LICENSE initial commit Aug 14, 2019
README.md Fix checkboxes. Aug 14, 2019
config.example.js initial commit Aug 14, 2019
gatsby-browser.js initial commit Aug 14, 2019
gatsby-config.js initial commit Aug 14, 2019
gatsby-node.js initial commit Aug 14, 2019
gatsby-ssr.js initial commit Aug 14, 2019
package-lock.json initial commit Aug 14, 2019
package.json initial commit Aug 14, 2019

README.md

Proof of Concept - Gatsby + Headless WordPress + Twenty Nineteen

An example site using that uses Gatsby and a headless WordPress installation to re-create the Twenty Nineteen theme.

Note: This is entirely intended to be a proof of concept/example of how Gatsby can be used to create a frontend for WordPress. It is not checked for stability or security (or even code quality), so use it at your own risk.

Features

  • Post templates
  • Category archives
  • Author archives
  • Comments
    • Static (server side) comment rendering
    • Dynamic (client side) comment rendering
    • Comment submissions
  • Uses WPGraphQL

To-Do

  • General cleanup
  • Better comments
  • Comment replies
  • Pagination
  • Gravatars/user icons

Requirements

  • NodeJS/NPM
  • Gatsby CLI
  • A WordPress installation with the WPGraphQL plugin installed and activated

Usage

Once again, this isn't intended to be a production-ready example. It's best used as a starting point for learning how to connect a WordPress backend to a Gatsby frontend. If you want to build it, do this:

  1. Clone the repo.
  2. Rename config.example.js to config.js.
  3. Modify config.js to point to your WordPress site as the source.
  4. Run npm install
  5. Run gatsby develop
  6. Navigate your browser to http://localhost:8000
  7. Use it to build your own Gatsby frontend for your WordPress site.

Attribution/Acknowledgments

  • This example uses CSS from WordPress' Twenty Nineteen theme, which is licensed under the GNU General Public License v2 or later.
  • Thanks to WPGraphQL for making a great GraphQL plugin for WordPress.
  • Shoutout to Gatsby for making an awesome static site generator.
You can’t perform that action at this time.