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 itcustom-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
andcustom-font.ttf
into thecustom-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 theregister_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.
- The theme is defined by the
Once the plugin is active, your custom countdown theme will be available for selection in Groundhogg’s email countdown timer options.