The Campaign Countdown displays a live-updating timer that counts down to a campaign’s end date, giving donors a clear, urgent visual cue to act before the deadline. Available in Charitable Pro 1.8.14+.
Key Features
- Counts down in days, hours, minutes, and seconds, with per-unit visibility.
- Pick a Boxed (bordered tiles) or Inline (compact one-line) style.
- Choose what happens when a campaign ends: show a message, freeze the timer at zero, or hide it.
- Trigger an optional confetti or fireworks celebration the moment the timer hits zero.
- Add a clickable headline that links to the campaign or its donation form.
- Style numbers, labels, background, and border with the same Coloris picker used elsewhere in Charitable Pro.
- Toggle a built-in digital seven-segment font for a classic countdown look.
- Show or hide an “Ends on [date]” line above or below the timer.
- Available as a Campaign Builder field, a Gutenberg block, and a shortcode.
- Honors the visitor’s reduced-motion preference for the celebration animation.
Why Use Campaign Countdown?
Urgency converts. A visible deadline tells donors exactly how much time they have left to support a campaign, which is one of the most reliable ways to lift end-of-campaign giving. Building the countdown directly into Charitable means it stays in sync with the campaign’s end date automatically, so you never have to update a separate widget.
See It In Action
Requirements
- Charitable Pro 1.8.14 or later
- The campaign must have an end date set (campaigns marked as endless will not render a countdown)
Getting Started
Activation
The Campaign Countdown is built into Charitable Pro 1.8.14+. No separate addon to install. As soon as you update to a supported version, the field, block, and shortcode are available.
Where to Find It
- Campaign Builder: open a campaign, switch to the Fields tab, and look under Pro fields for “Countdown”.
- Gutenberg editor: search for “Campaign Countdown” in the block inserter.
- Shortcode: drop
[charitable_campaign_countdown]on any post, page, or template.
Usage
Block (Gutenberg)
Insert the Campaign Countdown block from the widgets category, then pick the campaign in the block sidebar. Every visual and behavioral option from the Campaign Builder field is exposed in the block settings panel, so you can place a styled countdown anywhere in the WordPress editor.
Campaign Builder Field
Drag the Countdown field onto the campaign canvas. All settings live in the right-hand panel: headline, link target, units, style, colors, sizing, alignment, expiry behavior, and celebration effect. The Campaign Builder live preview reflects every change as you edit.
If the campaign has no end date set, the field shows an inline warning in the builder and renders nothing on the front end until you set the end date in Settings → Campaign Duration.
Shortcode
[charitable_campaign_countdown]When used inside a campaign loop or on a campaign page, the shortcode auto-detects the current campaign. Use the campaign_idattribute to render a countdown for a specific campaign anywhere else on your site.
[charitable_campaign_countdown campaign_id="123" style="inline" show="days,hours,minutes" headline="Last chance to give!"]Configuration Options
Shortcode Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
campaign_id | integer | current post ID | The campaign to count down to. |
style | string | boxed | boxed for bordered tiles, inline for a single-line compact display. |
show | string | days,hours,minutes,seconds | Comma-separated list of units to display. Any subset of the four units. |
headline | string | empty | Optional headline shown above the timer. |
link | string | empty | campaign links the headline to the campaign page; donation links to the donation form. |
class | string | empty | Extra CSS class added to the countdown wrapper. |
Block / Field Display Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
| Headline | string | empty | Optional text shown above the timer. |
| Headline Link | string | none | none, campaign, or donation. |
| Style | string | boxed | boxed or inline. |
| Show Units | array | all four | Days, hours, minutes, seconds. Each can be toggled independently. |
| Use Digital Display Font | boolean | true | Applies a seven-segment style to the numbers. |
| Alignment | string | left | left, center, or right. |
Expiry Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
| When Campaign Ends | string | message | message shows a custom message, zero keeps the timer at 00:00:00:00, hide removes the countdown. |
| Expired Message | string | Campaign Ended | Text shown when the behavior is message. |
| Hide Delay (Minutes) | integer | 0 | Minutes to keep the countdown on screen after it hits zero before applying the end-state action. |
Celebration Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
| Celebration Effect | string | none | none, confetti, or fireworks. Plays once when the timer reaches zero. |
End-Date Line Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
| End-Date Text Position | string | hide | hide, above, or below. Controls the “Ends on [date]” line. |
Style Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
| Number Color | hex | #222222 | Color of the unit numbers. |
| Label Color | hex | #222222 | Color of the unit labels. |
| Background Color | hex | empty (transparent) | Background of each unit tile. Empty equals “no fill” so the parent surface shows through. |
| Border Color | hex | #222222 | Border color around each tile (boxed style only). |
| Border Radius (px) | integer | 6 | Corner radius for tiles. |
| Number Font Size (px) | integer | 32 | Font size for the unit numbers. |
| Label Font Size (px) | integer | 11 | Font size for the unit labels. |
| CSS Class | string | empty | Extra class added to the wrapper for custom CSS hooks. |
Customization
The countdown is styled with CSS custom properties so you can theme it from a single rule set:
:root {
--ccd-number-color: #222222;
--ccd-label-color: #222222;
--ccd-bg-color: transparent;
--ccd-border-color: #222222;
--ccd-border-radius: 6px;
--ccd-number-size: 32px;
--ccd-label-size: 11px;
}Template override path: charitable/shortcodes/campaign-countdown.php (copy into your theme’s charitable/ folder).
Troubleshooting
The countdown does not appear on the front end
Check that the campaign has an end date set in Settings → Campaign Duration. Endless campaigns and campaigns missing an end date render no markup at all.
The campaign ended but the timer is still on screen
Check the “When Campaign Ends” setting. With Hide Delay greater than zero, the timer stays visible for that many minutes past the end date before switching to the expired state.
Celebration animation is not firing
The celebration is suppressed for visitors who set their operating system to “reduce motion”. The animation also only plays once, at the moment the timer crosses zero, so refreshing the page after the campaign has already ended will not replay it.
Colors look invisible
A blank Background color is treated as “no fill” (transparent) on purpose, so the countdown blends into colored sections. If text is hard to read, raise the contrast on the Number or Label color, not the Background.
Developer Resources
Hooks & Filters
charitable_campaign_countdown_shortcode_output— filter the final rendered countdown HTML.charitable_countdown_end_date_format— filter the PHP date format used for the “Ends on” line.charitable_countdown_end_date_formatted— filter the formatted date string passed into the “Ends on” template.charitable_countdown_end_date_label— filter the full “Ends on [date]” label.
Useful Functions
Charitable_Campaign_Countdown_Shortcode::display( $atts, $overrides )— render the countdown programmatically.Charitable_Countdown::defaults()— get the canonical default settings array shared across the block, field, and shortcode.
