@webmaeistro/gatsby-theme-graphql-wp

@webmaeistro/gatsby-theme-graphql-wp

Description

The idea behind this theme is making a one-stop solution for a WordPress blog owner who wants to switch to Gatsby powered frontend. Simple to configure that works out of the box. For a common use scenario - standard WordPress installation, basic posts and pages content - only a source url is needed.

{
    resolve: '@webmaeistro/gatsby-theme-graphql-wp',
    options: {
        wordPressUrl: 'https://your.wordpress.site/',
    },
}

Dependencies

This theme uses GraphQL API to source WordPress content. Therefore the source WordPress site must use the WPGraphQL plugin.

How to install

yarn add @webmaeistro/gatsby-theme-graphql-wp

{
  resolve: '@webmaeistro/gatsby-theme-graphql-wp',
  options: {
    wordPressUrl: 'https://your.wordpress.site/',
    menuLocation: 'MENU_1',
  },
},

Available options

wordPressUrl - source site.

uploadsUrl - (optional) WordPress uploads folder. Uses default if this option not set.

processPostTypes - (optional) post types to process. You can include custom post types as defined in WPGraphQL however CPTs also need to have some code added to create pages on Gatsby site. And that is currently outside of this theme's scope.

useWebp - (optional) if true uses WebP images. Default is false.

menuLocation - WordPress menu location slug. Sanitized.

menuLocation

A build would break if menuLocation was not cofigured right. The location slug comes from register_nav_menus function call in functions.php (example) of your WordPress theme.

siteMetadata

siteMetadata: {
    title: 'Site title',
    author: 'Author name',
    description: 'Site description',
    social: [
        {
            name: 'twitter',
            url: 'https://twitter.com/your_twitter',
        },
    ],
},

Features

• Uses WordPress menu from a defined location. Only first level menu items are displayed. "Home" menu item is automatically added if there is no menu item linking to the site homepage.
• Supports post categories.
• Downloads images embedded in posts/pages/CPTs and hosted on the WordPress site. Converts <img> tags to Gatbsy <Img> component.
• Downloads featured images (post thumbnails) and makes them available as Gatsby <Img> component.
• Downloads all other files linked in posts/pages/CPTs and hosted on the WordPress site. Serves them from the Gatsby static folder.
• Links embedded in posts that lead to other pages are converted to <Link> component.

This theme utilizes the gatsby-wpgraphql-inline-images plugin for most of the content processing.

Examples of usage

{
    resolve: '@webmaeistro/gatsby-theme-graphql-wp',
    options: {
        wordPressUrl: 'https://examplecom',
    },
},

Shout Outs

Special thanks for inspiration and some borrowed code go to:

https://github.com/jlengstorf
https://github.com/jasonbahl
https://wordpress.org/themes/juliet/

Demo site uses images by Unsplash and text content from Wikipedia.