I am adding an admin notice via the conventional admin_notice
hook in my plugin:
function my_admin_notice() { ?>
<div class="notice notice-info is-dismissible">
<p><?php _e( 'some message', 'my-text-domain' ); ?></p>
</div>
<?php
}
if ( my_plugin_show_admin_notice() )
add_action( 'admin_notices', 'my_admin_notice' );
How can I control where wordpress places the admin notice, in the html on the current screen, without using Javascript?
I am adding an admin notice via the conventional admin_notice
hook in my plugin:
function my_admin_notice() { ?>
<div class="notice notice-info is-dismissible">
<p><?php _e( 'some message', 'my-text-domain' ); ?></p>
</div>
<?php
}
if ( my_plugin_show_admin_notice() )
add_action( 'admin_notices', 'my_admin_notice' );
How can I control where wordpress places the admin notice, in the html on the current screen, without using Javascript?
I found out by accident recently that all the notices will be moved to after the first <h2>
tag on the page inside a <div class="wrap">
. This gives you some slight control in that, for example, on a plugin settings page you can put an empty <h2></h2>
at the very top if you want to use <h2>Plugin Title</h2>
without it messing up the display formatting there.
Update: As some have noted, at some point this was changed so that it is now after either the h1
OR h2
tag inside the div with class wrap
where the notices are inserted, in that order (ie. with first preference for h1
if it exists.) For reference, anyone looking for the actual javascript doing this can find it in /wp-admin/js/common.js
:
/*
* The `.below-h2` class is here just for backward compatibility with plugins
* that are (incorrectly) using it. Do not use. Use `.inline` instead. See #34570.
* If '.wp-header-end' is found, append the notices after it otherwise
* after the first h1 or h2 heading found within the main content.
*/
if ( ! $headerEnd.length ) {
$headerEnd = $( '.wrap h1, .wrap h2' ).first();
}
$( 'div.updated, div.error, div.notice' ).not( '.inline, .below-h2' ).insertAfter( $headerEnd );
Also as you can see there if you don't want your own notice to be moved just give it a class of inline
and it will be excluded.
According to the Codex admin_notice
does the following:
Notices displayed near the top of admin pages. The hook function should echo a message to be displayed.
That means you cannot place them at the bottom or middle of your screen, if you use the hook. Furthermore if you place a div with the class notice anywhere in your admin pages, WP admin JS scripts will put them just where all the other notices would be; and they will behave like notices too.
FYI: I tested this already with a fresh install. ;)
If you want to show a admin_notice
at a particular page, you can add the action within a current_screen
action:
function my_admin_notice() { ?>
<div class="notice notice-info is-dismissible">
<p><?php _e( 'some message', 'my_textdomain' ); ?></p>
</div>
<?php
}
function my_current_screen_example( $current_screen ) {
// All your conditions go here, e.g. show notice @ post (not page) edit/new
if ( 'post' == $current_screen->post_type && 'post' == $current_screen->base ) {
add_action( 'admin_notices', 'my_admin_notice' );
}
}
add_action( 'current_screen', 'my_current_screen_example' );
I recently came across this issue and tried using the empty <h2></h2>
method and it didn't work for me. Eventually I discovered that using <hr class="wp-header-end">
seems to work and the admin notice will always appear directly below it.
Hopefully it helps someone!
I had the same problem and I resolved it by ensuring all the heading tags above where I want to place the notice there is no <h2>
.
In this case, I wanted to display an error log notice below the input field as shown below :
I solved it by introducing an empty <h2>
tag just below the email input field and also change the tabs tag to <h3>
instead of <h2>
The action admin_notices
is called or applied only once in the file, admin-header.php
on line number 238, just at the beginning of the wpbody-content
div, which makes up the body of a dashboard page. Hence, there is no way you can change the position of the admin notice, without using JavaScript. However, you can definitely make your own notice
divs at the positions or locations you want, and manipulate their visibility.
Just create the mark up for the notice as:
<div class="notice notice-info is-dismissible">
<p>This is a notice.</p>
</div>
You can now control it's visibility using PHP. Meaning when you redirect a user to this page, or submit a form on this page, just set the message in the div, and using a simple if else, echo the div.
It appears that settings_errors()
will display all notices that I've tested with a settings form so far. Despite the name it also outputs success messages. Place it anwhere in your template and that's where the notices will appear.
I found the <h2>
solution mentioned to not do anything.
WordPress Reference settings_errors()
Just add inline
class to your div, e.g.
<div class="notice notice-success is-dismissible inline">
Test notice
</div>
if ( /* some condition */ )
leads to confusions! – Sumit Commented Mar 15, 2016 at 5:05