An unopinionated starter for Gatsby and WordPress.

Associated Blog Post:

Install Flywheel Local and set up a new WordPress site

  1. Download Flywheel Local and spin up a new local WordPress Site.
  2. Install the Headless WordPress theme in the wp directory of this repo.
  3. Install the following plugins:
  • WP Gatsby
  • WP GraphQL
  • Current versions of these plugins (at the time of writing the associated blog post) are available in the wp directory.
  1. Import sample .xml content from the wp directory using the “WordPress Importer” plugin which is available by going to “Tools > Import”. If you don’t want to import content then you can simply publish the required Pages (Home, About, Contact, Thanks), Posts and Custom Posts yourself. You will also need to add “Featured Images” to your pages and posts if you want that to show

Configure Gatsby Source WordPress

  1. Add your WordPress website url to gatbsy-config.ts.
  2. Open the Gatsby project and run the following command: yarn && yarn develop (or the npm alternative).

Start Developing

  1. Start developing. Navigate into your new site’s directory and start it up. cd my-default-starter/ gatsby develop
  2. Open the source code and start editing! Your site is now running at http://localhost:8000! Note: You’ll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial. Open the my-default-starter directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!