Gatsby is now a day’s roar in the progressive web app. In this post, we will develop a workflow to integrate Gatsby with WordPress.

To integrate WordPress with Gatsby, the first step is set pretty permalink in WordPress. This enables us to use RESTful API from Gatsby app.

To develop this, I use these plugins

• https://github.com/iamtimsmith/wp-trigger-netlify-build
• https://wordpress.org/plugins/wp-api-menus/
• https://wordpress.org/plugins/advanced-custom-fields/
• https://github.com/airesvsg/acf-to-rest-api

These plugins functionality will develop in the future. Let’s develop basic
Get gatsby-cli with npm

npm install -g gatsby-cli

After install gatsby-cli, go-to the destination folder where gatsby application build. Here, get gatsby starter default project by

gatsby new gatsby-wp

After getting this project, lookup folders and files which are really helpful.
After lookup our project, let’s see which we building.

gatsby develop

This will run our app at localhost:8000 in the browser and it looks like

After get this, connect gatsby with WordPress. Install gatsby-source-wordpress and gatsby-plugin-sitemap

npm install gatsby-source-wordpress gatsby-plugin-sitemap

Then, open gatsby-config.js file in the root and configure gatsby-source-wordpress plugin. Finally, gatsby-config.js file at this point has the following code

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-sitemap`,
    {
      resolve: "gatsby-source-wordpress",
      options: {
        // I have created a dummy site for us to use with the plugins we discussed
        baseUrl: "localhost/gatsby-wp/",
        protocol: "http",
        hostingWPCOM: false,
        // We will be using some advanced custom fields
        useACF: true,
        acfOptionPageIds: [],
        verboseOutput: false,
        perPage: 100,
        searchAndReplaceContentUrls: {
          sourceUrl: "http://localhost/gatsby-wp/",
          replacementUrl: "http://localhost:8000",
        },
        // Set how many simultaneous requests are sent at once.
        concurrentRequests: 10,
        includedRoutes: [
          "**/categories",
          "**/posts",
          "**/pages",
          "**/media",
          "**/tags",
          "**/taxonomies",
          "**/users",
        ],
        excludedRoutes: [],
        normalizer: function({ entities }) {
          return entities
        },
      },
    },

    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // 'gatsby-plugin-offline',
  ],
}

To test it works, restart Gatsby. Stop its execution, press ctrl+C. After halt Gatsby, again command gatsby develop and open localhost:8000/__graphql