How To Create A Countdown Timer In WordPress Without A Plugin or without any short-code

Countdown timers are very useful to increase time on page and reduce bounce rate in your blog post. There are many ways to create countdown timer in your WordPress blog. You can create countdown timer using plugin.But if you want to make your own countdown timer, you are in the right place. In this post, we will tell you how to create a countdown timer using the simple JavaScript.In this post you will learn how to make a countdown timer before displaying the download link without using “id” attribute.Simple JavaScript and HTML Countdown Timer

HTML Code for WordPress Countdown Timer

Use this HTML code in your WordPress blog post where you want to add download button with countdown timer.you can use this HTML code multiple times and in multiple post according to your needs. Just replace the https://your-download with your URL which you want to show at the end of countdown timer.

<button onclick="myDownloadFunction(this,'https://your-download')">Click Here to get Download link</button>

JavaScript Code for WordPress Countdown Timer

Place this JavaScript code in your WordPress theme code just before </body> tag. You can achieve this with the help of child theme of your WordPress theme.

<script>
function myDownloadFunction(ele,url) {
var counter = 10;
var a = document.createElement('a');
var link = document.createTextNode("Download Now"); 
                a.appendChild(link); 
                a.href = url;  
var newElement = document.createElement("p");
newElement.innerHTML = "You can download the file in 10 seconds.";
var id;
ele.parentNode.replaceChild(newElement, ele);
id = setInterval(function() {
counter--;
if(counter < 0) {
newElement.parentNode.replaceChild(a, newElement);
clearInterval(id);
} else {
newElement.innerHTML = "You can download the file in " + counter.toString() + " seconds.";
}}, 1500);

};

</script>

CodePen block for 10 second WordPress countdown timer

Leave a Comment