Using gatsby-source-wordpress-experimental to create Gatsby site

In this blog you will learn about how to create a Gatsby site, that uses WordPress in the backend and React in the front-end using Gatsby static site generator.

The gatsby plugin gatsby-source-wordpress-experimental is currently in the development stage and should be part of upcoming gatsby-source-wordpress v4 . So let’s try it out.

WordPress Set up

Install these two plugin in WordPress:

• wp-graphql
• wp-gatsby

Basic Setup

• Create Menu from customizer
• Create a home page, Blog page and other pages in WordPress, if you haven’t already.
• And set it as home page from the customizer

Installing Gatsby

Install gatsby cli

 npm i -g gatsby-cli

Install gatsby-source-wordpress-experimental

 gatsby new wordpress-v4 https://github.com/TylerBarnes/using-gatsby-source-wordpress-experimental

Start your project

gatsby develop

Screenshot of the home page:

File structure of gatsby-source-wordpress-experimental

• It uses gatsby function called createPages(), to create (post and page) pages using the templates from the following directories:
  • /src/templates/single/
  • It uses the templates/single/Page.js template to serve all pages including the home page ( which internally uses components/template-parts/blog-post.js )
  • It uses the template/single/Post.js template to serve all the posts
• components/template-parts/blog-post.js
  • has <Layout> component that includes
    • <Header>
    • <Menu>
• <Menu>
  • Replace main-menu here with your Menu Name in wpMenu(slug: { eq: "main-menu" })
  • So for example your menu name is Primary Menu like below then put eq: "primary-menu"

Now all these menus will show in the front-end gatsby site

• It also creates a separate blog page at /blog url where it lists down all the blogs including pre and next.
• This Blog page uses the template from /templates/index.js