How to create a custom countdown timer theme

Steps to Create the Plugin:

1. Create the Plugin Folder:

Go to your WordPress installation directory.
Navigate to /wp-content/plugins/.
Create a new folder for your plugin, for example: custom-countdown-themes.

2. Create the Main Plugin File:

Inside the custom-countdown-themes folder, create a new PHP file. Let's name it custom-countdown-themes.php.

3. Add the Plugin Header:

Open the custom-countdown-themes.php file and add the following header at the top to define the plugin:

<?php
/*
Plugin Name: Custom Countdown Themes
Plugin URI: https://example.com/custom-countdown-themes
Description: Adds a custom countdown theme for Groundhogg email timers.
Version: 1.0
Author: Your Name
Author URI: https://example.com
License: GPLv2 or later
*/

This header gives WordPress the necessary information to display your plugin in the admin area.

4. Insert the Countdown Theme Filter Code:

After the plugin header, add the provided code, which registers the custom countdown theme for Groundhogg.

add_filter( 'groundhogg/email_countdown/themes', 'register_custom_countdown_themes' );

/**
 * Add one or more custom themes for the email countdown timer
 *
 * @param array $themes
 *
 * @return array
 */
function register_custom_countdown_themes( array $themes ) {

	$themes['custom_theme'] = [
		'name'             => 'Custom Theme', // name of the theme
		'clock-size'       => 100, // The font size of the clock numbers
		'clock-offset'     => 180, // The Y offset from the top of the image to the bottom of the clock numbers
		'clock-color'      => '#ffffff', // The color of the clock numbers
		'label-size'       => 22, // The font size of the labels, DAYS, HOURS, etc.
		'label-offset'     => 230, // The Y offset from the top of the image to the bottom of the labels
		'label-color'      => '#ffffff', // The font color of the labels
		'accent-color'     => '#000000', // color code for the accent
		'use-colon'        => false, // Whether to show the ":" between numbers
		'background-color' => '#ffffff', // The default background color, by default it's white. (optional)
		'days-format'      => '%d', // The format for days, as used by DateInterval::format() (optional)
		'hours-format'     => '%H', // The format for hours, as used by DateInterval::format() (optional)
		'minutes-format'   => '%I', // The format for minutes, as used by DateInterval::format() (optional)
		'seconds-format'   => '%S', // The format for seconds, as used by DateInterval::format() (optional)
		'image'            => __DIR__ . '/custom-theme.png', // path to your image file, recommended size is 1200x300px
		'font'             => __DIR__ . '/custom-font.ttf', // path to your font file, download any free font from Google Fonts
	];

	return $themes;
}

5. Add Custom Resources (Optional):

If you plan to use a custom image and font, ensure you upload custom-theme.png and custom-font.ttf into the custom-countdown-themes plugin folder. You can also edit the path in the code if needed.

6. Activate the Plugin:

Go to your WordPress admin dashboard.
Navigate to Plugins > Installed Plugins.
Find the “Custom Countdown Themes” plugin and click Activate.

7. Test Your Plugin:

Use Groundhogg’s email countdown feature to see if your custom theme is available for selection.

Explanation of the Code:

add_filter( 'groundhogg/email_countdown/themes', 'register_custom_countdown_themes' );: This hooks the register_custom_countdown_themes function into the Groundhogg countdown timer's theme registration system.
register_custom_countdown_themes: This function adds your custom countdown theme to the existing ones provided by Groundhogg.
- The theme is defined by the $themes['custom_theme'] array, where you set various properties like clock size, color, labels, and background.
- Custom assets like images and fonts can also be linked, providing a highly customizable countdown appearance.

Once the plugin is active, your custom countdown theme will be available for selection in Groundhogg’s email countdown timer options.