GatsbyJS v2 vs Wordpress CMS (Credit: GatsbyJS website)

GatsbyJS v2 vs Wordpress CMS

Luke Secomb
Sep 6, 2018 · 3 min read

WordPress is a very well-known and widely used Content Management System. It boasts a user-friendly interface and is welcoming to new users of the platform. There is one caveat to Wordpress, it isn’t always super quick to load. And that’s where GatsbyJS comes in.

In this guide, we’ll walk through setting up a site using Wordpress as a Headless CMS. This will allow you to easily port over-current websites and/or set up new websites using an already familiar workflow on the CMS side.

Setup

Before we jump into GatsbyJS, we need to make sure our Wordpress site is ready to be queried. Start by making sure you have a few test posts to make sure it is all working. You need to install a couple Wordpress plugins if you are using ACF, and wish to query those endpoints. (specific plugins are discussed below).

Now let's get started with GatsbyJS. Firstly, open up the terminal window and run the following to create a new site. This will create a new directory called `wordpress-headless-starter` that contains the starter site. You can change the wordpress-headless-starter to be whatever you like.

gatsby new wordpress-headless-starter https://github.com/lukethacoder/wordpress-headless-starter

Now move into the newly created directory and run npm install

cd wordpress-headless-starter
npm install

Next, you need to edit the configuration to point to your WordPress site. Do this by editing the `gatsby-config.js` file and replacing the `baseUrl`.

plugins: [
{
resolve: ‘gatsby-source-wordpress’,
options: {
// The base url to your WP site.
baseUrl: “dev-gatsbyjswp-pantheonsite.io”,
// WP.com sites set to true, WP.org set to false
hostingWPCOM: false,
// The protocol. This can be http or https
protocol: ‘http’,
// Use ‘Advanced Custom Fields’ Wordpress plugin
useACF: false,
auth: {},
// Set to true to debug endpoints on ‘gatsby build’
verboseOutput: false,
},
// additional plugins go here
},
]

Now whip open your favourite terminal run `gatsby develop` to start the Gatsby development server. Once the server is running, it will display local development address. It's typically `localhost:8000`. Open in your browser of choice and you should be good to go.

If you get errors, double check you have posts in your WordPress site and double check the `baseUrl`. Other errors may stem from the use of ACF which we will cover below.

GraphQL queries will be made within the new `<StaticQuery/>` component introduced in GatsbyJS v2. Example code is shown below.

<StaticQuery 
query={
graphql`
allWordpressPost {
edges {
node {
id
acf {
user_title
user_custom_image
}
}
}
}
`}
render={data => (
<>
// access data data.allWordpressPost....
<img src={data.allWordpressPost.edges.node.acf.user_custom_image}/>
<h1>{data.allWordpressPost.edges.node.acf.user_title}</h1>
</>
)}
/>

Advanced Custom Fields

The `gatsby-source-wordpress` plugin supports the use of ACF. Before editing anything in Gatsby you must first install the Advanced Custom Fields plugin and the ACF to RestAPI plugin. You may also need to install the WP API Menus plugin if you wish to use Wordpress Menus.

Head back to your Gatsby site, in `gatsby-config.js`, you must set `useACF` to `true`. You will now be able to query ACF fields as shown below. Your fields will be unique to your site as per your Wordpress ACF setup.

query {
allWordpressPost {
edges {
node {
id
acf {
user_title
user_custom_image
}
}
}
}
}

GraphQL Sorting and Filtering

If you wish to either sort and/or filter your posts, you can do so using the `sort` field and the `filter` field shown below.

This query sorts the blogposts by the `date` field:

query {
allWordpressPost(sort: {fields: [date] }) {
edges {
node {
id
title
slug
date(formatString: “MMMM DD, YYYY”)
}
}
}
}

filter: {title: {eq: “SiteLogo”}}

This query filters the blog posts by the `title` field to get the posts matching the title of `Post Number One`:

query {
allWordpressPost(filter: {title: {eq: “Post Number One”}}) {
edges {
node {
id
title
date(formatString: “MMMM DD, YYYY”)
}
}
}
}

And that’s it

You have just setup the basic configuration for your Gatsby website, using WordPress as a Headless CMS. You can view the source code for the starter here.

Want to dynamically create posts pages in GatsbyJS? Click here to learn how the magic works.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade