Tips/Tricks, Guide, Source Code

Countdown time to automatically redirect internal links to other urls (WordPress)

Hi guys, I’m azpivi this. Today I will show you how to redirect your website to another url (another link) after a certain countdown period. Here I guide you on wordpress website first.

The advantages of using the page redirect after the interval are:

For document sharing websites, exiting the page is quite fast, frankly, when the user clicks the download button, they will exit your page immediately. This will make google evaluate your website with a high bounce rate, which will affect your website

  • Creating a countdown function that automatically converts to the document download link will help lower the bounce rate. And especially in the code I share, you can change the content, the countdown time flexibly, but remember to set the time just enough so that the user does not feel uncomfortable.
  • The next advantage is being able to change the url you need to redirect to. For example, if you redirect users to the page in your own website, it will increase the traffic of your website!!!

Here are the steps to do it:

Note: Please follow each step correctly, it’s easy to get it wrong

Step 1: Please create a file named “page-redirect.php” in your theme’s main directory. Usually has a path like “wp-content/themes/theme_name_in_use”

Here I am using theme twentytwentyoneso I create it in this folder

Step 2: You open that file (“page-redirect.php“) and copy all the code below and paste it and save it.

In the code you want to change the countdown time, change the $wait_time variable ( 1 second = 1000);

As for the text you find in it, please fix it!!

<?php
// File create by azpivi.net
// Website: https://wwww.azpivi.net
//Template name: Page Redirect

$redirect_to = isset($_GET['url'])
 ? trim(strip_tags(stripslashes($_GET['url'])))
 : '';
$wait_time    = 15000; // EDIT TIME HERE 1 second = 1000;
$wait_seconds = $wait_time / 1000;



add_action('wp_head', 'redirect_to_external_link');
function redirect_to_external_link()
{
    global $redirect_to, $wait_seconds, $wait_time;
    if (empty($redirect_to) || empty($wait_time)) {
     return;
    }
    ?>
<script>
var redirect = window.setTimeout(function() {
    window.location.href = '<?php esc_html_e($redirect_to); ?>'
}, <?php echo $wait_time; ?>);
</script>
<noscript>
    <meta http-equiv="refresh" content="<?php echo $wait_seconds; ?>;url=<?php esc_attr_e($redirect_to); ?>">>
</noscript>
<?php }

get_header(); ?>
<style>
#redirect-page-content {
    width: 100%;
    height: 50%;
    text-align: center;
    font-size: 18px;
    margin: 0;
    padding: 2rem 0;
}

.redirect-message {
    display: inline-block;
    border: 1px solid red;
    border-radius: 1rem;
    padding: 2rem 3rem;
    background: white;
}

.redirect-message p {
    font-size: 95%;
    margin: 1rem;
    color: #191919;
}

.redirect-message .text-time {
    color: red;
}

.redirect-message .error {
    color: red;
    font-weight: bold;
}
</style>
<?php
$url = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
        if (strpos($url,'?url')) { ?>
<div id="redirect-page-content">
    <div class="redirect-message">
        <?php
            if (!empty($redirect_to)) {
            echo '<p>YOU BEING REDIRECTED TO THE PAGE</p>';
            ?>
        <p class="text-time"><strong>AUTOMATICALLY JUMP TO THE
                FOLLOWING PAGE <span style="color: #2fad16" id="timer"></span> SECOND </strong></p>
        <?php
            } else {
             echo '<div class="error">Faulty redirect link!</div>';
            }
        ?>
    </div>
</div>
<?php } ?>
<script>
document.getElementById('timer').innerHTML = <?php echo $wait_seconds;?>;
var timer = <?php echo $wait_seconds;?>;
var interval = setInterval(function() {
    var seconds = timer;
    if (seconds > 0) {
        --seconds;
        document.getElementById('timer').innerHTML = seconds + "";
        timer = seconds;
    } else {}
}, 1000);
</script>
<?php get_footer();?>

Step3: Go to the Page manager and create a new page name “Redirect to” okay and then in the Templates in Page Attributes choose Page Redirect hi hi.

Then click Post Page.

Now let’s test it, you can just connect your domain name with the slug of the newly created page with ?url= okay okay?

(If you create a page name like me “Redirect to“, then change your domain name into the form below and try it)

your_domain/redirect-to/?url=

Ex: https://azpivi.net/redirect-to/?url=blog

or

https://azpivi.net/redirect-to/?url=https://www.youtube.com/channel/UCfpCHBYhToxdEvduwhGfkSg

So we’re done, do you think it’s simple ^_^

Leave a Comment