Savvy Blog / Blog / UX/UI / Display a Message if a Post has been Recently Updated

Display a Message if a Post has been Recently Updated

By Roee Yossef

Published on Dec 1, 2023

No Comments

Whether you’ve noticed it or not, recently on the Savvy blog, a message pops up for a few seconds if you land on any post that has been updated in the last 45 days. Due to frequent updates, I thought it would be right to inform you, the readers, that a particular post has undergone some changes recently.

Perhaps you’ve landed on this post before and returned to it after a while… It’s important for me to let you know that the post has been updated, and the updated information may interest you.

In this post, I’ll explain how to display a message if a post has been updated in the last 45 days. It’s worth mentioning that I added a condition so that this update message will appear only if it’s not a post published in the last 90 days.

These are considered “new posts” for me in the blog, and in these, I perform more frequent updates initially, so I don’t want the same update message to pop up specifically for these.

Let’s see the steps without going into too much detail about the operations. The things sum up to HTML, CSS, and JavaScript, which I assume you know how to work with if you’re trying to embed it yourself.

Either way, if you’re having trouble, write to us in the comments, and we’ll be happy to help with any issue…

Comparing Dates and Displaying the Message Only in a Specific Date Range

The following function should be placed in the functions.php file of your template. The code in question will perform and display (if necessary) the markup that appears in the site’s footer.

<?php //REMOVE THIS PHP OPENING TAG

function add_post_updated_notice() {

    if ( strtotime( get_the_modified_time( 'd-m-Y' ) ) > strtotime( '-45 days' ) ) {
        if ( strtotime( get_the_date( 'd-m-Y' ) ) < strtotime( '-80 days' ) ) {
            ?>
            <div class="updatedNotice">
                <div>The post has been updated recently</div>
            </div>
            <?php
        }
    }
}
add_action( 'wp_footer', 'add_post_updated_notice' );

The first condition appears in line number 5 and it performs a comparison to check if the update of the post occurred in the last 45 days. In order to compare dates, we convert the date to a Unix timestamp using the PHP strtotime function.

The second condition checks if the post’s publication date is more than 90 days ago, and only then will it display the mentioned markup.

A Bit of Styling…

We’ll add the following CSS to set the position of the message on the screen and its appearance:

.updatedNotice {
    position: fixed;
    top: 236px;
    will-change: opacity;
    right: 12px;
    background: #26947b;
    color: #fefefe;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 500;
    width: 72px;
    height: 72px;
    text-align: center;
    line-height: 1.3;
    opacity: 0;
}

Feel free to customize the styling as per your preferences. Note that in the last property, we set the opacity to 0 so that it is not visible initially.

Using JavaScript, we will add a class to the element in document.ready to remove the opacity, and this class will be removed after 7000ms, which is essentially 7 seconds…

Displaying the Message and Hiding It After a Few Seconds

As mentioned, we’ll add a class after the element is loaded that will cause the message to appear and remove it after a certain time. Here is the code:

jQuery(document).ready(function ($) {

    let $notice = $('.updatedNotice');
    $notice.addClass('fadeIn');

    setTimeout(function(){
        $('.updatedNotice').removeClass('fadeIn').addClass('fadeOut');
    }, 7000);

});

We target our element and add the class fadeIn, which contains the following CSS properties:

.fadeIn {
    -webkit-animation: fadeIn;
    animation: fadeIn;
    opacity: 1 !important;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
}


@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}