WordPress administrators can use delayed redirects to provide specific information to the users before a redirect is applied. For example, delayed redirects can be used to notify a redirection to an external website or a download that is going to start.
Most of the time, a page that performs a delayed redirect includes messages like:
- The download begins in 5 seconds
- Please wait. You are being redirected.
- You are being redirected to example.com
- Please click here if you are not redirected in 5 seconds
In this tutorial, I’ll cover how to perform a delayed redirect with WordPress using a plugin and programmatically.
Delayed redirect with a plugin
Shortcode Redirect
The Shortcode Redirect WordPress plugin is simple to use and perfect for performing delayed redirects on a per-post basis.
This plugin works only with shortcodes, and there are no dedicated menus. To use the plugin, add to your post the [redirect]
shortcode. Then use the url
parameter to define the destination page of the redirect and the sec
parameter to define the number of seconds used as a delay for the redirect.
The shortcode example below is used to redirect the page to https://example.com/destination-page/
after 10 seconds:
[redirect url='https://example.com/destination-page/' sec='10']
Before redirecting the user, the plugin displays the sentence “Please wait while you are redirected… or Click Here if you do not want to wait”. If you prefer another message, you can easily apply a customization by editing the main plugin file.
If you’re curious about how this plugin technically works. It simply converts the shortcode into a meta refresh, an HTML tag that instructs the browser to refresh the page after a given time interval. In other words, a client-side redirect is performed based on information provided on a meta tag.
Delayed redirect with a custom implementation
This section will cover how to perform a delayed redirect in WordPress programmatically. Note that you can use the provided PHP scripts in a custom plugin or your theme functions.php file.
There are various methods to implement a delayed redirect on a web page. The most common are:
- Meta refresh
- Refresh by setting an HTTP Header
- JavaScript redirect
Note that these methods do not block the loading of the web page. As a consequence, they properly allow informing the user about the upcoming redirect.
Delayed redirect using meta refresh
Meta refresh uses an HTML meta tag to refresh the page or a perform a redirect.
This meta refresh basic implementation refreshes a page every 30 seconds.
<meta http-equiv="refresh" content="30">
When the url
parameter is provided, the result is a delayed redirect.
<meta http-equiv="refresh" content="5; url=https://example.com/">
You can easily add the meta refresh tag into the page header with the wp_head
hook as below.
function add_meta_refresh() { $output = '<meta http-equiv="refresh" content="5; url=https://example.com/">'; echo $output; } add_action( 'wp_head', 'add_meta_refresh' );
What follows is a delayed redirect that can be activated through a shortcode. Note that this script is very similar to the one used in the Shortcode Redirect plugin and that this implementation is possible because meta refresh also works when positioned in the page body.
function delayed_redirect_shortcode_callback( $atts ) { $seconds = isset( $atts['seconds'] ) ? sanitize_text_field( $atts['seconds'] ) : '0'; $url = isset( $atts['url'] ) ? sanitize_text_field( $atts['url'] ) : 'https://example.com'; return '<meta http-equiv="refresh" content="' . esc_attr( $seconds ) . '; url=' . esc_attr( $url ) . '">'; } add_shortcode( 'delayed-redirect', 'delayed_redirect_shortcode_callback' );
Perform a delayed redirect by sending an HTTP header
With the header()
PHP function, you can easily apply a delayed redirect without blocking the execution of PHP.
In the example below, a redirect is applied after 5 seconds.
header( "refresh:5; url=https://example.com/new-destination/" );
Note that you should call this before sending any output. As a consequence, an appropriate hook to perform this operation is template_redirect
.
Below a function that performs a delayed redirect with the header function is called with this hook.
function custom_delayed_redirect() { header( "refresh:5; url=https://example.com/new-destination/" ); } add_action( 'template_redirect', 'custom_delayed_redirect' );
With conditional tags like is_page()
, you can perform a delayed redirect only on specific pages. The example below applies a delayed redirect only to the “About” page.
function custom_delayed_redirect() { //Perform the redirect only on specific pages with the is_page() conditional if ( is_page( 'about' ) ) { header( "refresh:5; url=https://example.com/new-about-page/" ); } } add_action( 'template_redirect', 'custom_delayed_redirect' );
Note that you can create a similar script with functions like get_post_type()
, get_category()
, etc. to redirect pages with certain characteristics.
In the following example, a redirect is applied only when a page with “download” as a post type is loaded.
function custom_delayed_redirect() { //Perform the redirect only on the 'download' post type if ( get_post_type() === 'download' ) { header( "refresh:5; url=https://example.com/download-page/" ); } } add_action( 'template_redirect', 'custom_delayed_redirect' );
It’s worth noting that the recommended method to perform a redirect with WordPress is through the wp_redirect()
function. However, using this function makes the implementation of a delay impossible. At least without using sleep()
, that blocks the PHP execution.
Perform a delayed redirect with JavaScript
Using JavaScript to perform a delayed redirect is certainly an option. Start by adding the delayed redirect JavaScript script at the end of the page.
function enqueue_redirect_script() { wp_enqueue_script( 'delayed-redirect', get_template_directory_uri() . '/delayed-redirect.js', array(), '1.00', true ); } add_action( 'wp_enqueue_scripts', 'enqueue_redirect_script' );
Now create the actual JavaScript script. Inside, use setTimeout()
to apply the delay, in this example 5 seconds. And location.href
to perform the redirect.
window.setTimeout(function() { window.location.href = 'https://www.example.com/target'; }, 5000);