Home

Awesome

Create Gatsby WordPress Publisher Theme

Gatsby Theme Publisher Screenshot

A Gatsby starter that has the Gatsby Theme Publisher installed and preconfigured.

For a full tutorial, please see our article on headless WordPress with Gatsby.

Example Sites

These sites all use the Publisher theme with WordPress as the backend.

Prequisites

Overview

  1. Clone this repo: git clone https://github.com/staticfuse/create-gatsby-theme-publisher.git
  2. cd into the folder cd create-gatsby-theme-publisher (You can change the project folder name, and theme name in package.json)
  3. Install dependencies yarn
  4. Install WPGraphQL plugin on your WordPress site
  5. Configure your site options in gatsby-config.js Explanation of the options is below
  6. Start the demo site gatsby develop
  7. Add your logo and customize the theme
  8. Publish to Netlify or any static host.

Adding Gatsby WordPress Theme Publisher to an existing Gatsby site

  1. yarn add @staticfuse/gatsby-theme-publisher or npm install @staticfuse/gatsby-theme-publisher
  2. In your gatsby-config.js :
module.exports = {
  siteMetadata: {
    title: 'Static Fuse',
    description: 'Headless WordPress with Gatsby FTW.',
    author: 'Scott and Justin',
    twitter: '@staticfuse',
    siteUrl: `https://staticfuse.com`,
  },
  plugins: [
    {
      resolve: `@staticfuse/gatsby-theme-publisher`,
      options: {
        starterPages: true, // add a customizable home, about, and contact page
        mailChimpEndpoint: 0, // https://www.gatsbyjs.org/packages/gatsby-plugin-mailchimp/#mailchimp-endpoint
        dynamicComments: 1, // enable comments
        gaTrackingId: 0, // google analytics tracking
        wordPressUrl: `https://mywpinstall.com`, // The url of your WordPress install
        blogURI: '/blog' // The page to display your posts
      },
    },
  ],
}

Publisher Theme Options

For theme options, customization, and more, please view the main readme file here.