Create a Custom Function to Display a Countdown Timer in WordPress

Custom Countdown Timer Solution

Custom Code Solution

First, add this PHP function to your theme's functions.php file or in a site-specific plugin:

This function creates a shortcode to display the countdown timer:

function custom_countdown_timer_shortcode($atts) {
    // Parse attributes with defaults
    $atts = shortcode_atts(array(
        'date' => '2024-12-31 23:59:59', // Default end date
        'timezone' => 'UTC'              // Default timezone
    ), $atts);

    // Generate unique ID for multiple timers
    $timer_id = 'countdown-' . uniqid();

    // Enqueue required scripts
    wp_enqueue_script('countdown-script', get_template_directory_uri() . '/js/countdown.js', array('jquery'), '1.0', true);

    // Timer HTML structure
    $output = '<div class="countdown-timer" id="' . $timer_id . '" data-date="' . esc_attr($atts['date']) . '" data-timezone="' . esc_attr($atts['timezone']) . '">
        <div class="timer-block">
            <span class="days">00</span>
            <span class="label">Days</span>
        </div>
        <div class="timer-block">
            <span class="hours">00</span>
            <span class="label">Hours</span>
        </div>
        <div class="timer-block">
            <span class="minutes">00</span>
            <span class="label">Minutes</span>
        </div>
        <div class="timer-block">
            <span class="seconds">00</span>
            <span class="label">Seconds</span>
        </div>
    </div>';

    return $output;
}
add_shortcode('countdown_timer', 'custom_countdown_timer_shortcode');

Create a new file called countdown.js in your theme's /js directory:

jQuery(document).ready(function($) {
    $('.countdown-timer').each(function() {
        var timer = $(this);
        var endDate = new Date(timer.data('date')).getTime();

        function updateTimer() {
            var now = new Date().getTime();
            var distance = endDate - now;

            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);

            timer.find('.days').text(days);
            timer.find('.hours').text(hours);
            timer.find('.minutes').text(minutes);
            timer.find('.seconds').text(seconds);

            if (distance < 0) {
                clearInterval(interval);
                timer.html('<div class="expired">Timer Expired</div>');
            }
        }

        var interval = setInterval(updateTimer, 1000);
        updateTimer();
    });
});

Add this CSS to your theme's style.css:

.countdown-timer {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}

.timer-block {
    text-align: center;
    min-width: 80px;
}

.timer-block span {
    display: block;
}

.timer-block .days,
.timer-block .hours,
.timer-block .minutes,
.timer-block .seconds {
    font-size: 2em;
    font-weight: bold;
}

.timer-block .label {
    font-size: 0.8em;
    text-transform: uppercase;
}

Usage

Use the shortcode anywhere in your posts or pages:

[countdown_timer date="2024-12-31 23:59:59" timezone="UTC"]

Plugin Alternatives

If you prefer a plugin solution, here are reliable options:

1. Countdown Timer Ultimate - Simple and lightweight
2. T(-) Countdown - Feature-rich with multiple styles
3. HurryTimer - Evergreen and fixed date countdown timers

Notes

• The custom code solution creates a responsive countdown timer that updates in real-time
• Adjust the date format in the shortcode to match your needs (YYYY-MM-DD HH:MM:SS)
• The timezone parameter is optional and defaults to UTC
• The timer automatically stops and shows "Timer Expired" when reaching zero
• The CSS can be customized to match your theme's design