OhhMuaOhhMua
  • Home
  • Hosting
    • Best Web Hosting
    • Free Web Hosting
    • VPS Hosting
  • WordPress
    • Solutions & Troubleshooting
    • Installation & Setup
    • Themes & Plugins
    • Security
  • Build PC
    • High-end Builds
    • Mid-range Builds
    • Entry-level Builds
  • Computer Tips
    • Gaming Errors & Solutions
    • PC Troubleshooting
    • Hardware Tips
    • Computer Hardware
  • Coupons & Deals
  • Tools
    • veo3 prompt generator
Reading: Share a countdown button to display a password in WordPress
Share
Notification Show More
Font ResizerAa
OhhMuaOhhMua
Font ResizerAa
  • Computer Tips
  • Hosting
  • WordPress
Search
  • Home
  • WordPress
    • Installation & Setup
    • Security
    • Solutions & Troubleshooting
    • Themes & Plugins
    • Troubleshooting
  • Hosting
    • Free Web Hosting
    • VPS Hosting
    • Best Web Hosting
  • Computer Tips
    • PC Troubleshooting
    • Gaming Errors & Solutions
    • Computer Hardware
  • Coupons & Deals
  • veo3 prompt generator
Have an existing account? Sign In
Follow US
Copyright © 2024 ohhmua. All rights reserved.
OhhMua > Blog > WordPress > Solutions & Troubleshooting > Share a countdown button to display a password in WordPress
Solutions & Troubleshooting

Share a countdown button to display a password in WordPress

Admin (Nghia Vo)
Last updated: September 11, 2024 4:09 pm
Admin (Nghia Vo)
Share
4 Min Read
Share a countdown button to display a password in WordPress
Share a countdown button to display a password in WordPress
SHARE
Contents
Countdown to Display PasswordExample:

When we have a password or a certain string of characters we want to share with others but don’t want to display it immediately, instead requiring the user to wait for a set amount of time after clicking the “show password” button, the code below will help you achieve that.

Share a countdown button to display a password in WordPress
Share a countdown button to display a password in WordPress

The main purpose of this is to increase the amount of time users stay on your site, which is beneficial for SEO and is a common practice on many websites.

Countdown to Display Password

First, you only need to paste the following code into wp-content/themes/{YOUR-THEME}/functions.php.

/*
 * Countdown to display password
 * Usage: [pass_countdown code="1234"]
 * Author: ohhmua.com
 * */
add_shortcode('pass_countdown', 'devvn_passvideo_button_countdown_func');
function devvn_passvideo_button_countdown_func($atts)
{
    $atts = shortcode_atts(array(
        'time' => 10,
        'code' => '',
        'before_code' => '',
        'title' => 'Click here to get the security code',
        'mess' => 'The security code will be displayed in %s seconds',
    ), $atts, 'button_countdown');
    $time = isset($atts['time']) ? intval($atts['time']) : 10;
    $code = isset($atts['code']) ? sanitize_text_field($atts['code']) : '';
    $title = isset($atts['title']) ? sanitize_text_field($atts['title']) : '';
    $mess = isset($atts['mess']) ? sanitize_text_field($atts['mess']) : '';
    $before_code = isset($atts['before_code']) ? sanitize_text_field($atts['before_code']) : '';
    ob_start();
    ?>
    <span data-counter="<?php echo $time;?>" data-mess="<?php echo esc_attr($mess);?>" data-before="<?php echo esc_attr($before_code);?>" data-code="<?php echo esc_attr(base64_encode($code));?>" class="coundownmobile" onclick="startcountdown(this); this.onclick=null;">
        <?php echo $title;?>
    </span>
    <?php
    return ob_get_clean();
}
add_action('wp_footer', 'countdown_script');
function countdown_script(){
    ?>
    <style>
        .coundownmobile{
            background: #e81e1e;
            border-radius: 10px;
            border: none;
            color: #ffffff;
            display: inline-block;
            text-align: center;
            padding: 10px;
            outline: none;
            cursor: pointer;
        }
        .coundownmobile.countdown-loading {
            background: #FF5722;
        }
        .coundownmobile.countdown-done {
            background: green;
        }
    </style>
    <script type="text/javascript">
        function startcountdown(btn){
            btn.classList.add("countdown-loading");
            let counter = btn.getAttribute('data-counter');
            let $code = btn.getAttribute('data-code');
            let mess = btn.getAttribute('data-mess');
            let before = btn.getAttribute('data-before');
            let startcountdown = setInterval(function(){
                counter--;
                btn.innerHTML = mess.replace(/%s/gi, counter);
                if(counter == 0){
                    if($code) {
                        btn.innerHTML = before + ' ' + atob($code);
                        btn.classList.add("countdown-done");
                    }
                    clearInterval(startcountdown);
                    return false;
                }}, 1000);
        }
    </script>
    <?php
}

You can use the shortcode [pass_countdown] to display the countdown button.

The specific parameters are as follows:

  • time: This is the countdown time, in seconds. The default is 10 seconds.
  • code: This is the password or code you want to share.
  • before_code: This is the text displayed before the password.
  • title: This is the text displayed on the button before it’s clicked.
  • mess: This is the countdown message displayed after clicking the button. %s represents the remaining seconds.

Example:

If you want to display a countdown of 20 seconds before showing the password “1234”, the shortcode will be as follows:

[pass_countdown code="1234" time="20"]
480520387 657957633334779 6814038772835954285 n
Admin (Nghia Vo)

Hi, I’m Nghia Vo: a computer hardware graduate, passionate PC hardware blogger, and entrepreneur with extensive hands-on experience building and upgrading computers for gaming, productivity, and business operations.

As the founder of Vonebuy.com, a verified ecommerce store under Vietnam’s Ministry of Industry and Trade, I combine my technical knowledge with real-world business applications to help users make confident decisions.

I specialize in no-nonsense guides on RAM overclocking, motherboard compatibility, SSD upgrades, and honest product reviews sharing everything I’ve tested and implemented for my customers and readers.

You Might Also Like

SEO in the Age of AI: How to Make Google Understand and Value Your Content

Cannot Fetch Sitemap in Google Search Console

Discovered – Currently Not Indexed in Google Search Console: What It Means & How to Fix It

Why 2 Backlinks per Article Might Be Killing Your SEO

What is Obsidian? Why Developers Love This Note-Taking App

TAGGED:codecountdown button
Share This Article
Facebook Twitter Email Print
By Admin (Nghia Vo)
Follow:

Hi, I’m Nghia Vo: a computer hardware graduate, passionate PC hardware blogger, and entrepreneur with extensive hands-on experience building and upgrading computers for gaming, productivity, and business operations.

As the founder of Vonebuy.com, a verified ecommerce store under Vietnam's Ministry of Industry and Trade, I combine my technical knowledge with real-world business applications to help users make confident decisions. I specialize in no-nonsense guides on RAM overclocking, motherboard compatibility, SSD upgrades, and honest product reviews sharing everything I’ve tested and implemented for my customers and readers.
Leave a comment Leave a comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Trending

M.2 NVMe vs SATA SSD
Computer Hardware

M.2 NVMe vs SATA SSD – Which One Should You Buy in 2025?

July 17, 2025
How to Install and Use Google Analytics 4
Installation & Setup

How to Install and Use Google Analytics 4 (GA4) in 2025: A Step-by-Step Guide

April 21, 2025
Evangelion PC Build thumbnail
High-end Builds

Evangelion PC Build: Intel Core i9-13900K + RTX 3090 24GB – 4K Gaming Beast

July 20, 2025
How to Choose the Right Motherboard for Intel 14th Gen Processors
Computer Hardware

How to Choose the Right Motherboard for Intel 14th Gen Processors

April 22, 2025
How to Change WordPress Login URL Without Plugins
Solutions & Troubleshooting

How to Change WordPress Login URL Without Plugins (100% Success)

September 9, 2024
Fake CAPTCHA Malware Targets Gamers Seeking Cracked Wukong Downloads
Gaming Errors & Solutions

Fake CAPTCHA Malware Targets Gamers Seeking Cracked Wukong Downloads – How to Stay Safe

September 24, 2024
Previous Next

You Might Also Like

Optimize WordPress
Solutions & Troubleshooting

Want Faster Load Times? Optimize WordPress This Way

May 16, 2025
My Google Discover traffic skyrocketed after I did these 10 things
Solutions & Troubleshooting

My Google Discover traffic skyrocketed after I did these 10 things

May 14, 2025
How to Add a Read More to Product Descriptions in WooCommerce
Solutions & Troubleshooting

How to Add a “Read More” and “Show Less” Button to Product Descriptions in WooCommerce

May 5, 2025
WordPress Covers Every Website Type
Solutions & Troubleshooting

Blog, E-Commerce, or Forum? WordPress Covers Every Website Type!

April 29, 2025
Previous Next
newsletter featured

Always Stay Up to Date

Subscribe to our newsletter to get our newest articles instantly!

Follow US on Social Media

Facebook Youtube Steam Twitch Unity

Copyright © 2024 ohhmua. All rights reserved.

OhhMua

Information

  • About
  • Terms & Conditions
  • Privacy Policy
Welcome Back!

Sign in to your account

Lost your password?