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.
- WordPress Installed and configured
- Phpmyadmin or any database
- And a web server like apache
If you have any questions regarding the configuration of WordPress you can refer to this Installation 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 :
npm install gatsby-source-wordpress
After the plugin is installed add the gatsby-source-plugin to “gatsby-config.js”.
For this, you can use the following code,
{
resolve: `gatsby-source-wordpress`,
options: {
/*
* The base URL of the WordPress site without the trailing slash and the protocol. This is required.
* Example : 'demo.wp-api.org' or 'www.example-site.com'
*/ baseUrl: `localhost/wordpress-demo`,
// The protocol. This can be http or https.
protocol: `http`,
// Indicates whether the site is hosted on wordpress.com
hostingWPCOM: false,
// If useACF is true, then the source plugin will try to import the WordPress ACF Plugin contents.
useACF: true,
},
},This code is used inside in a plugin as shown below :
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.
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.
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.
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,
query {
allWordpressPage {
edges {
node {
id
title
excerpt
slug
date(formatString: "MMMM DD, YYYY")
}
}
}
}
For Display Post :
{
allWordpressPost(sort: { fields: [date] }) {
edges {
node {
title
excerpt
slug
}
}
}
}
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:
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:
Gatsby develop
You can see the output below :
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.
You may also like
WooCommerce: Boost conversion with Pre-Sales activities
Conversion means users who are converted from visitors to customers for your e-commerce website. You...
WooCommerce: Conversion rate
As per today’s situation, about 5+ million e-commerce websites are using the WooCommerce platform. To survive and thrive, you need to know where you stand in this competitive and crowded community. ...
Introducing Twenty Twenty-Two – first default block theme!
The WordPress default theme twenty twenty-two with WordPress...
