Real-time new post notification in frontend using toastr
wp_enqueue_style( 'toastr', 'https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css' );
wp_enqueue_script( 'toastr', 'https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js', array('jquery'));
$post_types=get_post_types(['public' => true, '_builtin' => true],'names');
foreach($post_types as $post_type){
add_action( 'publish_'.$post_type, 'wop_notify_published_post' );
}
function wop_heartbeat_settings( $settings ) {
$settings['interval'] = 15; //Anything between 15-60
$settings['autostart'] = true;
return $settings;
}
add_filter( 'heartbeat_settings', 'wop_heartbeat_settings' );
//PUBLISH POST NOTIFY
function wop_notify_published_post( $post_id ) {
$post = get_post( $post_id );
$args=array(
'title'=>'New '.$post->post_type.' just published',
'content'=>'<a href="'.get_permalink($post_id).'">'.$post->post_title.'</a>',
'type'=>'info'
);
set_transient( 'wop_notify_post'.'_'. mt_rand( 100000, 999999 ), $args, 25 );
}
//INIT
function wop_notify_init(){
wp_enqueue_script('heartbeat'); //enqueue the Heartbeat API
}
add_action("init", "wop_notify_init");
function wop_heartbeat_received($response, $data){
global $wpdb;
$data['wop_notify'] = array();
if($data['notify_status'] == 'ready') {
$sql = $wpdb->prepare(
"SELECT * FROM $wpdb->options WHERE option_name LIKE %s",
'_transient_' . 'wop_notify' . '_%'
);
$notifications = $wpdb->get_results( $sql );//retrieve all publish post objects
if ( empty( $notifications ) ) {
return $data;
}
foreach ( $notifications as $db_notification ) {
$id = str_replace( '_transient_', '', $db_notification->option_name );
if ( false !== ($notification = get_transient($id))) {
$data['wop_notify'][$id] = $notification;
}
}
}
return $data;
}
add_filter('heartbeat_received', 'wop_heartbeat_received', 10, 2);
add_filter('heartbeat_nopriv_received', 'wop_heartbeat_received', 10, 2);
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"positionClass": "toast-bottom-right",
"preventDuplicates": true,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "10000",
"extendedTimeOut": "3000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "slideDown",
"hideMethod": "fadeOut"
}
jQuery(document).ready(function($) {
$(document).on('heartbeat-send', function(e, data) {
data['notify_status'] = 'ready'; //need some data to kick off AJAX call
});
$(document).on('heartbeat-tick', function(e, data) {
if(!data['wop_notify']) {
return;
}
jQuery.each( data['wop_notify'], function( index, notification ) {
setTimeout(function() {
if ( index != 'blabla' ){
toastr[notification['type']](notification['title'], notification['content']);
}
}, index * 1000 );
});
});
jQuery(document).on('heartbeat-error', function(e, jqXHR, textStatus, error) {
console.log('BEGIN ERROR');
console.log(textStatus);
console.log(error);
console.log('END ERROR');
});
});