Skip to main content

Go Headless with WordPress and Express.js

1. Making WordPress Headless with WPGraphQL

1.1. Installing the Necessary Headless WordPress Plugins

  • WPGraphQL
  • Yoast SEO
  • WPGraphQl Yoast SEO Addon
  • Advanced Custom Fields
  • WPGraphQL for Advanced Custom Fields

If you have installed these plugins, you should be able to visit the GraphiQL IDE in your WordPress admin panel. Now we can get started on building a server to connect with it.

1.2. Setting Up Our Headless WordPress GraphQL Endpoint

In our WordPress admin console, navigating to WPGraphQL settings allows us to set the slug for our endpoint, which defaults to ‘graphql,’ and provides us with the endpoint we will query to access our WP data:

WPGraphQL settings for using headless WordPress with GraphQL
WPGraphQL Settings Page

Since we’ll be passing this endpoint to our queries on the server, I’m setting it up in my .env file as a variable: WP_GRAPHQL_ENDPOINT. If I wanted to protect my WP data, I could set up authentication in the WPGraphQL settings, but since everything on my WordPress is publicly available anyways, I am not worried about that at this point.

2. Building our Express website

2.1. Structuring Our Project

You can initialize your Express project just as you like. If like me, you like working with Typescript, Eslint & Prettier, then you can use this boilerplate by Teric Cabrel.

Create server for node and client folder for browser javascript.

2.2. Installing Dependencies

To be able to query data from our Headless WordPress, we need to install:

  • A Template Engine for dynamically inject JavaScript into our HTML templates.
  • Packages to send GraphQL queries from our server

2.3. Querying With GraphQL in Express

2.4. Injecting WordPress Data Into Pug Templates

Mystro Ken Avatar

Mystro Ken

Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Follow me on Twitter