How to Add Custom Admin Notices in WordPress

Notices are a type of UI that appears towards the top of admin pages and provides useful information this is done by adding Custom Admin Notices in WordPress. And are used in the WordPress core, themes, and plugins to indicate the outcome of activity to attract the user’s attention to important information. Notices attached to the admin_notices action in the classic editor can output any HTML they choose. And notices are restrict to a more formal API in the block editor.

Custom Admin Notices in the Classic Editor

Here’s an example of a “Post draught updated” notification in the traditional editor:

img-1

To create a similar “Post draught updated” notification, use the following code:

/**
 * Hook into the 'admin_notices' action to render
 * a generic HTML notice.
 */
function mysofthunt_admin_notice() {
    $screen = get_current_screen();
    // Only render this notice in the post editor.
    if ( ! $screen || 'post' !== $screen->base ) {
        return;
    }
    // Render the notice's HTML.
    // Each notice should be wrapped in a <div>
    // with a 'notice' class.
    echo '<div class="notice notice-success is-dismissible"><p>';
    echo sprintf( __( 'Post draft updated. <a href="%s" target="_blank">Preview post</a>' ), get_preview_post_link() );
    echo '</p></div>';
};
add_action( 'admin_notices', 'mysofthunt_admin_notice' );

The admin_notices hook. For example, allows a developer to output any HTML they want. One benefit is that the developer has a tremendous deal of freedom. The main drawback of arbitrary HTML is that it makes future iterations on notices more difficult. If not impossible because iterations must account for arbitrary HTML. This is why there is a defined API for the block editor.

Notices in the Block Editor

Here’s an example of a “Post published” notification in the block editor:

img-2

To create an analogous “Post published” notification. Use the following code:

( function ( wp ) {
    wp.data.dispatch( 'core/notices' ).createNotice(
        'success', // Can be one of: success, info, warning, error.
        'Post published.', // Text string to display.
        {
            isDismissible: true, // Whether the user can dismiss the notice.
            // Any actions the user can perform.
            actions: [
                {
                    url: '#',
                    label: 'View post',
                },
            ],
        }
    );
} )( window.wp );

When creating a notification from within the JavaScript application lifecycle. You’ll want to utilize this Notices Data API.

To further comprehend the preceding code sample. Consider the following:

  • WordPress’ global window variable is wp.
  • The block editor provides an object called wp.data that allows you to access the data store.
  • The Notices package has registered functionality to the block editor data store, which is accessed via wp.data.dispatch(‘core/notices’).
  • The Notices package provides the method createNotice() for registering a new notice. To determine which notices to display, the block editor consults the notice data store.

For a primer on how to load your custom JavaScript into the block editor, see the Loading JavaScript lesson. And if you want to get more information then go to the WordPress official documentation.

That’s all for this article if you have any queries please contact us through our website or email us at [email protected]

Leave a Comment