For a while, our content editors at Postman had to log into GitHub and rebuild the Gatsby app every time they made a change or published a new blog post to the company’s WordPress. As you can imagine, this became very time consuming and wasn’t the most efficient use of our team’s time.

To remedy this, I decided to sit down and write a PHP plugin for our WordPress Admin Dashboard, in order to enable our content writers to re-publish their changes from within our headless CMS.

We used WPGraphQL to create a GraphQL layer from our WordPress content and query our data via the gatsby-source-graphql plugin to our Gatsby App. The resulting solution allowed our blog to be more secure, faster, and future proof.

The plugin creates Nodes in Gatsby to turn the WordPress Data into pages. This results in the App updating its content at build time. If you want to know more, here is an in-depth explanation of build time data fetching with Gatsby .

This is a step-by-step tutorial to show you how to create a custom WordPress plugin that allows content editors to rebuild their Gatsby App via manually rerunning GitHub Actions from the WordPress admin dashboard.

When the plugin is installed, you will be able to rebuild and publish your Gatsby app to AWS/S3 by a click of a button in the Wordpress admin Dashboard.

Prerequisites

Completion of this tutorial assumes that:

• Your WordPress CMS has already been connected to your Gatsby App. If not, this blog post will help you get started.
• Your Gatsby App has been successfully deployed to AWS/S3 using Github Actions. At this time, Github does not provide a re-run button for Github Actions. I have written a concise tutorial on how to run GitHub Actions manually using Postman client.

The Workflow

Here is an overview of what we will accomplish:

• Create a folder containing one PHP file
• Hook into WordPress actions to create admin dashboard menu item
• Create a button with onClick to POST to GitHub Actions API to re-publish the Gatsby App to AWS/S3
• Create a personal token in GitHub to use for GitHub Actions API authorization
• Create zip file of plugin folder, upload to wordpress and activate

Let’s get started

To begin, create a new folder called deploy-plugin within your favorite directory on your computer, and create a PHP file called deploy-plugin.php within that directory. Here’s an example of the commands to run in your terminal:

$ mkdir deploy-plugin
$ cd deploy-plugin
$ touch deploy-plugin.php

I then proceeded to write my code in Vim, a code editor that you can open from your terminal. I am relatively new to Vim so it was fun using a different text editor. If you’d prefer to use another IDE, feel free to skip to the next section.

$ vi deploy-plugin.php

NOTE: Here is a great tutorial on how to get started with Vim if you’re interested in learning more.

It’s recommended to activate syntax highlighting in Vim by typing:

$ :syntax on

Now you can press i for insert to start typing code in your PHP file.

Write the Plugin in PHP

As a starting point, WordPress requires information at the top of the file to recognize the file as a plugin. Copy and paste the following into your editor:

<?php
/*
Plugin Name: Deploy plugin
Description: A deploy plugin to rerun github actions
Author: Christina Hastenrath
Version: 0.1
*/

// code here

?>

NOTE: Do not create an empty last line. This can cause an error in WordPress when activating the uploaded plugin.

All preceding code will replace the _// code here_ line above.

#code #tutorials and hacks #wordpress #gatsby