The Countdown Timer

The Countdown Timer offers a user-friendly countdown block that lets you quickly set up a timer for events, product launches, special offers, and more.

Its main features include:

• Designed to be minimal: no unnecessary menu items, just a simple tool under the Tools tab.
• Built for the WordPress ecosystem: uses official components for a seamless experience.
• Customizable time settings: easily set the target time, date, and time zone.
• Flexible units display: choose which units to display – years, months, weeks, days, minutes, seconds.
• Styling options: adjust colors, backgrounds, margins, alignment, border radius, and separators to seamlessly match your site’s design.
• Optimized performance: the plugin separates editor scripts from front-end scripts, ensuring that only the essential code is loaded on the live site.

Usage

1. Go to Tools > The Countdown Timer to create a new timer.
2. Customize your timer: set the date, time, appearance, and behavior.
3. Click Publish to save it.
4. Copy the shortcode and paste it anywhere – in a post, page, or widget.

Development

This plugin uses React for its front-end interface. The complete unminified source code is available at:

• GitHub repository: https://github.com/KonstantinPankratov/WordPress-Plugin-Countdown-Timer

To build the plugin from source:
1. Clone the repository
2. Run cd react
3. Run npm install
4. Run npm run build

From within WordPress

1. Go to Plugins > Add New.
2. Search for The Countdown Timer.
3. Install & activate it.
4. Go to Tools > The Countdown Timers to add your first timer.

Manually

1. Upload the the-countdown-timer folder to the /wp-content/plugins/ directory.
2. Go to Plugins & activate The Countdown timer.
3. Go to Tools > The Countdown Timers to add your first timer.

1. 

   Set date, time, and timezone – Easily configure the countdown target time.

2. 

   Customize number appearance – Adjust font styles, sizes, and colors for numbers.

3. 

   Control unit display – Choose which time units (years, months, days, etc.) to show.

4. 

   Modify separators – Customize how the countdown sections are visually divided.

5. 

   Style countdown blocks – Fine-tune padding, background, borders, and alignment.

6. 

   Set post-expiration display – Define what happens when the countdown reaches zero.

1.0.0

• Initial release.