Gatsby and WordPress: Creating WordPress Page Types

Photo by Billy Huynh on Unsplash

WordPress Pages are another Post Type, they differ from Post Post(!) Types insofar that they aren’t time-related or be assigned categories and tags. Generally, they’re used for navigational items like About, Contact or Archive pages.

We’re going to update our gatsby-node.js to also pull in WordPress Pages so we can add an About link in our footer.

  const createWpPages = new Promise((resolve, reject) => {
    const query = graphql(`
      {
        allWordpressPage {
          edges {
            node {
              id
              slug
            }
          }
        }
      }
    `)

    query.then(result => {
      if (result.errors) {
        console.error(result.errors)
        reject(result.errors)
      }

      const pageEdges = result.data.allWordpressPage.edges
      pageEdges.forEach(edge => {
        createPage({
          path: `/${edge.node.slug}`,
          component: path.resolve(`./src/templates/page.js`),
          context: {
            id: edge.node.id,
          },
        })
      })

      resolve()
    }) // query.then
  }) // createWpPages

  return Promise.all([createWpPosts, createWpPages])
} // createPages

It’s almost identical to our createWpPosts bar a few places such as query and template.

Here’s the page template src/templates/pages.js

import React from 'react'
import { graphql } from 'gatsby'
import Layout from '../components/layout'

export default ({ data }) => {
  const page = data.wordpressPage
  return (
    <Layout>
      <div>
        <h1 dangerouslySetInnerHTML={{ __html: page.title }} />
        <div dangerouslySetInnerHTML={{ __html: page.content }} />
      </div>
    </Layoqut>
  )
}

export const pageQuery = graphql`
  query($id: String!) {
    wordpressPage(id: { eq: $id }) {
      title
      content
    }
  }`

Finally, let’s update our footer (which lives in the Layout component src/components/layout.js)

<footer>
© 2018, Built with <a href="https://www.gatsbyjs.org">Gatsby</a> | <a href="/about">About Us</a>
</footer>

Checkpoint: Let’s talk about us

If we restart Gatsby, and we’ll see a new link in our site footer.

Clicking on it takes us to our newly created WordPress Page!

If you got stuck, you can check out the following Git hash: ce6cc022a881e813af31279ff857f908ecc599f4

To go to the next part of the series, click on the grey dot below which is next to the current marker (the black dot).

Blog

Gatsby and WordPress: Creating WordPress Page Types

Mark Sta Ana

Checkpoint: Let’s talk about us

Join Our Newsletter. No Spam, Only the good stuff.

Related