https://github.com/ref-bit/graph-press
A simple web app to integrate Wordpress as Headless CMS with GraphQL and Reactjs.
https://github.com/ref-bit/graph-press
apollo graphql headless-cms headless-wordpress react reactjs tailwind tailwindcss wordpress
Last synced: about 1 month ago
JSON representation
A simple web app to integrate Wordpress as Headless CMS with GraphQL and Reactjs.
- Host: GitHub
- URL: https://github.com/ref-bit/graph-press
- Owner: Ref-Bit
- Created: 2020-06-12T16:41:42.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-06-12T17:01:49.000Z (over 5 years ago)
- Last Synced: 2025-01-18T04:29:11.070Z (about 1 year ago)
- Topics: apollo, graphql, headless-cms, headless-wordpress, react, reactjs, tailwind, tailwindcss, wordpress
- Language: JavaScript
- Size: 196 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Graph Press
A simple web app to integrate Wordpress as Headless CMS with GraphQL and Reactjs.
***
#### Built With
- [Wordpress](https://wordpress.org) - Wordpress as Headless CMS.
- [React.js](https://reactjs.org) - A JavaScript library for building user interfaces.
- [GraphQL](https://graphql.org/) - A query language for your API.
- [Tailwind CSS](https://tailwindcss.com) - A utility-first CSS framework for rapidly building custom designs.
#### Getting Started
- Install a new Wordpress on your local machine (please refer to readme.html in root directory for thorough Wordpress installation).
- Add this snippet in `/wp-content/themes/APPLIED_THEME_NAME/functions.php` to make a new custom post type supports graphql query
```
add_action('init', function() {
register_post_type('toaster', [
'public' => true,
'label' => 'Toasters',
'show_in_graphql' => true,
'graphql_single_name' => 'Toasters',
'graphql_plural_name' => 'Toasters'
]);
});
```
- Add the following plugins to `/wp-content/plugins`
- https://github.com/wp-graphql/wp-graphql
- https://github.com/wp-graphql/wp-graphiql
- https://wordpress.org/plugins/advanced-custom-fields
- https://github.com/wp-graphql/wp-graphql-acf
- Navigate to Wordpess Dashboard, add new field group `toasterMeta`, then:
- Connect it to `Toasters` post type.
- Toggle `Show in GraphQL` to `Yes` value.
- Assign `GraphQL Field Name` to `toasterMeta`.
- Add Fields, `Price` and `Weight` of field type `Number`.
- Navigate to Wordpess Dashboard and make new Toasters (preferably 3).
- Run `cd frontend` to enter frontend folder.
- Run `npm install && npm run start` to run the client-side.