How to Display a Message for Recently Updated Posts

If a post has been updated recently, it can be helpful to notify readers that the content has changed. This lets returning visitors know the information is fresh and worth reviewing again.

This post explains how to display a notification message on posts that have been updated in the last 45 days. An additional condition ensures the message only appears on posts published more than 80 days ago – newer posts are expected to undergo frequent edits and don’t need this notification.

The implementation involves three parts: a PHP function for date comparison, CSS for positioning and appearance, and JavaScript for the show/hide animation.

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 child theme or in an MU-Plugin. The code checks the post’s dates and outputs the markup in the site’s footer if the conditions are met.

<?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 (line 5) checks whether the post was modified within the last 45 days. To compare dates, the code converts them to a Unix timestamp using the PHP strtotime function.

The second condition (line 6) checks whether the post’s publication date is older than 80 days. Only when both conditions are true will the notice markup be rendered.

A Bit of Styling

The following CSS sets the position of the message on the screen and its appearance:

.updatedNotice {
    position: fixed;
    top: 236px;
    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;
}

Customize the styling as needed. Note that the last property sets opacity to 0, so the element is hidden initially.

Using JavaScript, a class is added on document.ready to reveal the element, and that class is removed after 7000ms (7 seconds) to hide it again.

Displaying the Message and Hiding It After a Few Seconds

A class is added after the element loads to trigger the fade-in animation, and removed after a set time to fade it out:

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

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

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

});

The code targets the .updatedNotice element and adds the class fadeIn, which contains the following CSS animation 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;
    }
}

The @keyframes approach is used here to animate opacity, but simpler alternatives exist – for example, CSS transition on the opacity property can achieve the same effect without keyframes.

FAQs

Common questions about displaying update notifications on WordPress posts:

Summary

This post demonstrated how to display a temporary notification message on WordPress posts that have been recently updated. The solution combines a PHP date comparison to conditionally render the notice, CSS for positioning and animation, and JavaScript to control the fade-in and fade-out timing.