Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Wordpress Front end notifications
<?php
/**
* Frontend_box class will help you to create bootstrap style alert boxes on your theme
* @author Damian Logghe <info@timersys.com>
* @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
}
}
/**
* 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 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();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.