Alerts

The alert shortcode allows WordPress administrators to easily post an “alert” anywhere on their page. The alert has multiple versions, depending on the message you want to convey.

Alerts should be used for notifications or to help share important information to your site visitors. The number of alerts per page should never exceed two as to ensure alerts actually do their purpose of standing out from the rest of the content.

The content of your alerts should be concise and to the point. They should rarely exceed more than 2-4 sentences.

Alert Shortcode Parameters

The parameters for the alert shortcode:

  • Type (type): There are 4 options for type of alert:
    • Red – This type will display the alert background as light red with red font.
    • Green – This type will display the alert background as green with white font.
    • Black – This type will display the alert background as black with white font.
    • Neutral – If you do not set any type parameter the alert box will display with a light gray background and black font.
  • Title (title): If you include the title parameter and value it will display the value as an uppercase, bold title for your alert box.
  • Icons (icon): You can include one of several included icons on the left side of the alert (see list below).
Dos
  • Convey important information
  • Notify users of time sensitive information
Don'ts
  • The content of an alert should rarely exceed more than 5 sentences
  • Pages should not have multiple alerts
  • Use alerts for design/layout purposes
  • Wrap the alerts in any HTML tags or other shortcodes

Icons

Here are the available icons that you can use with this shortcode.

Alert Shortcode Examples

Default Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.
[mu_alert]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.[/mu_alert]
Copy Code to Clipboard

Red Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.
[mu_alert type="red"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.[/mu_alert]
Copy Code to Clipboard

Green Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.
[mu_alert type="green"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.[/mu_alert]
Copy Code to Clipboard

Black Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.
[mu_alert type="black"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.[/mu_alert]
Copy Code to Clipboard

Red Alert with Title

Sed Sagittis Libero
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.
[mu_alert type="red" title="Sed Sagittis Libero"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas <a href="#">sed varius leo</a>, sed sagittis libero.[/mu_alert]
Copy Code to Clipboard

Red Alert with Title and Warning Icon

Sed Sagittis Libero
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.
[mu_alert type="red" title="Sed Sagittis Libero" icon="warning"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas <a href="#">sed varius leo</a>, sed sagittis libero.[/mu_alert]
Copy Code to Clipboard

Green Alert with Announcement Icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.
[mu_alert type="green" icon="announcement"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas <a href="#">sed varius leo</a>, sed sagittis libero.[/mu_alert]
Copy Code to Clipboard