Want to add a download timer to your WordPress site so the download button appears only after a countdown? If yes, this guide will show you how to add a download timer in WordPress. A download timer is a great way to reduce bounce rate. If you’re providing a downloadable file, adding a timer ensures the button appears only after the countdown ends.

How to Use Download Timer in WordPress?

Step 1: Install and activate the Timed Content plugin (by K. Tough, Arno Welzel, Enrico Bacis).
Step 2: Add the following JavaScript code before the </body> tag:

<!-- Timed Content JS Start -->
<script type="text/javascript">
function countdown() {
    var i = document.getElementById('counter');
    if (parseInt(i.innerHTML)<=0) {
        //location.href = '#clickimage';
    }
    i.innerHTML = parseInt(i.innerHTML)-1;
}
setInterval(function(){ countdown(); },1100);
</script>
<!-- Timed Content JS End -->

Step 3: Use the following shortcodes where you want the download timer to appear:

[timed-content-client hide="0:20:0" display="div"]

<img class="aligncenter size-medium" src="https://i.imgur.com/buO4Nt2.gif" width="94" height="98">

<p style="text-align: center;"><b><span style="color: #C92228;"><span style="color: #C92228;"><span style="color: #C92228;">Loading Download Links In</span> <span id="counter">20</span><span style="color: #C92228;"> Seconds.....</span></span></span></b></p>
[/timed-content-client]
[timed-content-client show="0:20:0" display="div"]

Add Download Button here

[/timed-content-client]

Note: Use these three shortcodes on separate lines, just as shown above.

Step 4: Add your download buttons just before the closing [/timed-content-client] tag.
Step 5: Add this CSS to style the countdown timer:

#counter {
	color: #fff;
	background: #C92228;
	padding: 10px;
	border: 5px solid #fff;
	border-radius: 55px;
	width: 10px;
	margin: auto;
	text-align: center;
	box-shadow: 0 2px 15px 0 #c7c7c7;
}

This setup uses a 20-second timer. To change the countdown duration, simply update the number 20 in the shortcodes and accordingly. You can also change the loading image by replacing the image URL in the code.

Wrap Up

That’s how you can add a countdown timer before displaying a download button in WordPress. You can even show multiple buttons after the timer ends. If you have any questions, feel free to leave a comment, and if you found this guide helpful, consider sharing it on social media.

Similar Posts