Gatsby

How to Connect Gatsby to WordPress

How to Connect Gatsby to WordPress

Gatsby is a blazing-fast website framework for React. It allows developers to build React-based websites within minutes.

WordPress

WordPress is a free and open-source content management system written in PHP and paired with a MySQL or MariaDB database. Features include a plugin architecture and a template system, referred to within WordPress as Themes.

Integrate Gatsby with WordPress

Install gatsby-source-wordpress package

npm install gatsby-source-wordpress

gatsby-config.js file

add the gatsby config file in the following code

plugins: [
...
{
    resolve: `gatsby-source-wordpress`,
    options: {
        // Specify the URL of the WordPress source
        baseUrl: `localhost:8888/wordpress`,
        protocol: `http`,
        // Indicates if a site is hosted on WordPress.com
        hostingWPCOM: false,
        // Specify which URL structures to fetch
        includedRoutes: [
          '**/posts',
          '**/tags',
          '**/categories'
        ]
    }
}

Now connect your gatsby website and WordPress.

Here is an example of the GraphQL API query

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

export default ({ data }) => {
  return (
      {data.allWordpressPost.edges.map(({ node }) => (
        <div>
          <p>{node.title}</p>
        </div>
      ))}
  )
}
export const pageQuery = graphql`
  query {
    allWordpressPost(sort: { fields: [date] }) {
      edges {
        node {
          title
          excerpt
        }
      }
    }
  }

Hope this helps.

Share On:

Related Posts

Company
Products
Services
India
All rights reserved ©2015 – 2025 InfyOm Technologies
Linkedin-in Facebook-f X-twitter Github Youtube Instagram Skype