In this blog, you will know about a new Gatsby WordPress Theme, that uses a decoupled WordPress architecture . You can publish post pages, set up menus , widgets from WordPress backend and this react theme will serve the WordPress content in the front end as a Single Page Application ( SPA ) . Now If you are wondering why we should build front end theme in React ? , there are many benefits:
- No Page refresh ( SPA )
- Fast performance so better user engagement.
- Better developer experience, using HMR ( Hot module Replacement ), GraphQL
This theme works offline so you have better user engagement and they can have this app on their mobile, without you hiring another developer to build a mobile app.
Check out the demo here:
- A Gatsby theme for WordPress, using Decoupled Architecture.
- Front end in React
- Backend in WordPress.
- Uses React with Gatsby ( Blazing Fast )
- PWA ( Works Offline )
- Image Optimization ( blur effect )
- GraphQL ( with wp-graphql on WordPress )
- Blog Page with Pagination
- Offline Search Feature
- Categories, Archive Page, Custom Home Page
- Custom Widgets, Menus
🚀 Set Up
.envand add your WordPress SITE_URL in
- Upload and activate all the plugins from wordpress/plugins folder of this repo, into your WordPress Site.
a. Clone the WordPress plugin Headless CMS in your WordPress plugin directory and activate it.
b. Clone and activate wp-graphql -test on ( v0.8.3 ) in WordPress plugin directory. c. Clone and activate wp-graphiql in WordPress plugin directory. d. Clone and activate wp-graphql-acf in WordPress plugin directory. e. Install and activate the ACF WordPress plugin in WordPress.
- You can also set text widgets in #HCMS Footer #1 and #HCMS Footer #2 under Appearance > Widgets in WordPress.
- Import all the ACF data from
wordpress/acf-datajson file of this repo, into WordPress by going to WordPress Dashboard > Custom Fields > Tools > Import
- Create a Home Page ( if there isn’t one already )and make sure you have a home page and Location rule is set to Home page.
- Add the ACF required data on the Home page from the WordPress Dashboard.
- If it isn’t already set your site title, description and logo from WordPress customizer.
Open the source code and start editing!
npm run dev
Your site is now running at
Note: You’ll also see a second link:
http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.
- Navigate into site’s directory.
yarn install # Run this for the first time. npm run dev # During development. npm run build # When ready for production.
- Signup on vercel.com
- Click on Import Project and then add the configurations.
- On vercel, make sure you add these from settings of the project:
npm i -g vercel
- Now in the project root run
- Add the following configurations
- build command:
npm run build
- output directory:
- development command:
npm run dev
- root directory: