How to close cookie notification bar and expiration date with php?

Question

In my previous question, I was looking for a way to create a notification on my WordPress site when a new post is posted. After a great answer, this works very well. I can change the settings for how long this message should be displayed after the publication has been published. When the time is up, the message will disappear.

goal

Thus, it works absolutely fine, special thanks to Pieter Goosen, but if the user saw the message once, I want to give the opportunity to close the notification panel and make sure that it no longer appears to the user in order to refresh the page; telksens returns a message, unless, of course , a new publication is published again.

Question

How can i do this? I was thinking about javascript. For the function, of course, there should be one function that controls the close button, I think there should also be a function for cookies to check if the user closed the message or not, and during this time the timer is checked so that both synchronize each other with friend.

You can find my previous notification question here:

How to calculate the total number of messages from selected message types?

[UPDATE] I just sit down and try to keep the structure of the notification bar clear, so I put it in a nutshell to make sure it works, so the PieterGoosen code checks to see if there is a new message in WordPress and a notification bar is displayed. Then the panel should be closed after a period of time or when the user clicked the close button. Therefore, the code should also verify this. If the user presses the close button == YES, then the cookie must be set (the cookie must synchronize with the time set in PHP), so it will delete the cookie when a new message appears. If the user does not click the close button, then check, and if the time is up, delete the cookie as well.

Answer 1

I have a solution. I tested the code as much as possible with as many scripts as I could think.

I use the same code as in this answer to this question . Therefore, I will no longer deal with this sect

WORKSFLOW PART 1

We are going to use jquery to hide the notification bar and cookie, which will have two purposes, to keep the last message identifier and keep the notification hidden until the publication of a new publication or expiration

To accomplish this, we will use the hide() function in jquery to hide the notification bar when the user hide button is clicked. You can customize this button as needed or use any other character.

Now we need to use some method to keep the button hidden until the publication of a new publication. This will be done by setting a cookie when you click hide. The cookie expires after 2 days, so if a new message is not issued within these two days, the cookie will automatically expire. To set a cookie, we need to download the jquery cookie plugin. This plugin will also force the deletion of cookies when a new message is posted, when the cookie is still set.

This section is heavily dependent on the message identifier set in our new_post_notification . The problem is that you cannot pass php variables directly to jquery. Fortunately, Wordpress has a wp_localize_script function that we can use to pass the message id to the jquery script, where we will use it for this as a cookie value.

This is the end of section 1, allows you to get encoding

SECTION IET CODE 1

First, download the plugin, extract it and copy the jquery.cookie.js file into the js folder of your theme. Then create a new file in the js folder and name it hide.notification.bar.js . Open this newly created file and paste the following code and save it

 jQuery(document).ready(function($) { $("#notification_hide_button").click(function(){ $(this).hide(); $(".notifications_bar").hide(); if ($.cookie( 'hide_post_cookie' ) ) { $.cookie( 'hide_post_cookie', null ) } var post_id = parseInt( cookie_Data.post_id, 10 ); $.cookie( 'hide_post_cookie', post_id, { expires: 2, path: '/' } ); }); }); 

This is the code used to hide the notification bar and which sets the cookie. var post_id = parseInt( cookie_Data.post_id, 10 ); will contain the message id, which is the most important piece of information here.

Now we need to register and queue these two js files and set the message identifier to the wp_localize_script function. Open the functions.php file and paste the following into it. If you already have a wp_enqueue_scripts hook in your theme, just remove the appropriate code from it and paste it into funtion

 function enqueue_cookie_scripts() { wp_enqueue_script( 'jquery-cookie', get_template_directory_uri() . '/js/jquery.cookie.js', array( 'jquery' ), '' , true ); wp_register_script( 'set-cookie-option', get_template_directory_uri() . '/js/hide.notification.bar.js', array( 'jquery', 'jquery-cookie'), '' , true ); $cookie_data = array( 'post_id' => get_option( 'new_post_notification' )->ID ); wp_localize_script( 'set-cookie-option', 'cookie_Data', $cookie_data ); // this one do the magic wp_enqueue_script( 'set-cookie-option' ); } add_action( 'wp_enqueue_scripts', 'enqueue_cookie_scripts' ); 

You can also copy and paste a function that sets the new_post_notification parameter when publishing a new publication. For help on how this code works, check out here . This code goes into .php functions

 add_action( 'transition_post_status', function ( $new_status, $old_status, $post ) { //Check if our post status then execute our code if ( $new_status == 'publish' && $old_status != 'publish' ) { if ( get_option( 'new_post_notification' ) !== false ) { // The option already exists, so we just update it. update_option( 'new_post_notification', $post ); } else { add_option( 'new_post_notification', $post ); } } }, 10, 3 ); 

WORKSFLOW PART 2

Now we have everything that is needed for jquery to work, now we need to install a function that displays a notification bar and displays a hide and delete cookie if a new post is set, if the cookie has not expired.

This code has been well-commented, so you will have trouble running it. The most important sections here are getting the cookie value, which is stored in a global variable and can be obtained using $_COOKIE['hide_post_cookie'] . This is actually a message identifier, this will be checked for a message stored in get_option( 'new_post_notification' )->ID

A hidden button will hide something inside the <div class="notifications_bar"></div> , so you will add a notification bar inside this div. Adjust as needed.

I added all the code inside the function, which you can call in your header as follows

 echo get_new_post_notification_bar(); 

SECTION 2 CODE

This code is also included in your functions. php

 function get_new_post_notification_bar() { // Get the new_post_notification which holds the newest post $notification = get_option( 'new_post_notification' ); // Get the post ID saved in the cookie $cookie_post_ID = isset( $_COOKIE['hide_post_cookie'] ) ? (int) $_COOKIE['hide_post_cookie'] : false; $output = ''; if( false != $notification ) { //First check if we have a cookie, if not, show the notification bar // If a cookie is set, do not display the notification bar if( false === $cookie_post_ID ) { //Get the post gmt date. This can be changed to post_date $post_date = strtotime( $notification->post_date_gmt ); //Get the current gmt time $todays_date = current_time( 'timestamp', true ); //Set the expiry time to two days after the posts is published $expiry_date = strtotime( '+2 day', $post_date ); //Show the notification bar if the expiry date is not yet reached if( $expiry_date > $todays_date ) { $output .= '<div class="notifications_bar">'; $output .= 'If you click on the "Hide" button, I will disappear.'; $output .= '</div>'; $output .= '<button id="notification_hide_button">'; $output .= 'Hide'; $output .= '</button>'; } }else{ /** * If a cookie is set, check the cookie value against the post id set as last post * If the two don't match, delete the cookie and show the notification bar if a new post is published * This code only run once, that is when a cookie is still set, and new post is published within the time * in which the cookie is still set */ if( (int) $notification->ID !== $cookie_post_ID ) { ?> <script> jQuery(document).ready(function($) { $.removeCookie('hide_post_cookie', { path: '/' }); }); </script> <?php $output .= '<div class="notifications_bar">'; $output .= 'If you click on the "Hide" button, I will disappear.'; $output .= '</div>'; $output .= '<button id="notification_hide_button">'; $output .= 'Hide'; $output .= '</button>'; } } } return $output; }