Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Play alert when new content is added WordPress

  • SOLVED

Hi, I'm trying to figure out how to play an alert sound when new content (post) is added to a custom post type.

Here's the thing - the site allows users to add new content, and I want to be alerted (by sound) when new content has been added.

So here's what I've tried so far:

I tried to do this using jquery by reloading the custom post page (in wp-admin) each 60 seconds. If new content had been added by that time it would show up as it should, but I could't figure out how to play an alert ONLY if there was new content.

Another way to do this (I think) would be to check if new data has been added, reload the page and play alert. Maybe this could also be done using ajax?

I appreciate the help I can get to figure out the best way.

- Howie

Answers (4)

2014-04-15

Dbranes answers:

This sounds like a job for the<strong> Heartbeat API.</strong>

There are many great tutorials out there, but I think this demo plugin might give you a good idea how to implement it:

[[LINK href="https://github.com/micc83/wp-heartbeat-notify"]]https://github.com/micc83/wp-heartbeat-notify[[/LINK]]

<blockquote>Wp Heartbeat Notify, display a realtime custom message to your visitor each time a new post is published with a link redirecting to it.</blockquote>

You could then consider adding the player to the notification popup ;-)

<strong>Update:</strong>

I modified it to work with a DING DONG ;-)

Here's the notification with the visible player on auto-play from the front-end:

[[LINK href="http://i.imgur.com/jK17k5T.gif"]]http://i.imgur.com/jK17k5T.gif[[/LINK]]

You can follow these steps to replicate it:

<strong>Step 1:</strong>

Install and activate the <em>wp-heartbeat-notify</em> plugin.

<strong>Step 2:</strong>

Save the following code to the <em>ding-dong.php </em> file, in your plugins directory and activate it:


Raw version to copy/paste:[[LINK href="http://pastie.org/pastes/9086295/text"]] http://pastie.org/pastes/9086295/text[[/LINK]]

<?php
/**
* Plugin Name: Ding-Dong
* Description: Notification with a sound - an extension of the wp-heartbeat-notify plugin
* Plugin URI: http://www.wpquestions.com/question/showChronoLoggedIn/id/9487
* Version: 0.1
*/


//---------------------------------------------------
// Remove hooks from the wp-heartbeat-notify plugin
//

add_action( 'plugins_loaded', 'dingdong_remove_hooks', 999 );

function dingdong_remove_hooks()
{
remove_action( 'init', 'initialize_wp_heartbeat_notify' );
remove_filter( 'publish_post', 'notify_published_post' );
}



//---------------------------------------------
// Instantiate our own Heartbeat notifications
//

add_action( 'init', 'dingdong_notify' );

function dingdong_notify()
{
if( ! class_exists( 'Wp_Heartbeat_Notify' ) ) return;

$notify_obj = new Wp_Heartbeat_Notify( array(
'context' => array( 'front', 'admin' ), // Where to notify?
'base_url' => sprintf( '%s/wp-heartbeat-notify', plugins_url() ), // Set js and css base url
'interval' => 15, // Heartbeat interval
'capability' => 'manage_options', // Capability restriction to recieve notifications

) );
}


//--------------------------------------
// Let's hook into Post publication
//

add_filter( 'publish_post', 'dingdong_published_post' );

function dingdong_published_post( $post_id )
{
if( ! class_exists( 'Wp_Heartbeat_Notify' ) ) return;

// HTML5 audio player, add more sources to your needs
$audio = '<audio autoplay>
<source src="dingdong.mp3" type="audio/mpeg">
<source src="dingdong.ogg" type="audio/ogg">
</audio>';

// That's it. Easy... isn't?
Wp_Heartbeat_Notify::notify( array(
'title' => __( 'Ding dong! New Article', 'dingdong' ),
'content' => __( 'There\'s a new post, why don\'t you give a look at', 'dingdong' ) .
$audio . ' <a href="' . get_permalink( $post_id ) . '">' . get_the_title( $post_id ) . '</a>',
'type' => 'update'
) );

return $post_id;

}


<strong>Step 3:</strong>
Edit the <em>Ding-Dong</em> plugin your needs:

- It uses the HTML5 audio player ( no controls + autoplay ) where you have to modify the sources to your needs.

- You can use this for any custom post type, just hook into <em>publish_{custom_post_type}</em> hook.

- As you can see, we can display the notifications in the <em>front</em>, in the <em>admin</em>, or both.

- We can set the capability, users must have to receive notifications. For example <em>manage_options</em> for admins only.

- We must also set the <em>base_url</em> property. You can for example locate the js/css files in your active theme's directory,
but I choose the plugin directory instead.


<strong>Notice:</strong>
The plugin author forgot one line in the <em>wp-heartbeat-notify.php</em> file, when he updated it yesterday regarding the issue that I reported. I've already notified him.

He will most likely fix this soon, but in the meanwhile replace line [[LINK href="https://github.com/micc83/wp-heartbeat-notify/blob/master/wp-heartbeat-notify/wp-heartbeat-notify.php#L29"]]#29[[/LINK]]:


function initialize_wp_heartbeat_notify () {


with:


function initialize_wp_heartbeat_notify () {
global $my_plugin;


Also, the plugin author uses <em>add_filter</em> instead of <em>add_action</em> for the publish hook, but that should be alright. I will let him know about this.

---

Very fun to play with ;-)


Dbranes comments:

It worked both in the <em>admin</em> and the <em>front</em> contexts.

ps: I contacted the plugin author about the instantiation problem (i.e. beeing too early), but we got that fixed above.


Dbranes comments:

... that was quick, the plugin author just updated the plugin with the fix ;-)


haurs comments:

Thank you so much Dbranes! What a job you did! I tried another solution (below) and got it working automatic in the background on page refresh. But looking at this I think it would even be a better approach - specially when things seem to happen without having to force refresh page.

I only want to play a sound for those who are loged into the admin area when a new custom post has been added. Just as a notification system. I think I'll give this a try tomorrow!


Dbranes comments:

Hi @haurs, I updated the answer with a custom plugin instead, to make it easier for you to implement.


haurs comments:

Hi!

I've been trying this out but without any luck of getting it working. I got the latest WP installed, and have also tried using only the heartbeat plugin as well. But nothing shows up when I publish a new post or custom post type.

I have also tried to publish new post as admin, and have another browser open just as a visitor, but still no message. I have also tried to add new post using a new user - while being logged in as admin in another browser as well - but still no results.

Any idea?

2014-04-15

Hariprasad Vijayan answers:

Hi,

You can try like this,

Add a function for storing published post id in wp_options table when publishing post. The code would be like

add_action( 'publish_cptname', 'update_postid' );
function update_postid($post_id)
{
if( ( $_POST['post_status'] == 'publish' ) && ( $_POST['original_post_status'] != 'publish' ) ) {
update_option( 'new_updated_id', $post_id );
}
}

You need to replace "cptname" with your custom post type.
Then, check the value using function.(You mentioned about you are refreshing page in each 60 second)
The code would be like this

function check_new_post(){
$new_id = get_option( 'new_updated_id' );
$prev_id = get_option( 'prev_updated_id' );
if(!$new_id && !$prev_id)
{
add_option( 'new_updated_id', '' );
add_option( 'prev_updated_id', '' );
}
if($new_id != $prev_id)
{
// Here you can initialize code to play sound

update_option( 'prev_updated_id', $new_id );
}
}
add_action( 'admin_init', 'check_new_post', 1 );

You can also use the code mentioned in check_new_post() function in your current set of code.
Let me know if you need help.


haurs comments:

Thanks a lot Hariprasad! Your solution worked great. Now it plays a sound when the main custom post overview refreshed (if new post has been added since the last refresh).


Hariprasad Vijayan comments:

Great. Let me know if you need any further help

2014-04-15

Fahad Murtaza answers:

So have you coded anything yet which shows updated custom post types?

2014-04-15

Just Me answers:

I don't think you need to build something yourself. Checkout check4change. With this FireFox addon you select the text that is going to change when new content arrives (for example a counter). It will play sound and/or bring the page to front and so on.