WordPress Integration

WordPress gives you two integration paths: drop in the embed widget with no code, or fetch the Feed API server-side in PHP for full control over markup and caching.

Caution

On wordpress.com (hosted), custom HTML/JS and PHP code both require the Business plan or higher — the Free/Personal/Premium tiers block arbitrary script execution for security. Self-hosted WordPress (wordpress.org, on your own or any standard host) has no such restriction. If you’re not sure which you’re on, this guide’s widget approach will simply fail silently (the block strips the <script> tag) on a restricted plan.

Option 1: Widget via Custom HTML Block

The fastest path — no plugin, no theme editing.

1. Edit the page or post in the block editor (Gutenberg).

2. Add a Custom HTML block (search for “Custom HTML” when inserting a block).

3. Paste:

   <script type="module" src="https://flarebuilder.com/widget/v1/flare-feed.min.js"></script>
   
   <flare-feed
     src="https://your-org.flarebuilder.com/feed"
     max-items="10"
     show-image
     show-date
     show-tags
   ></flare-feed>

4. Click Preview to confirm it renders, then publish.

Tip

Using a page builder like Elementor or Divi instead of Gutenberg? Both have an equivalent “HTML” or “Code” widget/element that accepts the same snippet.

Filtering and styling work exactly as in the widget guide — query parameters on src, CSS custom properties via style or your theme’s stylesheet.

Option 2: Server-Side PHP with Caching

For a theme template, a widget area, or when you want the HTML to be part of the page’s initial server response (better for SEO crawlers that don’t execute JavaScript), fetch the Feed API directly with wp_remote_get and cache the result with WordPress’s Transients API — the standard WordPress pattern for caching expensive external calls.

<?php
/**
 * Fetch and cache FlareBuilder feed items.
 */
function flarebuilder_get_items( $args = array() ) {
    $defaults = array(
        'limit'    => 10,
        'tags'     => '',
        'templates'=> '',
    );
    $args = wp_parse_args( $args, $defaults );

    $cache_key = 'flarebuilder_' . md5( serialize( $args ) );
    $cached    = get_transient( $cache_key );
    if ( false !== $cached ) {
        return $cached;
    }

    $query = array_filter( array(
        'limit'     => $args['limit'],
        'tags'      => $args['tags'],
        'templates' => $args['templates'],
    ) );

    $url      = 'https://your-org.flarebuilder.com/feed?' . http_build_query( $query );
    $response = wp_remote_get( $url, array( 'timeout' => 5 ) );

    if ( is_wp_error( $response ) || 200 !== wp_remote_retrieve_response_code( $response ) ) {
        return array(); // fail soft — don't break the page if the feed is unreachable
    }

    $data  = json_decode( wp_remote_retrieve_body( $response ), true );
    $items = $data['items'] ?? array();

    // Cache for 5 minutes — matches the Feed API's own browser cache TTL
    set_transient( $cache_key, $items, 5 * MINUTE_IN_SECONDS );

    return $items;
}

Use it in a theme template (page.php, a template part, or a shortcode):

<?php
$items = flarebuilder_get_items( array( 'templates' => 'announcement', 'limit' => 5 ) );
foreach ( $items as $item ) :
    $content = current( array_filter( $item['sections'], fn( $s ) => 'content' === $s['id'] ) )['data'] ?? array();
    ?>
    <article class="flarebuilder-item">
        <h3><a href="<?php echo esc_url( $item['permalink'] ); ?>"><?php echo esc_html( $item['title'] ); ?></a></h3>
        <?php if ( ! empty( $content['description'] ) ) : ?>
            <p><?php echo esc_html( $content['description'] ); ?></p>
        <?php endif; ?>
    </article>
<?php endforeach; ?>

Note

wp_remote_get runs on your WordPress server, not the visitor’s browser — there’s no CORS concern, and you can safely pass a channel token for unlisted content without exposing it client-side.

Turning It Into a Shortcode

Wrap the same fetch in a shortcode so editors can drop a feed into any post or page without touching PHP:

<?php
function flarebuilder_feed_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'limit'     => 10,
        'tags'      => '',
        'templates' => '',
    ), $atts );

    $items = flarebuilder_get_items( $atts );
    if ( empty( $items ) ) {
        return '';
    }

    ob_start();
    foreach ( $items as $item ) : ?>
        <div class="flarebuilder-item">
            <a href="<?php echo esc_url( $item['permalink'] ); ?>"><?php echo esc_html( $item['title'] ); ?></a>
        </div>
    <?php endforeach;
    return ob_get_clean();
}
add_shortcode( 'flarebuilder_feed', 'flarebuilder_feed_shortcode' );

[flarebuilder_feed templates="event" limit="5"]

Keeping Content Fresh

The Feed API is edge-cached for up to 15 minutes, and the transient cache above adds another 5-minute layer. If you need to confirm new content reached WordPress immediately after publishing, either lower the transient TTL for testing or delete it directly:

delete_transient( $cache_key );

Events

For event content, see Calendar Integration — subscribe a Google Calendar to your FlareBuilder ICS feed, then embed it with any WordPress calendar plugin that supports external ICS/Google Calendar sources, or embed the Google Calendar iframe directly via a Custom HTML block.