WordPress Admin Notices: How to Use notice-success, notice-error, and More

What Are WordPress Admin Notices?

WordPress admin notices are styled message boxes that appear in the dashboard to inform users about important actions, warnings, or results — for example, successful updates or configuration errors.
These notices follow a consistent design language defined by WordPress core CSS classes.

Available Notice Classes

WordPress provides a few built-in styles for admin notices:

• notice notice-success – Green success message.
• notice notice-error – Red error message.
• notice notice-warning – Yellow/orange warning message.
• notice notice-info – Blue informational message.

You can also use the base notice class alone for a neutral box, and optionally add is-dismissible to allow users to close the message.

Example Usage in PHP

add_action( 'admin_notices', function() {
    echo '<div class="notice notice-success is-dismissible"><p>Settings saved successfully!</p></div>';
});
  

Or in pure HTML:

<div class="notice notice-warning is-dismissible">
  <p>Be careful! This will overwrite existing data.</p>
</div>
  

WordPress Core Notice CSS Styles

The following CSS snippets are part of wp-admin/css/common.css (used by WordPress core):

.notice {
  margin: 5px 15px 2px;
  padding: 10px 12px;
  background: #fff;
  border-left: 4px solid #fff;
}

.notice-success {
  border-left-color: #46b450; /* Green */
}

.notice-error {
  border-left-color: #dc3232; /* Red */
}

.notice-warning {
  border-left-color: #ffb900; /* Yellow */
}

.notice-info {
  border-left-color: #00a0d2; /* Blue */
}

.is-dismissible {
  position: relative;
  padding-right: 38px;
}

.notice.is-dismissible .notice-dismiss {
  position: absolute;
  top: 0;
  right: 1px;
  border: none;
  background: none;
  cursor: pointer;
}
      

Making Notices Dismissible

Adding is-dismissible automatically gives the box a close (“×”) button.
WordPress core handles the fade-out animation and removes the notice from view using JavaScript.

Best Practices

• Use notice-success for actions that completed properly.
• Use notice-error for failed actions or missing data.
• Use notice-warning for potentially dangerous or irreversible actions.
• Use notice-info for updates or feature introductions.

Further References

• WordPress Developer Reference – admin_notices Hook
• Working with Admin Notices (WordPress Docs)
• WordPress Core CSS – common.css