How to Add a Download Button with Timer in WordPress

Adding a download button with a timer in WordPress is a fantastic way to boost user engagement on your site. By implementing a timer, you encourage visitors to stay on your page longer, which can lead to improved SEO performance. In this guide, I’ll show you how to easily add a customizable download button with a timer.

Why Add a Timer to Your Download Button?

Before we dive into the technical details, let’s briefly discuss why adding a timer to your download button is beneficial. A timer delays the download link’s appearance, which keeps users on your page longer, reducing bounce rates and potentially increasing conversions. This small feature can make a big difference in user experience and site performance.

Step 1: Install the Code Snippets Plugin

To add custom PHP code to your WordPress site, we’ll use the Code Snippets plugin. This method is clean and doesn’t require you to modify your theme or create a separate plugin.

How to Install Code Snippets

1. Go to your WordPress Dashboard.
2. Navigate to Plugins > Add New.
3. In the search bar, type “Code Snippets”.
4. Click Install and then Activate.

The Code Snippets plugin makes it easy to add and manage custom code on your WordPress site without touching your theme files.

Step 2: Add the Custom PHP Code

Now that we have the plugin installed, it’s time to add the PHP code that will create the download button with a timer.

Adding the PHP Code

1. Go to Snippets > Add New in your WordPress Dashboard.
2. Give your snippet a title like “Download Button”.
3. Paste the following PHP code into the code editor:

function raju_digital_services_download_button($atts) {
    $atts = shortcode_atts(
        array(
            'timer' => '10', // default timer is 10 seconds
            'link' => '#',   // default download link
            'button_text' => 'Download', // default button text
        ),
        $atts,
        'raju_digital_services_download_button'
    );

    ob_start();
    ?>
    <div id="downloadButtonContainer">
        <button id="downloadButton"><?php echo esc_html($atts['button_text']); ?></button>
        <div id="timerMessage" style="display:none;">Please wait <span id="timer"><?php echo esc_html($atts['timer']); ?></span> seconds...</div>
        <a id="downloadLink" href="<?php echo esc_url($atts['link']); ?>" style="display:none;">Click here to download</a>
    </div>

    <script type="text/javascript">
        document.getElementById('downloadButton').addEventListener('click', function() {
            var timer = <?php echo esc_js($atts['timer']); ?>;
            document.getElementById('downloadButton').style.display = 'none';
            document.getElementById('timerMessage').style.display = 'block';

            var countdown = setInterval(function() {
                document.getElementById('timer').textContent = timer;
                timer--;

                if (timer < 0) {
                    clearInterval(countdown);
                    document.getElementById('timerMessage').style.display = 'none';
                    document.getElementById('downloadLink').style.display = 'block';
                }
            }, 1000);
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('raju_digital_services_download_button', 'raju_digital_services_download_button');

Save and activate the snippet: This code creates a customizable download button with a timer. Users will have to wait for the timer to complete before the download link becomes available.

Step 3: Add Custom CSS for Styling

Now that the functionality is in place, it’s time to style the download button, timer message, and download link to ensure they look great on your site.

Adding the CSS

1. Go to Appearance > Customize > Additional CSS in your WordPress Dashboard.
2. Paste the following CSS code:

/* Center the button and its container */
#downloadButtonContainer {
    text-align: center;
}

/* Style the download button */
#downloadButton {
    background-color: #0073aa; /* Button background color */
    color: #ffffff; /* Button text color */
    border-radius: 5px; /* Button border radius */
    font-size: 16px; /* Button font size */
    padding: 10px 20px; /* Button padding */
    border: none; /* Remove button border */
    cursor: pointer; /* Change cursor on hover */
    transition: background-color 0.3s ease; /* Smooth background color transition */
}

#downloadButton:hover {
    background-color: #005177; /* Button background color on hover */
}

/* Style the timer message */
#timerMessage {
    margin-top: 10px; /* Space between button and timer message */
    font-size: 14px; /* Font size of the timer message */
    color: #333333; /* Timer message text color */
}

/* Style the download link */
#downloadLink {
    display: inline-block; /* Make the link behave like a button */
    margin-top: 10px; /* Space between timer message and download link */
    background-color: #28a745; /* Link background color */
    color: #ffffff; /* Link text color */
    padding: 10px 20px; /* Link padding */
    border-radius: 5px; /* Link border radius */
    text-decoration: none; /* Remove underline from link */
    transition: background-color 0.3s ease; /* Smooth background color transition */
}

#downloadLink:hover {
    background-color: #218838; /* Link background color on hover */
}

Save and publish your changes: This CSS will ensure that your download button is centered and styled professionally, with smooth hover effects and a visually appealing design.

Step 4: Use the Shortcode in Your Posts or Pages

With everything set up, you can now add the download button to any post or page using a simple shortcode.

Shortcode Example

To add the download button with a timer to your content, use the following short code:

[raju_digital_services_download_button timer="10" link="https://example.com/download.zip" button_text="Download Now"....removedots

• timer: Set the timer duration in seconds before the download link appears.
• link: Provide the URL of the file to download.
• button text: Customize the text displayed on the button.

By following these steps, you can easily add a download button with a timer to your WordPress site using Raju Digital Services. This small but powerful feature can enhance user engagement, improve your site’s SEO, and provide a better experience for your visitors.