Global Bootstrap Banner

A WordPress Customise Widget to add a global website banner, styled using a Bootstrap alert box.

The plugin assumes that you’re already using Bootstrap, so you need to load the Bootstrap javascript and CSS separately.

• Download Twitter Bootstrap
• Bootstrap CDN (directly link CSS and javascript files)
• Bootstrap Alerts in action

Once installed, you can add the alert to the correct location in your theme (for example, in header.php with the global_bootstrap_banner() function.
For example:

if (function_exists('global_bootstrap_banner')){ echo global_bootstrap_banner(); } 

If you prefer, you can use a shortcode instead:

[global-bootstrap-banner] 

Shortcode Options

The plugin works best when using the Customizer interface. However, if you wish you can use a shortcode and override most fields.

• enabled (default true)
  • Whether to show the banner or not.
• colour (default alert-primary)
  • Bootstrap class to use for styling the alert.
• header_text
  • Header – leave blank to skip the alert header.
• body_text
  • Main text for the alert. You can use HTML.
• link_text
  • Display text for a button at the bottom of the alert. Leave blank to skip.
• link_url
  • URL for button to link to.
• link_class (default btn-primary)
  • Bootstrap class to use for styling the button.
• link_new_window (default false)
  • Whether to open the link in a new window or not.
• link_btn_lg (default false)
  • Use the btn-lg class for the button (big button).
• link_btn_sm (default false)
  • Use the btn-sm class for the button (small button).
• link_btn_block (default false)
  • Use the btn-block class for the button (full width button).
• dismiss_btn (default true)
  • Whether to show a dismiss button in the corner of the alert.
• dismiss_expiry (default 14)
  • How many days the dismissal cookie should last for before it is shown again.
• dismiss_id
  • Random string to use for the dismissal cookie. Use a new one to force it to show for everyone.
• alert_before (default <div class="global-bootstrap-banner container">)
  • HTML to use before the alert.
• alert_after (default </div>)
  • HTML to use after the alert.
• header_before (default <h4 class="global-bootstrap-banner-heading alert-heading">)
  • HTML to use before the heading.
• header_after (default </h4>)
  • HTML to use after the heading.
• link_before (default <p class="global-bootstrap-banner-btn-p mb-0">)
  • HTML to use before the button.
• link_after (default </p>)
  • HTML to use after the button.

For example, a simple shortcode usage would be:

[global-bootstrap-banner body_text="This alert says something different"] 

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.

Credits

This plugin was written by @ewels.

Contributing

If you would like to contribute to this plugin, please go to the GitHub repository 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.