How to Display a Custom Message in WordPress Admin Panel

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.

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.

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.

[space]

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.

[space]

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;
}

[space]

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).

[space]

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.