How to Build a Countdown Timer with jQuery & ACFs

Building a countdown timer can be a useful feature for various types of websites, such as event websites or e-commerce sites with sales and promotions. In this tutorial, we will show you how to build a countdown timer using jQuery and an Advanced Custom Fields (ACF) field, and enqueueing the scripts.

First, you will need to install and activate the Advanced Custom Fields plugin on your WordPress website. This plugin allows you to add custom fields to your posts, pages, and custom post types.

Next, you will need to create a new field group and add a date field to it. This date field will be used to set the countdown timer. The date field will be displayed on the backend and can be set by an administrator.

Once you have the date field set up, you can create a new template file for the page or post where you want to display the countdown timer. In this template file, you will need to include a div element to display the countdown timer.

<div id="countdown-timer"></div>

To enqueue the scripts, you will need to add the following code to your theme’s functions.php file.

function enqueue_countdown_timer_scripts() {
    // Enqueue jQuery
    wp_enqueue_script( 'jquery' );
    // Enqueue the custom script for the countdown timer
    wp_enqueue_script( 'countdown-timer-script', get_template_directory_uri() . '/js/countdown-timer.js', array( 'jquery' ), '1.0.0', true );
    // Localize the date field so it can be used in the countdown-timer.js script
    wp_localize_script( 'countdown-timer-script', 'countdown_timer_date', array( 'date' => get_field( 'countdown_timer_date' ) ) );
}
add_action( 'wp_enqueue_scripts', 'enqueue_countdown_timer_scripts' );

This code enqueues jQuery and the custom script for the countdown timer, and also localizes the date field so that it can be used in the custom script.

Now, you will need to create a new file named countdown-timer.js in your theme’s js folder. In this file, you will add the script that will handle the countdown timer. This script will first get the date from the localized ACF field and then calculate the remaining time until that date. The script will then update the countdown timer on the page every second.

jQuery(document).ready(function($){
    // Get the date from the localized ACF field
    var countDownDate = new Date(countdown_timer_date.date).getTime();
    
    // Update the countdown every 1 second
    var x = setInterval(function() {
        
        // Get today's date and time
        var now = new Date().getTime();
        
        // Find the distance between now and the count down date
        var distance = countDownDate - now;
        
        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
        
        // Display the result in the element with id="countdown-timer"
        $("#countdown-timer").html(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");

        // If the count down is finished, write some text 
        if (distance < 0) {
           clearInterval(x);
           $("#countdown-timer").html("EXPIRED");
        }
    }, 1000);
});

This script will display the remaining time until the date set in the ACF field in the div element with the id "countdown-timer". When the countdown timer reaches 0 it will change the text to "EXPIRED"

That's it! With these steps, you should have a working countdown timer on your website that is powered by an ACF field and jQuery, and properly enqueued scripts. You can customize the look and feel of the countdown timer by adding CSS styles to the element with the id "countdown-timer" in your stylesheet.

How to Build a Countdown Timer with jQuery & Advanced Custom Fields