How to Build a Countdown Timer Plugin for WordPress

Posted on 15th June 2023

WordPress is a content management system (CMS) that enables you to create a website or blog from scratch, or to improve an existing website. It is a free and open-source platform that is used by millions of people around the world.

One of the advantages of WordPress is that it is very easy to extend its functionality with plugins. A plugin is a piece of software that can be added to a WordPress website to increase its functionality. There are plugins for almost everything you can think of, and there is a huge community of plugin developers who are constantly creating new plugins.

In this tutorial, we will show you how to build a countdown timer plugin for WordPress. This plugin will enable you to create a countdown timer that can be added to any post or page on your WordPress website.

What You Will Need

To complete this tutorial, you will need the following:

A text editor (we recommend Sublime Text)
A web browser (we recommend Google Chrome)
A local installation of WordPress

Step 1: Create the Plugin Folder

The first step is to create a new folder for your plugin. This folder can be created anywhere on your computer. For this tutorial, we will create a folder called “wp-countdown-timer” in the “wp-content/plugins” directory of our WordPress installation.

Step 2: Create the Plugin File

Inside the “wp-countdown-timer” folder, create a new file called “wp-countdown-timer.php”. This will be the main plugin file where we will write the code for our plugin.

Step 3: Register the Plugin

The next step is to register our plugin with WordPress. This is done by adding a plugin header to the top of our plugin file. The plugin header is a comment block that contains information about the plugin, such as its name, author, version, etc.

The minimum information that you need to include in the plugin header is the Plugin Name. This is the name of your plugin that will be displayed on the WordPress plugin repository.

Here is an example of a plugin header:

Step 4: Write the Plugin Code

Now that we have registered our plugin, we can start writing the code for our plugin.

The first thing we need to do is to create a function that will output the HTML for our countdown timer. This function will take two parameters: the date and time that the countdown timer should expire, and the message that should be displayed when the countdown timer expires.

Here is the code for our “output_countdown_timer” function:

function output_countdown_timer( $expiry_date, $expiry_message ) {

// Check if the expiry date has been set
if ( ! $expiry_date ) {
return;
}

// Calculate the difference between the current time and the expiry date
$time_diff = strtotime( $expiry_date ) – time();

// If the time difference is negative, then the expiry date has passed
if ( $time_diff < 0 ) {
echo $expiry_message;
return;
}

// Convert the time difference into days, hours, minutes, and seconds
$days = floor( $time_diff / ( 24 * 60 * 60 ) );
$hours = floor( ( $time_diff – ( $days * 24 * 60 * 60 ) ) / ( 60 * 60 ) );
$minutes = floor( ( $time_diff – ( ( $days * 24 * 60 * 60 ) + ( $hours * 60 * 60 ) ) ) / 60 );
$seconds = $time_diff – ( ( $days * 24 * 60 * 60 ) + ( $hours * 60 * 60 ) + ( $minutes * 60 ) );

// Output the HTML for the countdown timer
echo '

‘;

}

?>

Step 5: Create the Shortcode

Now that we have created the function to output our countdown timer, we need to create a shortcode that we can use to insert the countdown timer into our posts and pages.

A shortcode is a WordPress-specific code that enables you to do complex things with very little code. Shortcodes can be used to insert images, videos, files, etc. into your posts and pages.

In this case, we want to use a shortcode to insert our countdown timer into a post or page. We can do this by adding the following code to our plugin file:

This code tells WordPress to register a new shortcode called “wp_countdown_timer”. When this shortcode is used in a post or page, it will execute the “output_countdown_timer” function that we created in Step 4.

Step 6: Test the Plugin

Now that we have written the code for our plugin, we need to test it to make sure it works as expected.

To test the plugin, create a new post or page on your WordPress website and add the following shortcode:

[wp_countdown_timer expiry_date=”2020-12-31 23:59:59″ expiry_message=”The countdown timer has expired.”]

This shortcode will create a countdown timer that expires on December 31st, 2020 at 11:59:59 PM. When the countdown timer expires, the message “The countdown timer has expired.” will be displayed.

You can change the expiry date and message to anything you want. Just make sure to use a valid date format (yyyy-mm-dd hh:mm:ss) for the expiry_date parameter.

If everything is working as expected, you should see a countdown timer like this on your post or page:

If you can see the countdown timer, then congratulations! You have successfully created a WordPress plugin.

5. Publish your plugin

Once you’ve completed developing your plugin, it’s time to publish it. You can do this by submitting it to the WordPress plugin directory.

In order to be accepted, your plugin must:

Be GPL compatible

Adhere to the WordPress coding standards

Not violate any existing copyrights

Once your plugin is published, anyone can download and use it on their WordPress site.