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 in seconds
            'link' => '#',
            'button_text' => 'Download Now',
            'button_color' => '#0073aa',
            'hover_color' => '#005177'
        ), 
        $atts
    );

    ob_start();
    ?>
    <div id="downloadButtonContainer" style="text-align: center;">
        <button id="downloadButton" style="background-color: <?php echo esc_attr($atts['button_color']); ?>; color: #ffffff; border-radius: 5px; font-size: 16px; padding: 10px 20px; border: none; cursor: pointer;">
            <?php echo esc_html($atts['button_text']); ?>
        </button>
        <div id="timerMessage" style="margin-top: 10px; font-size: 14px; color: #333333; display: none;">
            Please wait <span id="timerCountdown"><?php echo intval($atts['timer']); ?></span> seconds...
        </div>
        <a id="downloadLink" href="<?php echo esc_url($atts['link']); ?>" style="display: none; margin-top: 10px; background-color: #28a745; color: #ffffff; padding: 10px 20px; border-radius: 5px; text-decoration: none;" target="_blank">
            Download Link
        </a>
    </div>
    <script>
        document.getElementById('downloadButton').addEventListener('click', function() {
            document.getElementById('timerMessage').style.display = 'block';
            this.style.display = 'none';

            var countdown = <?php echo intval($atts['timer']); ?>;
            var timerInterval = setInterval(function() {
                countdown--;
                document.getElementById('timerCountdown').textContent = countdown;

                if (countdown <= 0) {
                    clearInterval(timerInterval);
                    document.getElementById('timerMessage').style.display = 'none';
                    document.getElementById('downloadLink').style.display = 'inline-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:

#downloadButton:hover {
    background-color: #005177; /* Hover color for the button */
    transition: background-color 0.3s ease;
}

#downloadLink:hover {
    background-color: #218838; /* Hover color for the download link */
    transition: background-color 0.3s ease;
}

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 shortcode:

[raju_digital_services_download_button timer="10" link="https://example.com/download.zip" button_text="Download Now" button_color="#0073aa" hover_color="#005177" 

• 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.