Toolbox Aid

August 27th, 2024 11:09 AM Mr. Q Categories: WordPress

WordPress offers a plethora of plugins to add functionalities to your website. However, sometimes you might want a leaner solution or more control over the design and behavior of features like a countdown timer. In this article, we’ll walk you through the process of creating a custom countdown timer using HTML, CSS, and JavaScript, tailored specifically for displaying the time remaining until May 2, 2028. This timer will show the countdown in years, months, days, and hours.

Introduction:

Countdown timers are a popular feature on websites for events, product launches, or important milestones. While there are many plugins available, building a countdown timer manually gives you complete control over its appearance and functionality. In this guide, you’ll learn how to embed a custom countdown timer directly into a WordPress post or page without relying on any third-party plugins.

Step-by-Step Guide:

1. Understanding the Components:

The countdown timer will be created using three main components:

• HTML: To structure the countdown display.
• CSS: To style the countdown for better visual appeal.
• JavaScript: To calculate and update the time remaining in years, months, days, and hours.

2. Adding the Countdown Timer Code:

To display the countdown timer in your post or page, insert the following HTML, CSS, and JavaScript code:

   <style>
   #countdown {
       font-family: Arial, sans-serif !important;
       color: #333 !important;
       font-size: 24px !important;
       text-align: center !important;
       margin: 20px 0 !important;
   }

   #countdown span {
       font-weight: bold !important;
       color: #ed9700 !important;
   }
   </style>

   <div id="countdown">
       <span id="years"></span> Years 
       <span id="months"></span> Months 
       <span id="days"></span> Days 
       <span id="hours"></span> Hours
   </div>

   <script>
       function countdownTimer() {
           const endDate = new Date('Feb 5, 2028 00:00:00').getTime();
           const now = new Date().getTime();
           let timeLeft = endDate - now;

           const years = Math.floor(timeLeft / (1000 * 60 * 60 * 24 * 365.25));
           timeLeft -= years * 1000 * 60 * 60 * 24 * 365.25;

           const months = Math.floor(timeLeft / (1000 * 60 * 60 * 24 * 30.44));
           timeLeft -= months * 1000 * 60 * 60 * 24 * 30.44;

           const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
           timeLeft -= days * 1000 * 60 * 60 * 24;

           const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

           document.getElementById('years').innerHTML = years;
           document.getElementById('months').innerHTML = months;
           document.getElementById('days').innerHTML = days;
           document.getElementById('hours').innerHTML = hours;

           if (timeLeft < 0) {
               clearInterval(countdownFunction);
               document.getElementById('countdown').innerHTML = "EXPIRED";
           }
       }

       document.addEventListener('DOMContentLoaded', (event) => {
           countdownTimer();
           const countdownFunction = setInterval(countdownTimer, 1000);
       });
   </script>

Copy
001   <style>
002   #countdown {
003       font-family: Arial, sans-serif !important;
004       color: #333 !important;
005       font-size: 24px !important;
006       text-align: center !important;
007       margin: 20px 0 !important;
008   }
009
010   #countdown span {
011       font-weight: bold !important;
012       color: #ed9700 !important;
013   }
014   </style>
015
016   <div id="countdown">
017       <span id="years"></span> Years 
018       <span id="months"></span> Months 
019       <span id="days"></span> Days 
020       <span id="hours"></span> Hours
021   </div>
022
023   <script>
024       function countdownTimer() {
025           const endDate = new Date('Feb 5, 2028 00:00:00').getTime();
026           const now = new Date().getTime();
027           let timeLeft = endDate - now;
028
029           const years = Math.floor(timeLeft / (1000 * 60 * 60 * 24 * 365.25));
030           timeLeft -= years * 1000 * 60 * 60 * 24 * 365.25;
031
032           const months = Math.floor(timeLeft / (1000 * 60 * 60 * 24 * 30.44));
033           timeLeft -= months * 1000 * 60 * 60 * 24 * 30.44;
034
035           const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
036           timeLeft -= days * 1000 * 60 * 60 * 24;
037
038           const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
039
040           document.getElementById('years').innerHTML = years;
041           document.getElementById('months').innerHTML = months;
042           document.getElementById('days').innerHTML = days;
043           document.getElementById('hours').innerHTML = hours;
044
045           if (timeLeft < 0) {
046               clearInterval(countdownFunction);
047               document.getElementById('countdown').innerHTML = "EXPIRED";
048           }
049       }
050
051       document.addEventListener('DOMContentLoaded', (event) => {
052           countdownTimer();
053           const countdownFunction = setInterval(countdownTimer, 1000);
054       });
055   </script>

This code snippet calculates the time remaining until February 5, 2028, and updates the countdown display every second.

3. Inserting the Code into a WordPress Post or Page:

• For Gutenberg (Block Editor):
  • Open the post or page where you want to add the countdown.
  • Add a Custom HTML block.
  • Paste the code above into the block.
  • Preview and publish the page.
• For Classic Editor:
  • Open the post or page where you want to add the countdown.
  • Switch to the Text editor.
  • Paste the code above.
  • Preview and publish the page.

4. Customizing the Countdown Appearance:

You can adjust the CSS to better match your site's design. Modify the font-family, color, font-size, and other properties as needed.

Summary:

By following this guide, you've created a custom countdown timer that displays years, months, days, and hours remaining until February 5, 2028. This approach provides more flexibility and control compared to using a plugin, allowing you to maintain your site's performance while delivering a polished user experience. Whether you're counting down to an event, launch, or milestone, this timer is a great addition to your WordPress toolkit.