How to Create Countdowns for Each Logged-In User in WordPress

Introduction:

Creating a personalized countdown timer for each user on your WordPress site can be a powerful tool, especially for scenarios like limited-time offers or deadlines. This guide will walk you through setting up a shortcode-based countdown timer that starts ticking from each user's registration date and continues regardless of their login status or device.

Step 1: Installing WP Coder

Begin by installing the WP Coder plugin. Navigate to your WordPress dashboard, select 'Plugins', and then 'Add New'. Search for 'WP Coder', install and activate it. Then, proceed to the plugin's page to create a new snippet.

Step 2: Create PHP function

In the 'PHP' tab, create a function to fetch the current user's registration date. Use the following code:

if( is_user_logged_in() ) // Check if the user login in site
{

    $current_user = wp_get_current_user(); // Get current user object
    $registration_date = '';
    if ($current_user instanceof WP_User) {
            // Get the user's  registration date and time in the local format.
           // If you want use the Universal format remove the function get_date_from_gmt()
        $registration_date = get_date_from_gmt($current_user->user_registered;)
    }

    $dateObject = new DateTime($registration_date);

    // Adding intervals
    $dateObject->modify('+2 weeks');
    // Set the new date in the variable 'countdown_date'
    $countdown_date = $dateObject->format('Y-m-d H:i');
}

This code checks if the user is logged in, retrieves their registration date, and calculates the date two weeks from that point.

Step 3: Create HTML for the Countdown

Next, create the HTML structure for the countdown display:

<div class="countdown-box" id="countdown-1" data-date="{{$countdown_date}}">
    <span class="days"></span>d : <span class="hours"></span>h : <span class="minutes"></span>m : <span class="seconds"></span>s
</div>

Note the use of the 'data-date' attribute to integrate the PHP-generated countdown date.

Step 4: Create JavaScript for the countdown

Implement JavaScript to manage the countdown functionality:

'use strict';

document.addEventListener('DOMContentLoaded', function() {
    // Get the countdown element
    const countdown = document.getElementById('countdown-1');

    // Get the start date that is in attrubute 'data-date'
    const getDate = countdown.getAttribute('data-date');

    // // Set the date we're counting down to
    const countDownDate = new Date(getDate).getTime();

    // Update the count down every 1 second
    const x = setInterval(function() {

        // Get today's date and time
        const now = new Date().getTime();

        // Find the distance between now and the countdown date
        const distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Set the days, hours, minutes  and seconds
        countdown.querySelector('.days').innerHTML = days;
        countdown.querySelector('.hours').innerHTML = hours;
        countdown.querySelector('.minutes').innerHTML = minutes;
        countdown.querySelector('.seconds').innerHTML = seconds;


        // If the count down is over, write some text 
        if (distance < 0) {
            clearInterval(x);
            countdown.innerHTML = "EXPIRED";
        }
    }, 1000);

});

This script calculates and updates the time remaining every second until the countdown expires.

Step 5: Inserting Your Code

Finally, after saving your snippet, insert the shortcode [wp_code id="7"] into the desired page content. This will display the countdown timer for each registered user on your site.

Conclusion:

Setting up a user-specific countdown timer in WordPress enhances the user experience by adding a sense of urgency and personalization. The process, involving PHP, HTML, and JavaScript, demonstrates the power of integrating multiple coding languages to achieve dynamic web functionalities. As always, ensure your code is error-free and secure, and consider user experience in its implementation.