https://github.com/bgoonz/gatsbywordpress
A gatsby project using wordpress as a cms
https://github.com/bgoonz/gatsbywordpress
gatsby reactjs tailwindcss wordpress
Last synced: 3 months ago
JSON representation
A gatsby project using wordpress as a cms
- Host: GitHub
- URL: https://github.com/bgoonz/gatsbywordpress
- Owner: bgoonz
- Created: 2023-10-11T15:27:35.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-10-12T17:40:16.000Z (over 2 years ago)
- Last Synced: 2025-06-04T10:10:38.729Z (about 1 year ago)
- Topics: gatsby, reactjs, tailwindcss, wordpress
- Language: JavaScript
- Homepage:
- Size: 1.16 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Gatsby (Wordpress as CMS)
## Getting Started:
**Setup**
> `npx gatsby new the-gatsby-garadge https://github.com/tomphill/gatsby-wordpress-gutenberg-starter`
> **Install the gatsby cli**
> `npm install -g gatsby-cli`
**Running the dev server**
> `gatsby develop`
#### Routes:
- In `/src/pages` any file we create will automatically be a route.
- By default our home page will be `index.js` in `/src/pages`
```js
import * as React from "react";
const IndexPage = () => {
return (
Home Page
);
};
export default IndexPage;
export const Head = () => Home Page;
```
- In our version the h1 will not appear as large text because of the tailwind resets.
- In each of our page components we can export a Head component that will be used to set the title of the page.
```js
export const Head = () => (
<>
This is the test Page
>
);
```
**Graphql Interface can be found at:**
- [http://localhost:8000/\_\_\_graphql](http://localhost:8000/___graphql)
**Test Query to see we are connected to Wordpress**
```graphql
query MyQuery {
allWpPage {
nodes {
title
blocks
}
}
}
```
---
---
## Creating Pages:
> In the root directory of our project we can create a `gatsby-node.js` file.
- We can export a function that will create pages based on the pages in our Wordpress site.
```js
exports.createPages = async ({ actions, graphql }) => {};
```
**Basic Usage**
> gatsby-node.js
```js
const path = require("path");
exports.createPages = async ({ actions, graphql }) => {
const pageTemplate = path.resolve(`./src/templates/page.js`);
const { createPage } = actions;
const { data } = await graphql(`
query AllPagesQuery {
allWpPage {
nodes {
blocks
databaseId
uri
}
}
}
`);
for (let i = 0; i < data.allWpPage.nodes.length; i++) {
const page = data.allWpPage.nodes[i];
createPage({
path: page.uri,
component: pageTemplate,
});
}
};
```
> /templates/page.js
```js
import React from "react";
function page() {
return
This is a page template;
}
export default page;
```
#### Render Wordpress Blocks in Gatsby:
```js
import React from "react";
import {
BlockRendererProvider,
BlockRenderer,
getStyles,
getClasses,
} from "@webdeveducation/wp-block-tools";
function Page(props) {
console.log(props);
return (
{
console.log("Render Component:", block);
switch (block.name) {
case "core/media-text":
const content = ;
return (
{block.attributes.mediaPosition === "right" && (
{content}
)}
This will be the image
{block.attributes.mediaPosition !== "right" && (
{content}
)}
);
default:
return null;
}
}}
>
);
}
export default Page;
```
#### Using Gatsby Image:
- The gatsby image plugin expects specific data to be passed into it for it to render correctly.
**Setup for gatsby image in `gatsby-node.js`**
```js
for (let i = 0; i < data.allWpPage.nodes.length; i++) {
const page = data.allWpPage.nodes[i];
let blocks = page.blocks;
blocks = assignIds(blocks);
blocks = await assignGatsbyImage({
blocks,
graphql,
coreMediaText: true,
});
createPage({
path: page.uri,
component: pageTemplate,
context: {
blocks: blocks,
},
});
}
```
> In `page.js`
```js
```