
GatsbyJS v2 vs Wordpress CMS
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-starterNow move into the newly created directory and run npm install
cd wordpress-headless-starter
npm installNext, 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.
