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:

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

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

Leave a Reply