Raihanul Islam

Easily add unlimited alert boxes for the new WordPress block editor. This includes dismissible alert notices.
This plugin works only in the Gutenberg/Block editor. Please use WordPress 5.0 and above or the Gutenberg plugin for pre 5.0 WordPress installations.

Awesome Alert Blocks

Awesome Alert Blocks notices for the new WordPress block editor.

Phil Ewels

A WordPress Customise Widget to add a global website banner, styled using a <a href="https://getbootstrap.com/docs/4.4/components/alerts/" rel="nofollow ugc">Bootstrap alert box</a>.
The plugin assumes that you’re already using Bootstrap, so you need to load the Bootstrap javascript and CSS separately.
<ul>
<li><a href="http://getbootstrap.com/" rel="nofollow ugc">Download Twitter Bootstrap</a></li>
<li><a href="http://www.bootstrapcdn.com/" rel="nofollow ugc">Bootstrap CDN</a> (directly link CSS and javascript files)</li>
<li><a href="https://getbootstrap.com/docs/4.4/components/alerts/" rel="nofollow ugc">Bootstrap Alerts in action</a></li>
</ul>
Once installed, you can add the alert to the correct location in your theme (for example, in <code>header.php</code> with the <code>global_bootstrap_banner()</code> function. 
For example:
<pre><code>if (function_exists('global_bootstrap_banner')){
 echo global_bootstrap_banner();
}
</code></pre>
If you prefer, you can use a shortcode instead:
<pre><code>[global-bootstrap-banner]
</code></pre>
<h4>Shortcode Options</h4>
The plugin works best when using the Customizer interface. However, if you wish you can use a shortcode and override most fields.
<ul>
<li><code>enabled</code> (default <code>true</code>)
<ul>
<li>Whether to show the banner or not.</li>
</ul>
</li>
<li><code>colour</code> (default <code>alert-primary</code>)
<ul>
<li>Bootstrap class to use for styling the alert.</li>
</ul>
</li>
<li><code>header_text</code>
<ul>
<li>Header – leave blank to skip the alert header.</li>
</ul>
</li>
<li><code>body_text</code>
<ul>
<li>Main text for the alert. You can use HTML.</li>
</ul>
</li>
<li><code>link_text</code>
<ul>
<li>Display text for a button at the bottom of the alert. Leave blank to skip.</li>
</ul>
</li>
<li><code>link_url</code>
<ul>
<li>URL for button to link to.</li>
</ul>
</li>
<li><code>link_class</code> (default <code>btn-primary</code>)
<ul>
<li>Bootstrap class to use for styling the button.</li>
</ul>
</li>
<li><code>link_new_window</code> (default <code>false</code>)
<ul>
<li>Whether to open the link in a new window or not.</li>
</ul>
</li>
<li><code>link_btn_lg</code> (default <code>false</code>)
<ul>
<li>Use the <code>btn-lg</code> class for the button (big button).</li>
</ul>
</li>
<li><code>link_btn_sm</code> (default <code>false</code>)
<ul>
<li>Use the <code>btn-sm</code> class for the button (small button).</li>
</ul>
</li>
<li><code>link_btn_block</code> (default <code>false</code>)
<ul>
<li>Use the <code>btn-block</code> class for the button (full width button).</li>
</ul>
</li>
<li><code>dismiss_btn</code> (default <code>true</code>)
<ul>
<li>Whether to show a dismiss button in the corner of the alert.</li>
</ul>
</li>
<li><code>dismiss_expiry</code> (default <code>14</code>)
<ul>
<li>How many days the dismissal cookie should last for before it is shown again.</li>
</ul>
</li>
<li><code>dismiss_id</code>
<ul>
<li>Random string to use for the dismissal cookie. Use a new one to force it to show for everyone.</li>
</ul>
</li>
<li><code>alert_before</code> (default <code><div class="global-bootstrap-banner container"></code>)
<ul>
<li>HTML to use before the alert.</li>
</ul>
</li>
<li><code>alert_after</code> (default <code></div></code>)
<ul>
<li>HTML to use after the alert.</li>
</ul>
</li>
<li><code>header_before</code> (default <code><h4 class="global-bootstrap-banner-heading alert-heading"></code>)
<ul>
<li>HTML to use before the heading.</li>
</ul>
</li>
<li><code>header_after</code> (default <code></h4></code>)
<ul>
<li>HTML to use after the heading.</li>
</ul>
</li>
<li><code>link_before</code> (default <code></code>)
<ul>
<li>HTML to use before the button.</li>
</ul>
</li>
<li><code>link_after</code> (default <code></code>)
<ul>
<li>HTML to use after the button.</li>
</ul>
</li>
</ul>
For example, a simple shortcode usage would be:
<pre><code>[global-bootstrap-banner body_text="This alert says something different"]
</code></pre>
Note that the shortcode first takes the settings from the Customizer and then overwrites these. 
So the above shortcode would show a header if it is set in the Customizer settings.
<h4>Credits</h4>
This plugin was written by <a href="https://github.com/ewels" rel="nofollow ugc">@ewels</a>.
<h4>Contributing</h4>
If you would like to contribute to this plugin, please go to the <a href="https://github.com/ewels/global-bootstrap-banner" rel="nofollow ugc">GitHub repository</a> and make a personal fork of the development version. You can then make your changes and submit a pull request. I will happily review the code and then merge when we’re both happy.

Global Bootstrap Banner

Add a global website banner using a Bootstrap alert box.

Awesome Alert Blocks vs Global Bootstrap Banner