WordPress Integration

WordPress offers several ways to embed timers, from simple block-based approaches to custom HTML insertion. This guide covers all methods for both modern and classic WordPress installations.

Method 1: WordPress Block Editor (Gutenberg)

Modern WordPress uses the block editor (Gutenberg), which provides a visual interface for building pages and posts.

Step-by-Step Guide

Step 1: Create Your Timer

1. Go to the Editor
2. Design and configure your timer
3. Copy the timer URL from the Renderer section
4. Keep it handy for the next steps

Step 2: Create iFrame Code

Build your iFrame embed code using your timer URL:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="100%"
  height="400"
  style="border: none; max-width: 1200px; margin: 0 auto; display: block;"
  title="Countdown Timer"
>
</iframe>

Step 3: Add Custom HTML Block

1. Open the page or post where you want the timer
2. Click the "+" button to add a new block
3. Search for "Custom HTML"
4. Select the "Custom HTML" block

Step 4: Paste Your Code

1. Click inside the Custom HTML block
2. Paste your complete iFrame code
3. The block shows "Custom HTML" while editing
4. Click "Preview" to see the timer in action

Step 5: Publish

1. Click "Update" or "Publish" in the top-right
2. View your page to verify the timer appears correctly
3. Test on mobile devices or using responsive preview

Block Editor Tips

Method 2: Classic Editor

If your WordPress site uses the Classic Editor, you can add timers through the HTML editor.

Step-by-Step Guide

1. Open Your Page/Post in the Classic Editor
2. Click the "Text" Tab (switches from Visual to HTML mode)
3. Find the Location where you want the timer in your HTML
4. Paste Your iFrame Code at that location
5. Switch to "Visual" Tab to preview (optional)
6. Update/Publish your page

Classic Editor Code Example

<h2>Event Countdown</h2>

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="800"
  height="400"
  frameborder="0"
  style="border: none; display: block; margin: 20px auto;"
>
</iframe>

<p>Join us for the event of the year!</p>

Method 3: Page Builder Plugins

Many WordPress sites use page builders for visual design. Here's how to add timers to popular page builders:

Elementor

Elementor Pro Tip:

Use Elementor's "Custom Positioning" to overlay timers on images or sections
for creative hero designs!

Divi Builder

WPBakery Page Builder

Beaver Builder

Page Builder Comparison

Method 4: Widget Areas (Sidebar/Footer)

For timers that appear across multiple pages (sidebars, footers, headers):

Step-by-Step Guide

1. Go to Dashboard → Appearance → Widgets
2. Find Target Widget Area (e.g., "Sidebar", "Footer")
3. Click "+" to Add Block or "Add a Widget"
4. Search for "Custom HTML"
5. Add Custom HTML Widget
6. Paste Your iFrame Code
7. Add Title (optional, e.g., "Event Countdown")
8. Click "Update" or "Save"

Widget Sizing Recommendations

Method 5: Shortcodes for Reusability

Create a custom shortcode to use the same timer across multiple pages easily.

Creating a Shortcode

Add to your theme's functions.php or create a custom plugin:

// Add to functions.php
function tickr_countdown_shortcode($atts) {
    $atts = shortcode_atts(array(
        'id' => '',
        'width' => '100%',
        'height' => '400',
    ), $atts);

    if (empty($atts['id'])) {
        return '<p>Please provide a timer ID</p>';
    }

    $output = '<iframe ';
    $output .= 'src="https://gettickr.app/r/#' . esc_attr($atts['id']) . '" ';
    $output .= 'width="' . esc_attr($atts['width']) . '" ';
    $output .= 'height="' . esc_attr($atts['height']) . '" ';
    $output .= 'style="border: none; max-width: 100%;" ';
    $output .= 'title="Countdown Timer">';
    $output .= '</iframe>';

    return $output;
}
add_shortcode('tickr', 'tickr_countdown_shortcode');

Using Your Shortcode

Once added, use the shortcode in any page, post, or widget:

Basic Usage:

[tickr id="YOUR-TIMER-ID"]

With Custom Dimensions:

[tickr id="YOUR-TIMER-ID" width="800" height="500"]

Multiple Timers:

<h3>Event 1</h3>
[tickr id="timer-1"]

<h3>Event 2</h3>
[tickr id="timer-2"]

Shortcode Benefits

Plugin Compatibility

Common Plugin Issues

Allowing iFrames in Security Plugins

Wordfence:

1. Go to Wordfence → Firewall → All Firewall Options
2. Add gettickr.app to whitelisted domains
3. Save settings

iThemes Security:

1. Go to Security → Settings → Advanced
2. Disable "Filter Suspicious Query Strings in the URL" for specific pages
3. Or whitelist gettickr.app

Troubleshooting WordPress Integration

Timer Not Appearing

Display Issues

Mobile Issues

WordPress Multisite

For WordPress Multisite installations:

Network Admin Steps:

1. Network Admin → Settings
2. Enable "Unfiltered HTML" for site admins (if needed)
3. Individual sites can then add timer iFrames normally

Next Steps

• iFrame Integration - Detailed iFrame documentation
• Customize Timer Design - Match your WordPress theme
• Shopify Integration - WooCommerce is similar to Shopify
• Remote Control - Control timers while managing your WordPress site