Have you seen such a message?
Who am I kidding?
I’m certain you’ve seen such a message if you’ve ever activated a theme or plugin on your WordPress website.
Plugin Activated Notification Message
It’s called an admin or update notice, which WordPress inherently displays on certain core operations. And as a plugin or theme developer, you need to display similar messages on core plugin/theme operations.
WordPress Update Notification Message
For example, say your plugin operates on a post. And it saves some data, in the database. You can display a ‘success’ or ‘failure’ message on save, using an update notice. It’s more of a feedback message for the user, and is good coding practice. Displaying it as a WordPress update notice, keeps the look of the message in-line with the WordPress admin panel, and does not hamper user experience.
It works the same way, when your plugin/theme performs API calls. You can use the update notification to display the same.
I came across a similar scenario, when I was working with WooCommerce. I had to display a notification to the user based on an API call response. I had added a meta field to the WooCommerce product. And based on the value entered in the meta field, I had to fetch a response, when the product was updated.
Do keep in mind, I was not updating the default WordPress notification (‘Product updated’). I wanted to add a new notification.
How to Add a Custom Update Notification
Now, an update notification can be displayed using the ‘post_updated_messages’ filter hook.
But then, how do you dynamically display a message based on server response?
I’ll show you!
Since we need to display a message based on the response, we need to first save the API response. I’ll be saving it in a cookie. (You could alternatively use a session to save the data). Note, that this is merely an example function. You would have to update the particulars of your function, based on your requirement.
// hook your function on the required action add_action( 'save_post', 'wdm_post_published_notification' ) ); /** * @param int $post_id, ID of the product */ function wdm_post_published_notification( $post_id ) { // set the arguments and end point for the API call $arguments = array(); $end_point = 'endpoint'; // send the request // send_request makes the api_call and returns a response $response = send_request( $end_point, $arguments); // save the response in a cookie if ( $response !== NULL ) { setcookie( "wdm_server_response", $response->message ); setcookie( "wdm_server_response_status", $response->status ); } else { setcookie( "wdm_server_response", "" ); setcookie( "wdm_server_response_status", "" ); } }
Next, we need to display the response. Here, we have to use the ‘post_updated_messages’ filter.
add_filter( 'post_updated_messages', 'wdm_show_update_message', 11 ); /** * @param $messages, notifications to be displayed */ function wdm_show_update_message( $messages ) { $message = $_COOKIE[ 'wdm_server_response' ]; $status = $_COOKIE[ 'wdm_server_response_status' ]; /* we have to append the notification message for each WordPress default status message, for our post type. This has to be done, because we can't be sure of the status message which will be displayed by WordPress.The message which will be displayed will be dependent on the success of the operation performed. For example, since we are updating the post, a post update "success" or "failure" notification might be displayed. Since we aren't sure which of the two will be displayed, we have to append our message to either of the notifications, to display it. */ foreach ( $messages[ 'product' ] as $key => $single_message ) { if ( $status == "success" ) { $messages[ 'product' ][ $key ] = $single_message . '</div><div id="message" class="updated notice notice-success is-dismissible"><p>' . $message. '</p></div>'; } else { $messages[ 'product' ][ $key ] = $single_message . '</div><div id="message" class=" notice notice-error is-dismissible"><p>' . $message. '</p></div>'; } } return $messages; }
Handling AJAX Responses
You could set notification updates for AJAX responses as well. All you need to do is enclose the message in a div and setting the appropriate class (notice, notice-success, notice-error).
So, there you have it! It wasn’t as direct was it?! But if you follow the logic I’ve stated, it will surely work as expected. And in case it doesn’t, I’m here to help. Do let me know you questions (if any), in the comment section below.
Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!
Leave a Reply