Creating a Simple Website: A Gatsby Tutorial With WordPress and GraphQl

What is Gatsby.js?

Installing WordPress

Installing Gatsby

Important Installs in WP to Start Using GraphQL

A basic query

Create Pages and a Menu

menus in the MyQuery

Styling the Main Menu

import {createGlobalStyle} from 'styled-components';
const component

Create the MTB News Content Type and a Component for It

add_theme_support( 'custom-logo' );
add_theme_support( 'menus' );
add_theme_support( 'post-thumbnails' );

function create_custom_mtb_news_post_type(){
$args = array(
'labels' => array('name'=>__('MTB News'),'singular_name'=>__('MTB News')),
'public' => true,
'show_in_admin_bar' => true,
'show_in_rest' => true
add_post_type_support('mtb_news', array('thumbnail','excerpt'));
add_action('init', 'create_custom_mtb_news_post_type');

Create the WP Template to Render the MTB News Items

Completed website from Gatsby tutorial

Ready to Build Your Own Website With Gatsby?


Subscribe to our Blog



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gorilla Logic

Gorilla Logic

Gorilla Logic provides Agile teams for your most critical projects, bringing unparalleled expertise in delivery of full stack web, mobile and enterprise apps.