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).
Top comments (0)