Notice Box Shortcode
Adds a [notice] shortcode for colored info, success, warning and error boxes that make tips and important warnings stand out in your content.
Opens WPIDE on
Code
add_shortcode( 'notice', function ( $atts, $content = '' ) {
$atts = shortcode_atts( array( 'type' => 'info', 'title' => '' ), $atts, 'notice' );
$colors = array(
'info' => array( '#f0f6fc', '#2271b1' ),
'success' => array( '#edfaef', '#00a32a' ),
'warning' => array( '#fcf9e8', '#dba617' ),
'error' => array( '#fcf0f1', '#d63638' ),
);
$type = isset( $colors[ $atts['type'] ] ) ? $atts['type'] : 'info';
$style = sprintf( 'margin:1.5em 0;padding:1em 1.25em;background:%s;border-left:4px solid %s;color:#1d2327;border-radius:2px;', $colors[ $type ][0], $colors[ $type ][1] );
$title = '' !== $atts['title'] ? '<p style="margin:0 0 .4em;"><strong>' . esc_html( $atts['title'] ) . '</strong></p>' : '';
return '<div class="wpide-notice wpide-notice-' . esc_attr( $type ) . '" role="note" style="' . esc_attr( $style ) . '">' . $title . wpautop( do_shortcode( wp_kses_post( (string) $content ) ) ) . '</div>';
} );Notes
Example: [notice type="warning" title="Heads up"]Back up first.[/notice]. Types are info, success, warning and error.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.