Wordpress Front end notifications

class-frontend-box.php

<?php
/**
 * Frontend_box class will help you to create bootstrap style alert boxes on your theme
 * @author Damian Logghe <[email protected]>
 * @license   GPL-2.0+
 * @link      http://wp.timersys.com/how-to-create-bootstraps-style-alert-boxes-in-your-theme/
 * @version 1.0
 */
class Frontend_box {

	/**
	 * Arguments of the alert
	 * @var Array
	 */
	private $args;

	/**
	 * Message to show
	 * @var string
	 */
	private $msg;

	/**
	 * Construct function that set message and default args
	 * @param string $msg  
	 * @param array $args 
	 */
	public function __construct(  $msg, $args = '' ) {

		$defaults 		= array(
			'type'			=> 'error', //success, info, warning
			'where'			=> 'header', // define your own locations
			'auto_close'	=> true, // disable auto hide
			'delay'			=> '5', // seconds to auto close
		);

		$this->args 	= wp_parse_args( $args, $defaults );

		$this->msg 		= $msg;

		$this->run();
	}

	/**
	 * Function that hooks our alert box into the proper location
	 * @return void
	 */
	public function run(){
	
		add_action( 'front_end_box/' . $this->args['where'], array( $this, 'print_box' ) );
	
	}

	/**
	 * Prints the alert box
	 * @return void
	 */
	public function print_box(){
		?>
		<div class="frontend_box frontend_box-<?php echo $this->args['type'];?>" data-delay="<?php echo $this->args['delay'];?>" data-auto-close="<?php echo $this->args['auto_close'] ? 'true':'';?>">
			<button type="button" class="frontend_box_close">
				<span aria-hidden="true">&times;</span>
				<span class="sr-only">Close</span>
			</button>
			<?php echo $this->msg;?>	
		</div>
		<?php
	}

}

frontend_box.css

/**
 * Alerts
 * This is basiccaly same style as bootstrap use. Change to suit your needs.
 */
.frontend_box {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding-right: 35px;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
  display: none;
}
.frontend_box h4 {
  margin-top: 0;
  color: inherit;
}
.frontend_box .frontend_box-link {
  font-weight: bold;
}
.frontend_box > p,
.frontend_box > ul {
  margin-bottom: 0;
}
.frontend_box > p + p {
  margin-top: 5px;
}

.frontend_box .frontend_box_close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}
.frontend_box-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.frontend_box-success hr {
  border-top-color: #c9e2b3;
}
.frontend_box-success .frontend_box-link {
  color: #2b542c;
}
.frontend_box-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.frontend_box-info hr {
  border-top-color: #a6e1ec;
}
.frontend_box-info .frontend_box-link {
  color: #245269;
}
.frontend_box-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.frontend_box-warning hr {
  border-top-color: #f7e1b5;
}
.frontend_box-warning .frontend_box-link {
  color: #66512c;
}
.frontend_box-error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.frontend_box-error hr {
  border-top-color: #e4b9c0;
}
.frontend_box-error .frontend_box-link {
  color: #843534;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

.frontend_box button.frontend_box_close {
	-webkit-appearance: none;
	padding: 0;
	cursor: pointer;
	background: 0 0;
	border: 0;
	position: relative;
	top: -2px;
	right: -21px;
	color: inherit;
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	filter: alpha(opacity=20);
	opacity: .2;
}

frontend_box.js

  /**
   * Frontend boxes
   */

   $('.frontend_box').each(function(){
        console.log($(this).data('auto-close'));
        if( $(this).data('auto-close') == true ){

            $(this).slideDown().delay( $(this).data('delay') * 1000 ).fadeOut();

        } else {

            $(this).slideDown();

        }

   });
   $('.frontend_box_close').on('click', function(e){
          e.preventDefault();
          $(this).parents('.frontend_box').fadeOut();
   });