danielbitzer

<p>This is a very simple WordPress plugin for creating frontend notices server side or client side. There are 4 notice types by default <em>success, error, warning, general</em> or you can create custom notice types. Server side notices are stored in the session until displayed.</p>
<p>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.</p>
<p>But for now, the Notices API is useful tool for developers creating custom functionality in their theme.</p>
<p><strong>Server Side Usage</strong></p>
<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>
<p><strong>Client Side Usage</strong></p>
<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>
<p><strong>Options</strong></p>
<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' => '<strong>',
        'after_title' => ':</strong> ',
        'scrolling_speed' => 500,
    );
    return $options;
}
</code></pre>


Notices API

The simple Notices API currently missing in WordPress.

Roel Magdaleno

<p>The callout box includes an icon, and the post content. This plugin uses <a href="https://heroicons.com" rel="nofollow ugc">Heroicons</a> and  <a href="https://github.com/roelmagdaleno/php-heroicons" rel="nofollow ugc">php-heroicons</a> PHP package.</p>
<h3>Icons</h3>
<p>A callout box includes an icon that describes what’s the purpose of the callout box.</p>
<p>The plugin is using <a href="https://heroicons.com" rel="nofollow ugc">Heroicons</a> so you can go to its website and see what icons are available to use within this plugin.</p>
<p>You can use <code>solid</code> and <code>outline</code> icons.</p>
<h3>Types</h3>
<p>A callout box can have multiple types:</p>
<ul>
<li><code>primary</code></li>
<li><code>success</code></li>
<li><code>danger</code></li>
<li><code>warning</code></li>
</ul>
<p>By default, the callout box is <code>primary</code>.</p>
<h3>Icon Methods</h3>
<p>The icon method can be 2 types:</p>
<ul>
<li><code>solid</code></li>
<li><code>outline</code></li>
</ul>
<p>By default, for shortcodes and Gutenberg the icon method is <code>solid</code>.</p>
<h3>Shortcode</h3>
<p>For WordPress Classic Editor or even Gutenberg, you can use the shortcode:</p>
<pre><code>[wp-callout icon="check-circle" type="primary" method="solid"]
Welcome to WordPress. This is the post content.
[/wp-callout]
</code></pre>
<p>The shortcode supports 3 attributes:</p>
<ul>
<li><code>icon</code>. The icon to show in the callout box. (Default: <code>check-circle</code>)</li>
<li><code>type</code> Callout box type. (Default: <code>primary</code>)</li>
<li><code>method</code> (Default: <code>solid</code>)</li>
</ul>
<h3>Gutenberg Block</h3>
<p>For Gutenberg users, you can use <strong>Callout Box</strong> block.</p>
<p>Every Gutenberg Callout Box, you can change the icon, type and method using the block properties.</p>
<p>Those properties are the same for the shortcode.</p>
<p>Then, you just type your callout box content inside the Gutenberg block.</p>
<h3>Block Presets</h3>
<p>When you insert a new Gutenberg Block Callout you can select 1 of the 4 presets installed in the plugin:</p>
<ul>
<li>Information</li>
<li>Success</li>
<li>Danger</li>
<li>Warning</li>
</ul>
<p>After you select one preset, your callout box will change its background color and icon.</p>


Callout Boxes

Insert callout boxes in your posts and pages using shortcodes and Gutenberg blocks.

Notices API vs Callout Boxes