How to Make WordPress Admin Notices Actually Dismissible
WordPress 4.2 introduced a feature where admin notices can now be dismissed / removed from the admin page currently being viewed.
One caveat I discovered was, the dismissal do not persist across pages. That is, when you reload or navigate away from the current admin page to another, you will still see the notice.
I wrote a small library / plugin that elegantly solves this problem which i will be sharing to us. You can easily reuse it in your themes and plugins. And it is also pretty well documented.
Here is a link to the library on GitHub
How to Use it
Update: see the library README for an updated installation and usage guide.
Firstly, install and activate it by cloning / downloading to your WordPress wp-content/plugins
directory.
Say you have the following markup as your admin notice
function sample_admin_notice__success() { ?> <div class="updated notice notice-success is-dismissible"> <p> _e( 'Done!', 'sample-text-domain' ); ?></p> </div> add_action( 'admin_notices', 'sample_admin_notice__success' ); |
To make it hidden forever when dismissed, add the following data attribute data-dismissible="disable-done-notice-forever"
to the div markup like so:
function sample_admin_notice__success() { ?> <div data-dismissible="disable-done-notice-forever" class="updated notice notice-success is-dismissible"> <p> _e( 'Done!', 'sample-text-domain' ); ?></p> </div> add_action( 'admin_notices', 'sample_admin_notice__success' ); |
Note: the data-dismissible
attribute must have a unique hyphen separated text which will serve as the key or option name used by the Options API to persist the state to the database. Don’t understand, see the following examples.
Examples
Say you have two notices displayed when certain actions are triggered; firstly, choose a string to uniquely identify them. E.g notice-one
and notice-two
To make the first notice never appear forever when dismissed, its data-dismissible attribute will be data-dismissible="notice-one-forever"
where notice-one is its unique identifier.
To make the second notice only hidden for 2 days, its data-dismissible
attribute will be data-dismissible="notice-two-2"
where notice-one is its unique identifier and the 2 the number of days it will be hidden.
To actually make the dismissed admin notice not to appear, use the is_admin_notice_active()
function like so:
function sample_admin_notice__success1() { if ( ! is_admin_notice_active( 'notice-one-forever' ) ) { return; ?> <div data-dismissible="notice-one-forever" class="updated notice notice-success is-dismissible"> <p> _e( 'Done 1!', 'sample-text-domain' ); ?></p> </div> add_action( 'admin_notices', 'sample_admin_notice__success1' ); |
function sample_admin_notice__success2() { if ( ! is_admin_notice_active( 'notice-two-2' ) ) { return; ?> <div data-dismissible="notice-two-2" class="updated notice notice-success is-dismissible"> <p> _e( 'Done 2!', 'sample-text-domain' ); ?></p> </div> add_action( 'admin_notices', 'sample_admin_notice__success2' ); |
Cool beans. Isn’t it?
0 comments:
Post a Comment