WPGatsby

Gatsby + WordPress + Chakra-UI

How it works:

Grabs existing WordPress content and generates an equivalent static page for each post, page, taxonomy, author, etc.

Demo: https://wpgatsby.dev/

Features:

• 🚀 Responsive, fast-loading, animated
• 🎨 Customizable theme with Chakra-UI
• ⭐ Custom landing page
• 🌙 Dark-mode support
• 💌 Built-in newsletter form with MailChimp
• ⚡ Minimal WordPress setup
• 📄 Support for post, page, category, tag and author types

🚀 Quick start

1. Install.

   Use the Gatsby CLI (install instructions) to create a new site, specifying the wpgatsby starter.

   # Install wp-gatsby:
   gatsby new my-app https://github.com/ansmlc/wpgatsby

2. Configure WordPress.

• Install and activate these plugins in a live WordPress instance:

  • WPGraphQL
  • WPGatsby

  ℹ️ How-to: Setup Data, Content & Styles

3. Configure GraphQL.

   In gatsby-config.js under gatsby-source-wordpress point url to your WPGraphQL endpoint. E.g. https://yoursite.com/graphql

4. Start developing.

   Navigate into your new site’s directory and start it up.

   cd my-app/
   gatsby develop

   Your site is now running in development mode at http://localhost:8000!

   _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.

🧐 Limitations

...

Coming soon

...

🧐 What's inside?

A quick look at important files and directories you'll see in this Gatsby project.

.
├── node_modules
├── src
    ├── @chakra-ui
    ├── components
    ├── pages
    ├── templates
    ├── static
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

💫 Deploy

...

Coming soon

...

🚀 Setup Data and Content

How to setup WordPress and other data to work with wp-gatsby:

↘️ Header & Footer Menu

- Add menus titled "GP-HEADER" and "GP-FOOTER"
- Add some pages to menus

↘️ Posts & pages

- Set permalink settings to "Post name".
- Add posts with featured images
- Add tags and categories
- Add some posts to "featured" category (to show on homepage)

↘️ Logo & Branding

🟠 Logo

Logo can be set in several ways:

1. SVG from React component (default)

   • Put your SVG in customSvgLogo.js in src/components/svgs
   • Edit gatsby-config.js with the following option:

   module.exports = {
       siteMetadata: {
           customLogoComponent: true,
       }
   }

   ⚠️ Set this option to false if you wish to use any of the bellow options

2. From WP Media Library (JPEG or PNG)

   • Upload and set image title to "gp-logo".

3. From Gatsby's static directory (JPEG, PNG or SVG)

   • Add logo named "gp-logo" to src/static/images directory.

4. If no image is found logo will be generated based on WordPress site name.

🖌️ Colors, fonts and styles

Edit the theme.js file to customize variables like colors, fonts, border-radius and edit global styles of existing components

src/@chakra-ui/theme.js

↘️ MailChimp Newsletter

1. Get the MailChimp endpoint

   • Go to MailChimp dashboard: Audience –> Signup Forms –> Embedded Form

   • Generate a form and copy the first URL you see (from the POST method)

   • Paste the endpoint URL into gatsby-config.js:

    plugins: [
        {
        resolve: "gatsby-plugin-mailchimp",
        options: {
            # example URL
            endpoint: 'https://name.list-manage.com/subscribe/post?u=4754c309a8',
            timeout: 3500,
        },
        },
    ]

2. Paste URL in gatsby-config.js

↘️ Social Network Icons

Edit gatsby-config.js and add URLs to your social networks:

module.exports = {
 siteMetadata: {
   # Social icons URLs / 
   # If not using leave it empty ( `` ) / Do not delete field
   socialLinks: {
     facebook:  `https://facebook.com`,
     instagram:  `https://instagram.com`,
     linkedin: `https://linkedin.com`,
     youtube: `https://youtube.com`,
     twitter: ``,
   },
 },