Gatsby Starters & Templates Logo Gatsby Starters & Templates
Gatsby Wp Themes screenshot

Gatsby Wp Themes

Author Avatar Theme by Imranhsayed
Updated: 18 Jan 2021
10 Stars

Gatsby WordPress Theme

Github

Categories

React

Overview

The Gatsby WP themes is an active project that aims to provide a Gatsby theme for WordPress with a Decoupled Architecture. The front end of the theme is built using React, while the backend is built using WordPress. It can be used as a boilerplate for building Gatsby websites connected to WordPress. The theme includes several features such as React with Gatsby for improved performance, PWA support for offline functionality, image optimization with blur effect, GraphQL integration with wp-graphql on WordPress, custom widgets, menus, and social elements, support for Yoast SEO with og tags, and more.

Features

  • Uses React with Gatsby for improved performance
  • Provides PWA functionality for offline use
  • Includes image optimization with blur effect
  • Integrates with GraphQL using wp-graphql on WordPress
  • Supports custom widgets, menus, and social elements
  • Includes Google Analytics integration
  • Supports Yoast SEO with og tags

Installation

To set up the Gatsby WP themes, follow these steps:

  1. Fork/clone the repository
  2. Install dependencies by running yarn install
  3. Set up Gatsby environment variables by creating a file called .env in the site directory and adding the following variables:
    • WORDPRESS_SITE_URL=https://example.com
    • GATSBY_SITE_URL=https://example.com
    • GOOGLE_TAGMANAGER_ID=xx
    • FB_APP_ID=xxx
  4. Create two additional files called .env.development and .env.production in the site directory and add your WordPress site URL. The environment variables from these files will be consumed by Apollo client on the client side.
  5. On your WordPress site, download, upload, and activate all the plugins from the wordpress/plugins folder of the repository.
  6. Set the Header menu as HCMS Header Menu and the Footer menu as HCMS Footer Menu.
  7. Configure text widgets in #HCMS Footer #1 and #HCMS Footer #2 under Appearance > Widgets in WordPress.
  8. Create a Home Page (if it doesn’t already exist) with the title “Home” and page slug “home”.
  9. Set your site title, description, and logo from the WordPress customizer.
  10. For the home page carousel, upload product category images with dimensions 1900x600.

To start development, navigate into the site’s directory and run gatsby develop. The site will be running at http://localhost:8000. Additionally, you can use the GraphiQL tool at http://localhost:8000/___graphql to experiment with querying your data.

For Storybook, use the following commands:

  • To run Storybook: cd package/gatsby-wp-themes and npm run storybook
  • To add/remove a new package to the site folder: yarn workspace site add package-name or yarn workspace site remove package-name
  • To add/remove a new package to the gatsby-woocommerce-theme folder: yarn workspace gatsby-woocommerce-theme add package-name or yarn workspace gatsby-woocommerce-theme remove package-name

Summary

The Gatsby WP themes project offers a powerful solution for building Gatsby websites connected to WordPress. With a focus on performance, the theme utilizes React with Gatsby and includes features such as PWA support, image optimization, GraphQL integration, and more. The installation process is well-documented and includes setting up environment variables, configuring WordPress plugins, and creating necessary pages and menus. Overall, the Gatsby WP themes project provides a solid foundation for building flexible and performant websites combining the power of Gatsby and WordPress.