How to Add Download Button Timer in WordPress

Adding a Button Timer in WordPress is a bit tricky. We’re gonna show you how you can add Timer in your WordPress posts or pages.

Follow these simple steps below. You can just need to adjust some settings in your cPanel and you’ll be able to add Button Time in any of your WordPress post.

Follow the Steps below:

  • Go to your WordPress dashboard and head over to Plugins > Add New
  • Install and activate a Plugin called “Header & Footer Scripts”.
  • In WordPress go to Settings > Header & Footer Scripts.
  • Go to WordPress > Settings > Header & Footer Scripts
  • Copy the CSS Code in the header section
  • And copy the Java Script to the footer section of the plugin.
  • Then you can follow the video below on how you can actually add timer to the Button/

CSS Code (For Head Tag):

    <style>
    /* countdown time redirect button css */
      #redirect-download{
        padding: 10px 25px 10px 25px; 
        border: none; 
        border-radius:5px;
        color: white; 
        background: dodgerblue; 
        font-weight: 600;
      }
      #redirect-download:hover{
      background:royalblue;
      }
    </style>

JAVA Script (For Footer/Body Tag):

  <script>
        document.getElementById("post-Title").innerHTML = document.getElementById("postTitle").innerHTML;
    	var postTitle = document.getElementById("postTitle").innerHTML;
        function redirectbtn(){
             localStorage.setItem("Post Title", postTitle)
             localStorage.setItem("Download Link",link);
             return false;
        }
    </script>

HTML Code for Posts:

<center>
	<!-- Google Adsense Code-->
         <h2 style="margin: 0px;">Download<span id="post-Title"></span></h2> 
          <form action="Page Download Link" target="_blank" style="margin-bottom: 15px;">
            <button id="redirect-download" onclick="redirectbtn();"><i class="fa fa-download"></i>  Download Now</button>
          </form>
         <!-- Google Adsense Code-->
</center>
<script>
    // download link paste here
  	var link = "Download Link";
</script>

New Page Code:

    <center> 
     <!--Google Adsense Code-->
      <br>
    <center> 
      <style>#postTitle{text-align: center;}</style>  
        <button id="download-btn" onclick="generate()">
                  <i class="fa fa-download"></i> Download Now
              </button>
              <div id="refresh" style="display: none; font-size: 18px;"><b>Thanks!</b><br> Your download will start in few seconds... <br> If not then,</div>
              <a href="" id="re-download-btn" style="display: none;">Click Here</a>
              <script>
                  function generate() {
                      var j = document.getElementById("refresh");
                      var e, n = document.getElementById("re-download-btn"),
                          t = document.getElementById("download-btn"),
                          a = document.getElementById("re-download-btn").href,
                          l = 5,
                          d = document.createElement("span");
                      n.parentNode.replaceChild(d, n),
                          e = setInterval(function () {
                              --l < 0 ? (d.parentNode.replaceChild(n, d),
                                  clearInterval(e),
                                  window.location.replace(a),
                                  j.style.display = "contents",
                                  n.style.display = "inline") : (d.innerHTML = "<div class='waiting'>Please Wait...</div><div class='timer'>" + l.toString() + "</div> <div class='second'>Seconds</div>",
                                      t.style.display = "none")
                          }, 1e3)
                  }
              </script>
              <style>
                  button#download-btn {
                      padding: 10px 25px 10px 25px;
                      border: none;
                      border-radius: 5px;
                      color: white;
                      background: dodgerblue;
                      font-weight: 600;
                  }
                  button#download-btn:hover {
                      background: royalblue;
                  }
                  .timer {
                      background: bisque;
                      width: 5%;
                      padding: 10px;
                      font-size: 25px;
                      border-radius: 50%;
                      width: 7%;
                  }
              </style>
              <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>  
          <script>
              document.getElementById("re-download-btn").href=localStorage.getItem("Download Link");
              document.getElementById("postTitle").innerHTML = localStorage.getItem("Post Title");
          </script>
      </center>
      <br><br>
    <!--Google Adsense Code-->
    </center>
Shopping Cart