Publish a WordPress Post with GatsbyJS on Netlify

Deploy with Webhooks with WordPress, GatsbyJS, and Netlify

One of the things that we take for granted on WordPress is publishing posts with the press of a button. WordPress is a mature and stable publishing platform that millions of users leverage to publish their news, recipes, and code updates. Publishing on the WordPress platform is simple and reliable to the writer. They write and click a button when ready. Since I’ve embarked on my GatsbyJS Headless experiment I’ve discovered that I’ve taken the publication functionality for granted.

Since GatsbyJS needs to be rebuilt each time there is an update I needed a way for my WordPress site, which holds all the data, to trigger Netlify’s system to rebuild my site with the new data, aka the post I just wrote. This is exactly the use case for Webhooks. I’ll update one website and notify another website of the update. But a webhook originates on my WordPress site so I’ll have to build it into my HeadlessWP theme. Don’t worry, it’s really simple to implement.

Deployment Plan

First, exactly what will happen:

1. Write a post on WordPress
2. Publish the post on WordPress
3. Tell Netlify that a post is published on WordPress
4. Netlify execute the Gatsby JS build command
5. NetfliyNetlifyretrieves the new data from WordPress
6. Site is live
7. Profit

Now that I have a plan, I’ll show you how I did it.

In my theme, I opened functions.php. I needed to hook into the WordPress post_publish hook. I then attached a function that will send the message to the Netlify. Netlify provided me with a webhook that is unique to my environment. Netlify provides that URL for the webhook in the Netlify dashboard under Site Settings > Build and Deploy > Build hooks.

Back to my webhook in my functions.php file. I have to find a way to sanely send that message. The example code from Netlify uses cURL but I didn’t want to use cURL directly. WordPress has functions for making these types of calls. Here is the example from Netlify:

curl -X POST -d '' https://api.netlify.com/build_hooks/xxxxxxxxxxxxxxx

WP Remote Post

Netlify species that the Build URL should be hit with a POST request and no data attached. This is easy to do with wp_remote_post(). Here is the snippet I used to post to that URL.

wp_remote_post( 'https://api.netlify.com/build_hooks/xxxxxxxxxxxx', '' );

WP Remote Post takes in a parameter of data in an array. I just left this empty since I’m not sending data but it still needs to be there.

WordPress Webhook to Publish with Netlify and GatsbyJS

/**
* Send a request to build the site once a post is published
*
function deploy_on_publish() {
wp_remote_post( 'https://api.netlify.com/build_hooks/5b0f8c101f12b738363f6567', '' );
}
add_action( 'publish_post', 'deploy_on_publish' );

Summary

WordPress already has a large number of hooks for actions that take place in the application. Grab onto one of those and write a function to fire off when that action happens. Send your HTTP request with wp_remote_post();.