30th Aug 2021

How to integrate Gatsby in WordPress ?

Wordpress

Written By, Prachi Prajapati

Overview

In our previous blog, How Can a Designer Start a Project in Gatsby? we learned how to set up gatsby in the local system. Gatsby is used for generating pages from data stored in a WordPress backend. In this blog, we will learn how to integrate Gatsby into WordPress. We are going to use WordPress only for the backend and Gatsby will be generating and displaying our front end.

Install and setup WordPress and Gatsby

For WordPress : 

We’ll use WordPress, so you need some basic stuff to be ready.

  1. WordPress Installed and configured
  2. Phpmyadmin or any database
  3. And a web server like apache

If you have any questions regarding the configuration of WordPress you can refer to this link.

For Gatsby :

For Gatsby, You can install and set up Gatsby from the above article.

Install and configure gatsby-source-wordpress plugin

This plugin helps to connect WordPress with Gatsby. This plugin is used for fetching source data from WordPress with the help of WPGraphQL. This way is scalable and more efficient to connect Gatsby with WordPress from this plugin.

To install this plugin first you need to perform the following commands :

After the plugin is installed add the gatsby-source-plugin to “gatsby-config.js”.

For this, you can use the following code,

This code is used inside in a plugin as shown below :

index-js

Add WPGatsby plugin and WP GraphQL plugin

On your WordPress site, you need to download and activate these two plugins for connection with Gatsby.

For installing a WpGatsby plugin and WpGraphQL plugin go to the plugins on your WordPress site and click on add new.

plugin

Search the plugin name WPGatsby plugin and WPGraphQL and you will see the same image following and install and activate it. It is a free and open-source WordPress plugin.


graphql

Connect Gatsby with WordPress

Once you have specified the source path of the WordPress site in your gatsby.config.js file, you need to specify what data you need to be extracted from the WordPress site. But using GraphQL in Gatsby will get all the data from your WordPress site.

Once you have finalized the query you can also select what data you need to pull out from the WordPress site. After that, run the development web server and go to the URL: http://localhost:8000/___graphql to open the GraphQL editor.

Gatsby doesn’t create a page or post automatically, we need to fire a query for all WordPress pages/posts.

graphiql

Display posts and pages from WordPress

First of all, create some posts and pages on your WordPress site.

Display Pages:

For the pages displaying in specific lists add the following code in your GraphQL explorer,

For Display Post :

Now, you have created GraphQL queries that pull the data you selected, you’ll use a second query to create a list of blog post titles on your Gatsby site’s homepage. Here is what your home page component in src/pages/index.js should look like:

index-js

Similarly, you can add the same query for the pages also. For that, you need to just replace the queries posts with pages which we already covered.

To run the project in the terminal, perform the following command:

You can see the output below :

gatsbty-output

Conclusion

I hope that this blog helps you during Website Development to connect Gatsby with WordPress. You can also use gatsby-source-graphql instead of gatsby-source-wordpress. We will learn it in detail in our next blog.

Written By,

Web Designer at Yudiz Solutions Pvt. Ltd