Remotely Updated Admin Notices For WordPress Plugins And Themes

WordPress Tutorials by Allure Web Solutions

In the blog I will show how to create admin notices for WordPress that you can update remotely. With this functionality, you won’t need to resubmit your plugin to the WordPress repository in case you need to push out an update on the fly.

There are essentially three components to making this work: the source of the notification content, which in our case is a JSON API; the php function that displays the notifications; and, the javascript function that hides them base on certain conditions.

JSON API as Notification Content

I used a WordPress site as the source of the content since WordPress has an API. I created a page that would serve as the content for remote notification. You can see the API response for the specific page I used here: https://wp-post-modal.allureprojects.com/wp-json/wp/v2/pages/35

You can use any JSON API for this or use WordPress as I did.

The PHP Function to Display the Notifications

In breaking this function down slightly we can see that I’m using PHP curl to get the JSON content from our JSON API. Simple replace INSERT_URL_HERE with your url that returns the JSON response. Next, we display the notice using some default WordPress classes for admin notification. The only custom thing here is the class admin-notice-remote which is important because that’s what we’ll reference in our Javascript.

/**
 * Remote admin notice
 */
add_filter( 'admin_notices', 'admin_notice_remote' ); 
add_filter( 'network_admin_notices', 'admin_notice_remote' ); 

function admin_notice_remote() {
	$notice_url = 'INSERT_URL_HERE';

	$message = json_decode(wp_remote_retrieve_body(wp_remote_get( $notice_url)), true)['content']['rendered'];

	if( is_wp_error( $message ) ) {
		return false;
	}
	?>
    <div class="notice notice-success is-dismissible admin-notice-remote">
        <div class="notice-content">
            <?php echo $message; ?>
        </div>

        <button type="button" class="notice-dismiss">
            <span class="screen-reader-text">Dismiss this notice.</span>
        </button>
    </div>
	<?php
}

The JavaScript to Conditionally Hide the Remote Notifications

We have a couple of parts to our JavaScript. One part is a click handler that fires when we click the little “x” to dismiss the notification. When the notification is dismissed, we create a data object that has the date of dismissal and the content of the notification and save that to local storage.

The other part checked if the current content of the current notification matches the saved content in local storage. If it matches, we hide the notification since that means the person has previously dismissed the notification. Every time the user dismisses a new remote notification, it updates the content of the notification in local storage so that if it doesn’t match, what’s current displayed, the notification is shown.

The reason I also save the date in local storage is for checking in case you want to return the notification automatically after a certain amount of time. For example, this can be used for a remote notification that encourages people to rate your plugin. You would just add one additional check to see if today’s date is greater than the saved dated + some amount of time.

(function ($) {
    'use strict';

    $(function () {
        var currentNoticeContent = $('.admin-notice-remote .notice-content').html();
        
        // hide remote notice if current remote notice content equals saved notice content
        if (localStorage.admin_notice_remote_dismissed) {
            if (JSON.parse(localStorage.admin_notice_remote_dismissed).content === currentNoticeContent)
                $('.admin-notice-remote').addClass('hidden');
        }

        // hide admin notice installed when dismissing notification
        $(document).on('click', '.admin-notice-remote .notice-dismiss', function () {
            // create object with date the notice was dismissed and the content of the notice at the time of dismissal
            var noticeData = {
                date: new Date(),
                content: currentNoticeContent
            };
            
            // save notice data to local storage
            localStorage.admin_notice_remote_dismissed = JSON.stringify(noticeData);
        });
    })

})(jQuery);
Mike Doubintchik

Author Mike Doubintchik

More posts by Mike Doubintchik

Join the discussion 3 Comments

  • Metai says:

    Brilliant idea, It worked perfectly.
    I am not a json guy, but is there any any method to show sophisticated html message.. like some of the popular plugins do .. for example showing promotions with images etc .
    I appreciate if you can help me with this.

    • Mike Doubintchik says:

      @Metai: thank you for the kind words!

      In answer of your question…you can put anything you want into the html that will be used for the message. If you are using another WP site as a source for the messages, as in my example, everything in the Visual Editor for that post will be shown, including images. For CSS, just make sure the CSS is inline and images have absolute paths.

Leave a Reply