WordPress Integration

Overview

WordPress offers multiple ways to embed FlareBuilder feeds depending on your needs and technical comfort level. All methods use the FlareBuilder JavaScript SDK for easy integration.

Method 1: Gutenberg Block Editor

The Block Editor (Gutenberg) is the default WordPress editor since version 5.0. This method works for posts, pages, and custom post types.

Step 1: Add Custom HTML Block

1. Edit your page or post in WordPress
2. Click the + button to add a new block
3. Search for "Custom HTML" and select it
4. Paste the code below into the HTML block

Step 2: Add FlareBuilder Code

<div id="flarebuilder-feed"></div>

<script src="https://flarebuilder.com/v1/flarebuilder.js"></script>
<script>
  const feed = new FlareBuilder.Feed({
    tenant: 'your-tenant-slug',
    container: '#flarebuilder-feed',
    filters: {
      types: ['event', 'announcement'],
      limit: 10
    }
  });
</script>

Step 3: Customize and Publish

Replace your-tenant-slug with your actual tenant slug, adjust filters as needed, and click Publish.

Method 2: Classic Editor

If you're using the Classic Editor plugin or an older WordPress installation:

Step 1: Switch to Text Mode

1. Edit your page or post
2. Click the Text tab (not Visual) in the editor
3. Paste the code at the location where you want the feed to appear

Step 2: Add FlareBuilder Code

<div id="flarebuilder-feed"></div>

<script src="https://flarebuilder.com/v1/flarebuilder.js"></script>
<script>
  const feed = new FlareBuilder.Feed({
    tenant: 'your-tenant-slug',
    container: '#flarebuilder-feed',
    filters: { limit: 10 }
  });
</script>

Method 3: Sidebar Widget

Display your feed in a sidebar or footer widget area:

Step 1: Add Custom HTML Widget

1. Go to Appearance → Widgets in your WordPress admin
2. Find the Custom HTML widget
3. Drag it to your desired widget area (sidebar, footer, etc.)

Step 2: Add FlareBuilder Code

<div id="flarebuilder-sidebar-feed"></div>

<script src="https://flarebuilder.com/v1/flarebuilder.js"></script>
<script>
  const feed = new FlareBuilder.Feed({
    tenant: 'your-tenant-slug',
    container: '#flarebuilder-sidebar-feed',
    filters: {
      types: ['announcement'],
      limit: 5
    }
  });
</script>

Method 4: Theme Template (Developers)

For theme developers who want to embed feeds directly in theme templates:

Step 1: Add to Template File

Edit your theme's template file (e.g., page.php, single.php, or footer.php):

<div id="flarebuilder-feed"></div>

<script src="https://flarebuilder.com/v1/flarebuilder.js"></script>
<script>
  const feed = new FlareBuilder.Feed({
    tenant: '<?php echo get_option('flarebuilder_tenant'); ?>',
    container: '#flarebuilder-feed',
    filters: { limit: 10 }
  });
</script>

Step 2: (Optional) Add Settings Page

Create a settings page to allow non-technical users to configure the tenant slug:

<?php
// Add to functions.php
function flarebuilder_settings_init() {
    register_setting('general', 'flarebuilder_tenant');
    add_settings_field(
        'flarebuilder_tenant',
        'FlareBuilder Tenant Slug',
        'flarebuilder_tenant_field',
        'general'
    );
}
add_action('admin_init', 'flarebuilder_settings_init');

function flarebuilder_tenant_field() {
    $value = get_option('flarebuilder_tenant', '');
    echo '<input type="text" name="flarebuilder_tenant" value="' . esc_attr($value) . '" />';
}
?>

Method 5: Custom Shortcode (Developers)

Create a reusable shortcode for embedding feeds anywhere in your content:

Step 1: Add to functions.php

<?php
// Add to your theme's functions.php
function flarebuilder_feed_shortcode($atts) {
    $atts = shortcode_atts(array(
        'tenant' => 'your-default-tenant',
        'types' => '',
        'tags' => '',
        'limit' => '10'
    ), $atts);

    $id = 'flarebuilder-' . uniqid();

    $filters = array('limit' => intval($atts['limit']));
    if (!empty($atts['types'])) {
        $filters['types'] = explode(',', $atts['types']);
    }
    if (!empty($atts['tags'])) {
        $filters['tags'] = explode(',', $atts['tags']);
    }

    ob_start();
    ?>
    <div id="<?php echo $id; ?>"></div>
    <script src="https://flarebuilder.com/v1/flarebuilder.js"></script>
    <script>
      new FlareBuilder.Feed({
        tenant: '<?php echo esc_js($atts['tenant']); ?>',
        container: '#<?php echo $id; ?>',
        filters: <?php echo json_encode($filters); ?>
      });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('flarebuilder', 'flarebuilder_feed_shortcode');
?>

Step 2: Use the Shortcode

Use the shortcode in any post, page, or widget:

[flarebuilder tenant="your-tenant" types="event,announcement" limit="10"]

Or with just events:

[flarebuilder tenant="your-tenant" types="event" tags="featured" limit="5"]

Styling Your Feed

Add custom CSS to match your WordPress theme:

Using the Customizer

1. Go to Appearance → Customize → Additional CSS
2. Add your custom FlareBuilder styles:

/* FlareBuilder Feed Styles */
.flarebuilder {
    max-width: 100%;
    margin: 2rem 0;
}

.flare-item {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: box-shadow 0.2s;
}

.flare-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.flare-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
}

.flare-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.flare-tag {
    background: #f0f0f0;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .flare-item {
        padding: 1rem;
    }

    .flare-title {
        font-size: 1.25rem;
    }
}

Troubleshooting

Feed Not Displaying

• Check browser console for JavaScript errors (F12 → Console tab)
• Verify your tenant slug is correct
• Ensure the container div has a unique ID
• Check if another plugin is blocking external scripts

Script Tags Removed

• Don't switch between Visual and Text modes in Classic Editor
• Use Custom HTML blocks in Gutenberg (not paragraph blocks)
• Some security plugins may block inline scripts - whitelist flarebuilder.com

Styling Conflicts

• Your theme's CSS may override FlareBuilder styles
• Use more specific CSS selectors (e.g., #flarebuilder-feed .flare-item)
• Add !important to critical styles if needed

Multiple Feeds on Same Page

If adding multiple feeds to the same page, ensure each has a unique container ID:

<!-- Feed 1 -->
<div id="flarebuilder-events"></div>

<!-- Feed 2 -->
<div id="flarebuilder-announcements"></div>

<script src="https://flarebuilder.com/v1/flarebuilder.js"></script>
<script>
  new FlareBuilder.Feed({
    tenant: 'your-tenant',
    container: '#flarebuilder-events',
    filters: { types: ['event'] }
  });

  new FlareBuilder.Feed({
    tenant: 'your-tenant',
    container: '#flarebuilder-announcements',
    filters: { types: ['announcement'] }
  });
</script>