In this article, we are creating Gatsby and WordPress category page and a page for displaying WordPress page information.
This article is the fourth article of the Gatsby and WordPress API integration series, and the list of previous articles is given below.
Chapter 1: Building a Powerful Blog: Mastering the Art of Gatsby and WordPress Integration
Chapter 2: Building a Stunning Gatsby and WordPress Post Detail Page with GraphQL V2.29.0 API
Check these articles as well.
Now, In chapter 3, we created a page for showing a post list based on its tags, in a similar way you can show the posts based on their categories.
Gatsby and WordPress Category Page
Let’s create a page category.js inside the templates folder.
Here is the code for this category. js page or we can say template.
import React from "react";
import { graphql } from "gatsby";
import { Link } from "gatsby";
export default function CategoryPage({ data }) {
const category = data.wpCategory;
const posts = data.allWpPost.edges;
return (
<div className="container">
{posts.map(({ node }) => (
<div key={node.id}>
<img width="50" height="50" className="blog-post-image" src={node.featuredImage.node.sourceUrl} alt={`Blog Post ${node.id}`} />
<h4 className="blog-post-title">
<Link to={`/${node.slug}`}>{node.title}</Link></h4>
<p className="blog-post-excerpt" dangerouslySetInnerHTML={{ __html: node.excerpt }} ></p>
</div>
))}
</div>
)
}
export const query = graphql`
query($slug: String!) {
wpCategory(slug: { eq: $slug }) {
name
}
allWpPost(filter: { categories: { nodes: { elemMatch: { slug: { eq: $slug } } } } } limit: 5) {
edges {
node {
id
title
excerpt
slug
featuredImage {
node {
sourceUrl
}
}
}
}
}
}
`;
In this file, similar to the previous article tab.js file, we are fetching the data with GraphQL query, and the Posts result is filtered on the basis of the category slug or URI which we are clicking on the index file.
Updating Index.js file for categories clickable links
Inside the Pages folder, we have an index.js file, I am updating this file with clickable category links so that on the home page of application we can click on a category, and for that category, we can display posts on the category.js template.
Below you can see the code for the index.js file.
import * as React from "react";
import {Link, graphql} from 'gatsby';
const IndexPage = ({data}) => {
const categories = data.allWpCategory.edges;
const pages = data.allWpPage.nodes;
const posts = data.allWpPost.edges;
console.log("alldata",data)
return (
<>
<div class="container">
<h1>Home Page</h1>
<h2>Category List</h2>
<ul>
{categories.map(list=>(
<li><Link to={`/category/${list.node.slug}`} className="category-text">{list.node.name}</Link></li>
))}
</ul>
<h2>Pages List</h2>
<ul>
{pages.map(list=>(
<li>{list.title}</li>
))}
</ul>
<h2>Posts List</h2>
<ul>
{posts.map(list=>(
<li>
<Link to={list.node.slug}>
{list.node.title}
</Link>
</li>
))}
</ul>
</div>
</>
)
}
export default IndexPage;
export const query = graphql`
query {
allWpPost{
edges {
node {
id
title
excerpt
slug
featuredImage {
node {
sourceUrl
}
}
}
}
}
allWpCategory {
edges {
node {
id
name
slug
}
}
}
allWpPage {
nodes {
id
title
uri
}
}
}
`;
You can see the UI for this index.js file below.
Now, let’s update a file, which will generate these static pages for each category inside the public folder on the build process.
Updating gatsby-node.js file for generating static category pages
You need to update your gatsby-node.js file, without this nothing going to work.
Update this code inside your gatsby-node.js file.
const categoryResult = await graphql(`
query {
allWpCategory {
edges {
node {
id
slug
}
}
}
}
`);
const categories = categoryResult.data.allWpCategory.edges;
categories.forEach(({ node }) => {
createPage({
path: `/category/${node.slug}`,
component: require.resolve("./src/templates/category.js"),
context: {
slug: node.slug,
},
});
});
Put this code inside this createPages method.
In the above code, we have a GraphQL query that is fetching all the categories from the WordPress API, and we have defined variable categories, to get all the data from the API response.
Now, inside the createPage function, we have a path and component, and context.
path for the link where the page will open, component for the file, which will display the data after opening the link mentioned in the path property, and inside context we will define the slug for each WordPress category.
After updating any core file or after creating any new file, you need to run the gatsby develop command again inside your terminal.
Now, Here is the output of the category file, after clicking on the category link on the home page.
Gatsby and WordPress Pages Detail Page
Firstly, we will add links to pages on the home page, here is the code update for index.js file.
Update this specific section inside index.js file
<ul>
{pages.map(list=>(
<li><Link to={list.uri}>{list.title}</Link></li>
))}
</ul>After changing this specific code, you can see, now page names are clickable.
Now, create a file singlePage.js inside the templates, to display page information.
import React from "react";
import { graphql } from "gatsby";
const SinglePage = ({ data }) => {
const page = data.wpPage;
return (
<>
<h1>{page.title}</h1>
<div dangerouslySetInnerHTML={{ __html: page.content }} />
</>
)
}
export default SinglePage;
export const query = graphql`
query($id: String!) {
wpPage(id: { eq: $id }) {
title
content
}
}
`;This above GraphQL query is fetching page detail based on its id, and returning its title and content.
Now, inside config-node.js file, we need to update the code for static file generation for pages.
Here are the changes to update inside the file, add this code inside createPages function.
const pageResult = await graphql(`
query {
allWpPage {
nodes {
id
uri
}
}
}
`);
const pages = pageResult.data.allWpPage.nodes;
pages.forEach((page) => {
createPage({
path: page.uri,
component: require.resolve("./src/templates/singlePage.js"),
context: {
id: page.id,
},
});
});Similar to a category, all the code pages will remain inside this file.
Inside the createPages function, and for both categories and pages, we will run a forEach loop and createPage function to generate static files.
Now, again you have to stop your terminal and re-run it with the command gatsby develop.
Here is the webpage that will open after clicking on the About page from the home page.
Thank you for Reading this article, Till this article we have learned a lot about Gatsby and WordPress API integration.
We have covered all the Major parts like posts, pages, categories, and tags of WordPress and integrated them inside the Gatsby with GraphQL API.
Don’t forget to check the previous articles. Happy Coding 🙂
