Embed a Countdown Timer in WordPress

Block Editor (Gutenberg)

1. Open the page or post in the WordPress admin and click the + button to add a new block.
2. Type HTML and select Custom HTML. (It's under the Formatting category.)
3. Paste the iframe markup from above into the block.
4. Click Preview in the block toolbar to see the timer render. Save the draft.
5. Publish.

Classic Editor

1. Open the page or post.
2. Click the Text tab (top-right of the editor area). This switches from the visual editor to the raw-HTML editor.
3. Paste the iframe markup at the cursor position. Do not wrap it in <p>tags — the editor will add paragraph wrappers automatically that don't break the embed.
4. Click Update to publish. Switch back to the Visual tab to confirm the embed appears (it will display as a small box with a placeholder).

Elementor

1. Edit the page in Elementor.
2. Drag the HTML widget from the left panel onto the page.
3. Paste the iframe markup into the HTML Code field.
4. Hit Update in the bottom-left. The embed renders live in the Elementor preview.
5. For sticky / floating placement, wrap the HTML widget in a section with Position: Fixed enabled.

Beaver Builder

1. Open the page in Beaver Builder.
2. Add an HTML module from the Basic Modules tray.
3. Paste the iframe markup into the HTML field.
4. Save the row. Beaver Builder renders the embed live in the front-end preview.

Divi

1. Open the page in the Divi Builder.
2. Click + to add a module and choose Code.
3. Paste the iframe markup into the Content field.
4. Save changes and exit the builder.

Troubleshooting common WordPress embed issues

The iframe shows up blank

Almost always a caching plugin (WP Rocket, W3 Total Cache, LiteSpeed, Cloudflare APO) interfering. Two things to check:

• Clear the cache after pasting the embed for the first time.
• Verify your security plugin isn't adding an aggressive CSP header that blocks frame-src. The embed needs frame-src https://gotimer.org allowed (most defaults already permit it).

The Block Editor strips the iframe

You used a paragraph or heading block instead of Custom HTML. The Block Editor sanitises HTML inside text blocks. Use the dedicated Custom HTML block.

The Classic Editor wraps the iframe in <p> tags

Harmless — the embed still renders. If your theme's CSS adds margin to <p> elements, you may want to wrap the iframe in a <div class="no-margin"> instead.

Mobile renders the embed too wide

Set width="100%"on the iframe (already done in our generator) and the embed will scale to the parent container's width. If your theme has a fixed-width content column, also set max-widthon the iframe's style.

Dynamic per-post countdowns with ACF

For automated workflows — say, every product post has a launch date and you want the countdown to drive itself from a custom field — add a small snippet to your theme's functions.php:

function gotimer_countdown_from_acf($atts) {
  $launch_date = get_field('launch_date');
  if (!$launch_date) return '';
  $seconds = max(0, strtotime($launch_date) - time());
  $url = 'https://gotimer.org/e/countdown?duration=' . esc_attr($seconds);
  return '<iframe src="' . $url . '" width="100%" height="320" frameborder="0" loading="lazy"></iframe>';
}
add_shortcode('gotimer_countdown', 'gotimer_countdown_from_acf');

Then drop [gotimer_countdown]into any post template and the countdown derives itself from the post's launch_date custom field.

Once you have it on one page

Try the configurator on /embed for a different timer type — Pomodoro for a study blog, chess clock for a board-game review site, round timer for a fitness blog. Same iframe mechanic, every type supported.