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.

HooThemes

Magee Shortcodes is WordPress plugin that provides a pack of shortcodes. It is based on Bootstrap and coded with HTML5 and CSS3 language, fully responsive in desktops and mobile devices With enriched settings in options, you could easily create column, section, feature box, person, testimonial and much more.You can also customize post & page layouts using shortcode generator with one simple click, see how your inserted shortcode effects before it goes live with shortcode preview function. Still, more shortcodes coming soon.
<h3>Magee Shortcodes Included</h3>
<h3>Shortcodes</h3>
<ul>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/accordion-shortcode/" rel="nofollow ugc">Accordion Shortcode</a> (FREE): Accordion shortcode is a vertically collapsing element to show and hide content via click heading panel, It is very suitable for FAQs page.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/alert-shortcode/" rel="nofollow ugc">Alert Shortcode</a> (FREE): Alert shortcode provides an easy way to create predefined alert、warning、error、notice message box.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/animation-shortcode/" rel="nofollow ugc">Animation Shortcode</a> (FREE): Animation shortcode lets an element gradually change from one style to another. You can change as many properties you want, as many times as you want.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/audio-shortcode/" rel="nofollow ugc">Audio Shortcode</a> (FREE): Audio shortcode create mp3\ogg\wav audio player.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/blog-shortcode/" rel="nofollow ugc">Blog Shortcode</a> (FREE): Four blog list styles including Image above content, Image beside content and blog timeline.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/button-shortcode/" rel="nofollow ugc">Button Shortcode</a> (FREE): There are 8 button styles and 4 button size you can choose.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/carousel-shortcode/" rel="nofollow ugc">Carousel Shortcode</a> (FREE): It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/chart-bar-shortcode/" rel="nofollow ugc">Bar Chart Shortcode</a> (FREE): Bar Chart shortcode provides an easy way to create bar charts with chart data.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/chart-doughnut-shortcode/" rel="nofollow ugc">Doughnut Chart Shortcode</a> (FREE): You can now create a clean and minimalist animated chart that’s also fully customizable. This animated donut chart can be very effective in regards to data representation.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/chart-line-shortcode/" rel="nofollow ugc">Line Chart Shortcode</a> (FREE): Line Chart is drawn by interconnecting all data points in data series using straight line segments.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/chart-pie-shortcode/" rel="nofollow ugc">Pie Chart Shortcode</a> (FREE): Pie Chart is a type of graph that displays data in a circular shape and is generally used to show percentage or proportional data.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/countdowns-shortcode/" rel="nofollow ugc">Countdown Timer Shortcode</a> (FREE): Set the day, hour, minute, and second for the online countdown timer, and start it. Alternatively, you can set the date and time to count till (or from) the event.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/counter-shortcode/" rel="nofollow ugc">Counter Shortcode</a> (FREE): Counter up with the number animation.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/divider-shortcode/" rel="nofollow ugc">Divider Shortcode</a> (FREE): Divider Shortcode provides 10 styles of divider.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/document-shortcode/" rel="nofollow ugc">Document Viewer Shortcode</a> (FREE): Document Viewer Shortcode is a shortcode that can open all of your internet documents directly from web browser.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/dropcap-shortcode/" rel="nofollow ugc">Dropcap Letter Shortcode</a> (FREE): A dropcap is the first letter of a chapter and is derived from the Latin for “standing at the beginning”.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/feature-boxes-shortcode/" rel="nofollow ugc">Feature Boxes Shortcode</a> (FREE): Feature Boxes Shortcode with optional icons/images and multiple layouts.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/divider-shortcode/" rel="nofollow ugc">Flip Box Shortcode</a> (FREE): Flip Box shortcode is basically a div which flips when you hover over a certain element and can be achieved using CSS alone.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/google-map-shortcode/" rel="nofollow ugc">Google Map Shortcode</a> (FREE): Google map with custom infobox.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/heading-shortcode/" rel="nofollow ugc">Heading Shortcode</a> (FREE): Heading Shortcode provides 5 styles of heading.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/highlight-shortcode/" rel="nofollow ugc">Highlight Shortcode</a> (FREE): Text highlight with custom background color.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/image-compare-shortcode/" rel="nofollow ugc">Image Compare Shortcode Shortcode</a> (FREE): Image Compare Shortcode is a slider that can be controlled, can be pulled by the customer to show less of the before image and a more noteworthy measure of the after image, and the a different way. These types of image comparison sliders are quite popular at the moment and very effective in showing the differences between 2 images.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/image-frame-shortcode/" rel="nofollow ugc">Image Frame Shortcode</a> (FREE): Image with lightbox or custom link.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/list-shortcode/" rel="nofollow ugc">List Shortcode</a> (FREE): Text list with custom icons.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/modal-shortcode/" rel="nofollow ugc">Modal Box Shortcode</a> (FREE): The Modal Box shortcode is a dialog box/popup window that is displayed on top of the current page.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/person-shortcode/" rel="nofollow ugc">Person Shortcode</a> (FREE): Person shortcode is used to display team member information.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/piechart-shortcode/" rel="nofollow ugc">Piechart Shortcode</a> (FREE): Pie chart with custom color and percentage.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/popover-shortcode/" rel="nofollow ugc">Popover Shortcode</a> (FREE): The Popover shortcode is like a tooltip, but it can persist after hovering off or click. It allows displaying more content including header & footer.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/portfolio-shortcode/" rel="nofollow ugc">Portfolio Shortcode</a> (FREE): Portfolio list with categories filter or carousel.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/process-steps-shortcode/" rel="nofollow ugc">Process Steps Shortcode</a> (FREE): Process Steps with custom icons.
</li>
<li>
<a href="https://www.hoosoft.com/plugins/magee-shortcodes/portfolio-shortcode/" rel="nofollow ugc">Progress Bar Shortcode</a> (FREE): Progress Bar with stripe & animation.
</li>
</ul>
<h3>Key Features</h3>
<ul>
<li>Shortcode Generator</li>
<li>Shortcode Preview</li>
<li>Modern design</li>
<li>Fully responsive</li>
<li>Built with HTML5+CSS3</li>
<li>Font Awesome Icons</li>
<li>Easily extendable</li>
</ul>
<h3>Relevant Links</h3>
<ul>
<li><a href="//www.hoosoft.com/plugins/magee-shortcodes/" rel="nofollow ugc">Examples</a></li>
<li><a href="https://www.hoosoft.com/plugins/magee-shortcodes/accordion-shortcode/" rel="nofollow ugc">Beginner Guide</a></li>
</ul>
<h3>Shortcode List</h3>
Accordion, Alert, Audio, Button, Column, Custom Box, Countdowns, Counter, Divider, Dropcap, Document Viewer, Dummy Text, Dummy Image, Dailymotion, Expand, Feature Box, Flip Box, Highlight, Heading, Icon, Image Frame, Image Compare, List, Label, Modal, Menu, Popover, Person, Promo Box, Pie chart, Panel, Progress, Pullquote, QR Code, Quote, Slider, RSS Feed, Social, Section, Scheduled, Tooltip, Tab, Testimonial, Timeline, Targeted, Video, Vimeo, Youtube

Magee Shortcodes

Magee Shortcodes is WordPress plugin that provides a pack of shortcodes. It is based on Bootstrap and coded with HTML5 and CSS3 language, fully respon …

Global Bootstrap Banner vs Magee Shortcodes