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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us