danielbitzer

This is a very simple WordPress plugin for creating frontend notices server side or client side. There are 4 notice types by default success, error, warning, general or you can create custom notice types. Server side notices are stored in the session until displayed.
This plugin hopes to one day solve the problem of complex WordPress sites with multiple plugins all having their own Notices that all require styling.
But for now, the Notices API is useful tool for developers creating custom functionality in their theme.
Server Side Usage
<pre><code><?php
 WP_Notices::success( $title, $message, $timer, $priority ); 
 WP_Notices::warning( 'Login Failed', 'You have entered an incorrect Username or password, please try again.'); 
 WP_Notices::error( $title, $message, $timer, $priority ); 
 WP_Notices::general( $title, $message, $timer, $priority ); 
 WP_Notices::custom( $type, $title, $message, $timer, $priority );
?>
</code></pre>
Client Side Usage
<pre><code>jQuery(document).ready(function($){

 $.WP_Notices.success( title,message, scroll_to, timer, callback );
 $.WP_Notices.error( title, message, scroll_to, timer, callback );
 $.WP_Notices.general( title, message, scroll_to, timer, callback );
 $.WP_Notices.warning( title, message, scroll_to, timer, callback );

 // Custom type
 $.WP_Notices.render_notice( type, title, message, scroll_to, timer, callback );

 // Using the callback parameter
 $.WP_Notices.warning( 'Form Error', 'Invalid form input.', false, 3000, function( $notice ) {
 console.log( $notice );
 });

});
</code></pre>
Options
<pre><code>add_filter( 'notice_api_options', 'customize_notice_options' );

function customize_notice_options( $options )
{
 $options = array(
 'prepend_selector' => '#content',
 'container_class' => 'notices-container',
 'before_title' => '',
 'after_title' => ': ',
 'scrolling_speed' => 500,
 );
 return $options;
}
</code></pre>

Notices API

The simple Notices API currently missing in WordPress.

Ronald Huereca

AlertsDLX offers beautifully styled alerts, callouts, and notification boxes for the Block Editor, Classic Editor, or anywhere blocks and shortcodes can go.
This plugin is perfect for adding alerts, callouts, and notifications to your site. It comes with four alert styles: Material, Bootstrap, Chakra, and Shoelace. Each alert style has its own unique look and feel.
Coupled with a free plugin like <a href="https://blockvisibilitywp.com/" rel="nofollow ugc">Block Visibility</a>, your imagine can really go wild.
<iframe loading="lazy" title="AlertsDLX Demo - a free WordPress notification/alerts block" width="750" height="422" src="https://www.youtube.com/embed/7dKpw5uBi5o?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<blockquote>
Alert Shortcodes are here! Create alert boxes from shortcodes. <a href="https://docs.dlxplugins.com/v/alertsdlx/shortcode-usage" rel="nofollow ugc">See shortcode usage</a>.
Check out the demo above for all alert types and variations.
</blockquote>
Major features:
<ol>
<li>Four alert styles: Material, Bootstrap, Chakra, and Shoelace.</li>
<li>Use branded colors, or choose custom for your own styles.</li>
<li>Add your own SVG icons, or choose from the ones included.</li>
<li>Add dismissble alerts, and have it remember the user’s choice.</li>
<li>Add an optional title, description, and button.</li>
</ol>
Quick Links:
<ul>
<li><a href="https://dlxplugins.com/plugins/alertsdlx/" rel="nofollow ugc">AlertsDLX Home</a></li>
<li><a href="https://docs.dlxplugins.com/v/alertsdlx/" rel="nofollow ugc">AlertsDLX Documentation</a></li>
<li><a href="https://docs.dlxplugins.com/v/alertsdlx/shortcode-usage" rel="nofollow ugc">Shortcode Usage</a></li>
<li><a href="https://dlxplugins.com/support/" rel="nofollow ugc">AlertsDLX Support</a></li>
</ul>
Blocks are styled with inspiration from:
<ul>
<li><a href="https://mui.com/material-ui/react-alert/" rel="nofollow ugc">Material UI Alerts</a></li>
<li><a href="https://chakra-ui.com/docs/components/alert" rel="nofollow ugc">Chakra UI</a></li>
<li><a href="https://getbootstrap.com/docs/5.0/components/alerts/" rel="nofollow ugc">Bootstrap</a>.</li>
<li><a href="https://shoelace.style/" rel="nofollow ugc">Shoelace</a></li>
</ul>
Each Alert can have built-in icons or you can set your own with SVGs.
Icons included are from:
<ul>
<li><a href="https://fonts.google.com/icons" rel="nofollow ugc">Google Fonts Material Icons</a></li>
<li><a href="https://github.com/chakra-ui/chakra-ui/tree/main/packages/components/icons/src" rel="nofollow ugc">Chakra UI Icons</a> (GitHub)</li>
<li><a href="https://icons.getbootstrap.com/" rel="nofollow ugc">Bootstrap Icons</a></li>
</ul>
Development:
Development happens on GitHub. Please <a href="https://github.com/dlxplugins/alerts-dlx" rel="nofollow ugc">check out the GitHub code repository for AlertsDLX</a>.

Alerts DLX – Alert Box, Callout Box, and Notifications

A beautiful and easy to use alert and callout box, with support for blocks and shortcodes.

Notices API vs Alerts DLX – Alert Box, Callout Box, and Notifications