You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Add this PHP snippet to your theme’s `functions.php` or a custom plugin to create a webhook that triggers on post updates and calls your Next.js revalidation API:
36
+
### Creating a Webhook via the Admin UI
37
+
You can easily create and manage webhooks directly from the WordPress admin dashboard, without writing any code. The intuitive Webhooks UI allows you to specify the event, target URL, HTTP method, and custom headers for each webhook. This makes it simple to connect WordPress events to external services and automate your workflows.
## Testing the Integration with the Example Project
94
+
95
+
To verify that your webhook integration is working correctly, follow these steps:
96
+
97
+
1. Run the example project in production mode. (see ## Command Reference section)
98
+
99
+
2. In WordPress, update or create a new post, for example with the slug `/posts/new-post`.
98
100
101
+
3. Visit the corresponding page on your headless site at:
102
+
103
+
`http://localhost:3000/posts/new-post`
104
+
105
+
106
+
Refresh the page to see the updated content served via Incremental Static Regeneration (ISR).
107
+
108
+
4. Check the Next.js server logs. You should see logs indicating that the webhook revalidation request was received and processed successfully, similar to the following:
109
+
110
+
```bash
111
+
[Webhook] Received revalidation request
112
+
[Webhook] Secret from header: Provided
113
+
[Webhook] Expected secret is set: Yes
114
+
[Webhook] Secret token validated successfully
115
+
[Webhook] Request body parsed: {
116
+
key: 'cG9zdDoyNDI=',
117
+
path: '/posts/new-post/',
118
+
graphql_endpoint: 'mysite.local/graphql',
119
+
smart_cache_keys: [ 'cG9zdDoyNDI=' ],
120
+
_webhook_meta: {
121
+
sent_at: '2025-06-24 12:19:15',
122
+
webhook_id: 254,
123
+
webhook_name: 'Test Post Published Webhook',
124
+
event_type: 'post_updated'
125
+
}
126
+
}
127
+
[Webhook] Path to revalidate: /posts/new-post/
128
+
```
129
+
130
+
This confirms that the webhook triggered by your WordPress post update is successfully revalidating the page on your headless Next.js site.
99
131
100
132
## How It Works
101
133
This integration:
@@ -143,7 +175,6 @@ Congratulations, WordPress should now be fully set up.
143
175
144
176
> **Note:** The login details for the admin is username "admin" and password "password"
The **WPGraphQL Webhooks** plugin extends your WordPress site with powerful webhook management capabilities tailored for GraphQL-driven headless setups. It allows you to create, update, and manage webhooks that trigger on various WordPress and WPGraphQL events, enabling seamless integration with external services and static site generators.
6
+
7
+
This plugin is designed to work hand-in-hand with WordPress and WPGraphQL, providing a flexible and reliable way to automate workflows such as cache invalidation, content revalidation, and more.
8
+
9
+
## Features
10
+
11
+
-**Easy Webhook Management UI**: Create, update, and delete webhooks directly from the WordPress admin dashboard.
12
+
-**Event-Based Triggers**: Configure webhooks to fire on a variety of WordPress and WPGraphQL events.
13
+
-**Custom HTTP Methods and Headers**: Specify HTTP methods (POST, GET, etc.) and custom headers for your webhook requests.
14
+
-**Built-in Integration with WPGraphQL Smart Cache**: Leverages smart cache invalidation events for efficient revalidation.
15
+
-**Fallback Invalidation System**: If WPGraphQL Smart Cache is not installed, the plugin falls back to a simpler event invalidation mechanism.
16
+
-**Security**: Supports nonce verification and capability checks to secure webhook management.
17
+
-**AJAX Testing**: Test webhook endpoints directly from the admin UI.
18
+
-**Extensible**: Provides filters and actions for developers to customize behavior.
19
+
20
+
## Creating and Updating Webhooks
21
+
22
+
You can manage webhooks easily via the WordPress admin UI:
23
+
24
+
### Creating a Webhook
25
+
26
+
1.**Access the Webhooks Admin Page**
27
+
- In your WordPress dashboard sidebar, click on **Webhooks**.
28
+
29
+
2.**Add a New Webhook**
30
+
- Click the **Add New** button.
31
+
32
+
3.**Fill in Webhook Details**
33
+
-**Name**: Enter a descriptive name for your webhook (e.g., `Post Published Webhook`).
34
+
-**Event**: Select the event that triggers the webhook (e.g., `post_published`).
35
+
-**URL**: Enter the target URL that will receive the webhook payload.
36
+
-**HTTP Method**: Choose the HTTP method (default is `POST`).
37
+
-**Headers**: Add any necessary HTTP headers (e.g., authentication tokens).
38
+
39
+
4.**Save the Webhook**
40
+
- Click **Create Webhook** to save.
41
+
42
+
### Updating a Webhook
43
+
44
+
1.**Navigate to the Webhooks List**
45
+
- Click on **Webhooks** in the admin sidebar.
46
+
47
+
2.**Edit an Existing Webhook**
48
+
- Click the webhook you want to update.
49
+
50
+
3.**Modify the Details**
51
+
- Change any fields like name, event, URL, method, or headers.
## Integration with WPGraphQL Smart Cache (Recommended)
59
+
60
+
The **WPGraphQL Webhooks** plugin has built-in integration with the [WPGraphQL Smart Cache](https://wordpress.org/plugins/wpgraphql-smart-cache/) plugin. This integration enables advanced smart cache invalidation events, allowing your webhooks to trigger only when necessary, improving performance and reducing unnecessary rebuilds or revalidations.
61
+
62
+
**Important:** It is strongly recommended to install and activate the WPGraphQL Smart Cache plugin alongside WPGraphQL Webhooks to take full advantage of these features.
63
+
64
+
If WPGraphQL Smart Cache is not installed, WPGraphQL Webhooks will gracefully fall back to a simpler event invalidation system, which may be less efficient but still functional.
65
+
66
+
## Where to Go Next
67
+
68
+
For a detailed reference of all available filters, actions, and hooks provided by WPGraphQL Webhooks, please see the [Reference Documentation](reference.md).
0 commit comments