Beaver Builder XML (RSS) Loop Plugin

What It Does (And Doesn’t Do)

The Beaver Builder XML Loop plugin extends the native Loop module to work seamlessly with XML feeds to display content. Instead of being limited to WordPress data in the Loop module sources, you can now pull content from RSS feeds, Atom feeds, or any custom XML source, display it in beautiful layouts, and even add pagination, all without writing a single line of code.

This plugin is designed for displaying data in grid and list layouts using Beaver Builder’s Loop module. If you need individual pages for each item (like single post pages), you’ll need a separate integration that imports the XML data as custom post types. This plugin focuses specifically on outputting data in grids where you use Beaver Builder to design how each item appears.

If you need to display more detailed information than fits in a grid but don’t have the ability to ingest the XML content into a custom post type to create single pages, consider using modals or popups that can show additional item details when users click on grid items.

Looking to work with JSON-based REST APIs instead? Check out the Beaver Builder API Loop plugin, which provides similar functionality for REST API endpoints.

Real-World Use Cases

• Blog Aggregation: Display posts from multiple RSS feeds in a unified layout.
• News Feeds: Pull and display news articles from RSS/Atom feeds.
• Podcast Episodes: Show recent episodes from podcast RSS feeds with title, duration, and media attachments.
• Product Feeds: Display products from XML feeds with prices, images, and descriptions.
• Event Listings: Show events from XML-based event systems.

Key Features

Universal XML Feed Support

Connect to any XML feed that returns valid XML data, including:

• RSS feeds
• Atom feeds
• Custom XML feeds
• Media RSS feeds

Access Media Elements and Extended Data

Many RSS and Atom feeds include extra information beyond basic title and description fields, like featured images, media thumbnails, author details, and rich content. The plugin automatically detects and makes these extended elements accessible, so you can easily pull in:

• Media thumbnails and images: Featured images from feeds (like media:thumbnail)
• Rich content: Full article content with formatting (like content:encoded)
• Author information: Detailed creator and contributor data (like dc:creator)
• Custom feed data: Any additional fields your specific feed provides

Flexible Pagination Options

Choose from three pagination strategies to match your needs and feed capabilities:

Choose from two pagination styles:

• Prev/Next: Traditional Previous and Next buttons for sequential browsing
• Load More: Ajax button that appends new content inline until no more items remain

The plugin uses heuristic pagination logic. After each page, if fewer items than requested are returned, it treats it as the last page. If the full number is returned, it prefetches the next page in the background to check for more content, keeping navigation smooth without requiring total counts from the feed.

Performance & Caching

Built-in WordPress transient caching is crucial for performance and reliability. Caching prevents your site from making repeated feed requests on every page load, reduces bandwidth costs, and ensures your content loads quickly even if the external feed experiences slowdowns. The cached data also protects against feed rate limits and temporary outages.

• Configurable cache duration
• Per-request caching with unique keys
• Smart prefetching for pagination
• Builder-only script loading (no admin overhead)

Beaver Themer Integration

Access any XML field through the familiar Themer connections interface you already know. Find the plugin’s connections under the “XML Query – Loop Module” group, then select the “XML Field (key)” connection. A built-in key picker automatically populates with fields from your XML preview, making it easy to select the exact data you need. The integration works seamlessly with Themer’s entire layout system, so you can use XML data anywhere you’d normally use WordPress content.

Dynamic Formatting

External feeds return data in their own formats, which may not match how you want to display it on your site. A date might come as an ISO timestamp when you need “September 7, 2025”, or text might be lowercase when you need it capitalized. The plugin includes built-in formatters to transform data without custom code: uppercase, lowercase, slugify, date:{pattern}, and length for truncation.

Examples:

[wpbb post:xml key='title' format='uppercase']
→ BLOOD MOON: TOTAL LUNAR ECLIPSE WAS VISIBLE ACROSS ASIA

[wpbb post:xml key='pubDate' format='date:M j, Y']
→ Sep 7, 2025

[wpbb post:xml key='author.name' format='lowercase']
→ science desk

[wpbb post:xml key='description' length='150']
→ The blood moon, which reached its peak at 9:12 P.M., was visible across the Middle East, Asia and beyond; the next total lunar eclipse won't...

Need custom formatting beyond the built-in options? The plugin provides the bb_xml_loop_value filter that lets you add your own formatting logic. This means you can create formatters for currency, phone numbers, custom date formats, or any other data transformation you need. The filter receives the output value, raw value, and settings, giving you complete control over how data appears in your layouts.

Handling Missing Data with Fallbacks

XML feeds don’t always return consistent data. An item might be missing an image, an author field could be null, or a description might not exist. The plugin includes a fallback attribute that lets you specify what to display when a field is empty or missing.

For example, when connecting an Image module to media:thumbnail.url, you can set a fallback to a default placeholder image URL. If the feed doesn’t return an image for that item, your layout won’t break, it’ll show your placeholder instead. This works for any field type: display “Author Unknown” when there’s no author, show “No description available” for missing descriptions, or use any default value that makes sense for your content.

[wpbb post:xml key='media:thumbnail.url' fallback='https://yoursite.com/default-image.jpg']

This is crucial for maintaining professional, polished layouts even when working with unpredictable external data sources.

Getting Started

Setting up the plugin is straightforward and requires no coding knowledge. Start by adding a Loop module to your page as you normally would, then select “XML Feed” as your data source in the Loop settings. Enter your XML feed URL and optionally specify the item element path if your feed uses a non-standard structure. Use the built-in preview to see your feed response and verify the data structure. Finally, design your layout using Themer connections to display the data fields you need.

Example: News from BBC’s RSS Feed

Feed URL: https://feeds.bbci.co.uk/news/rss.xml

Sample XML Structure:

<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>BBC News</title>
    <description>BBC News - News Front Page</description>
    <link>https://www.bbc.co.uk/news</link>
    <item>
      <title>Wednesday's Beaver supermoon pictured around the world</title>
      <description>Photographers have been out and about capturing the Beaver Moon as it rose on Wednesday.</description>
      <link>https://www.bbc.com/news/articles/c39749px2zyo?at_medium=RSS&at_campaign=rss</link>
      <guid isPermaLink="false">https://www.bbc.com/news/articles/c39749px2zyo#0</guid>
      <pubDate>Wed, 05 Nov 2025 20:22:59 GMT</pubDate>
      <media:thumbnail width="240" height="135" url="https://ichef.bbci.co.uk/ace/standard/240/cpsprodpb/15eb/live/9cb29500-ba73-11f0-ba75-093eca1ac29b.jpg"/>
    <item>
  </channel>
</rss>

<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>BBC News</title>
    <description>BBC News - News Front Page</description>
    <link>https://www.bbc.co.uk/news</link>
    <item>
      <title>Wednesday's Beaver supermoon pictured around the world</title>
      <description>Photographers have been out and about capturing the Beaver Moon as it rose on Wednesday.</description>
      <link>https://www.bbc.com/news/articles/c39749px2zyo?at_medium=RSS&at_campaign=rss</link>
      <guid isPermaLink="false">https://www.bbc.com/news/articles/c39749px2zyo#0</guid>
      <pubDate>Wed, 05 Nov 2025 20:22:59 GMT</pubDate>
      <media:thumbnail width="240" height="135" url="https://ichef.bbci.co.uk/ace/standard/240/cpsprodpb/15eb/live/9cb29500-ba73-11f0-ba75-093eca1ac29b.jpg"/>
    <item>
  </channel>
</rss>

Configuration

• Data Source: XML Feed
• XML Feed URL: https://feeds.bbci.co.uk/news/rss.xml
• Item Element Path: Leave blank (auto-detects `channel.item` for RSS)
• Items Per Page: 6
• Cache Duration: 15 minutes

Layout with Themer Connections

Add a Box module to your Loop as a wrapper for better layout control. This gives you flexbox/grid capabilities and allows you to add custom classes to style your cards. Inside the Box, add child modules and connect them to XML fields:

• Photo Module → “XML Field (key)” → media:thumbnail.url (Photo Source set as URL)
• Heading Module → “XML Field (key)” → title (Link to link)
• Text Editor → “XML Field (key)” → pubDate (format: date:M j, Y)
• Text Editor → “XML Field (key)” → description (max length: 150)

Understanding Item Element Paths

Most standard feeds (RSS, Atom) are automatically detected and you can leave the Item Element Path blank. However, some custom XML feeds require you to specify where the repeating items are located within the XML structure.

The Item Element Path tells the plugin exactly where to find your array of items within the XML response using dot notation.

Common Feed Structures

RSS Feeds: Leave blank or use channel.item

<rss>
  <channel>
    <item>...</item>
    <item>...</item>
  </channel>
</rss>

<rss>
  <channel>
    <item>...</item>
    <item>...</item>
  </channel>
</rss>

Atom Feeds: Leave blank or use entry

<feed xmlns="http://www.w3.org/2005/Atom">
  <entry>...</entry>
  <entry>...</entry>
</feed>

<feed xmlns="http://www.w3.org/2005/Atom">
  <entry>...</entry>
  <entry>...</entry>
</feed>

Custom XML: Specify the path to repeating elements

<response>
  <data>
    <products>
      <product>...</product>
      <product>...</product>
    </products>
  </data>
</response>

Item Element Path: data.products.product

<response>
  <data>
    <products>
      <product>...</product>
      <product>...</product>
    </products>
  </data>
</response>

Item Element Path: data.products.product

Accessing Nested Fields

Once your items are identified, use dot notation in your Themer connection keys to access nested fields:

• title – Gets the title element from each item
• author.name – Gets the name field from the author element
• media:thumbnail.url – Gets the url attribute from the media:thumbnail element

Working with XML Attributes

The plugin automatically makes XML attributes easily accessible. For elements that only contain attributes (like <media:thumbnail url="..." width="..." />), you can access attributes directly without needing an @attributes prefix.

Array Indexing

Access specific array elements using curly braces:

• category{0} – first category
• images{2} – third image

Pagination

Understanding which pagination type to use is crucial for getting the best performance and user experience from your XML feeds.

None

Displays all items from the feed without any pagination controls. Best for small feeds where you want to show everything at once. The Max Items setting still applies, so you can limit the total number of items displayed.

Client-Side Pagination

This is the recommended option for most standard XML/RSS/Atom feeds. The plugin fetches all items from the feed once, caches them, then paginates through them in the browser. This provides instant page switching with no additional server requests.

Advantages:

• Works with any XML feed (no special feed support needed)
• Reduces server load after initial fetch
• Perfect for typical RSS/Atom feeds

Best For:

• Standard RSS/Atom feeds
• Feeds with reasonable item counts (under 1000 items)
• Any feed that returns all items in a single request

Server-Side Pagination

Only use this option if you have confirmed your specific XML feed accepts pagination parameters in the URL. Most standard RSS and Atom feeds do not support this. Server-side pagination sends parameters like ?page=2&per_page=10 to the feed URL and expects the feed to return only that page’s items.

Configuration Options:

• Pagination Method: Choose between page number (page/per_page) or offset (offset/limit)
• Parameter Names: Customize the parameter names your feed expects
• Page Starts At: Set whether page numbers start at 0 or 1

Best For:

• Custom XML APIs that explicitly support pagination
• Very large feeds where fetching all items at once isn’t practical
• Feeds that document their pagination parameter support

Pagination Styles

Prev/Next: Traditional Previous and Next buttons. Each click fetches (or displays from cache) the new page and replaces the current items. The page scrolls back to the top of the loop automatically.

Load More: A single button that appends new items to the existing list. Perfect for infinite-scroll style experiences. The button automatically disappears when no more items are available.

Customization & Development

Developer Filters

// Custom formatting
add_filter('bb_xml_loop_value', function($output, $raw_value, $settings) {
    if ($settings['format'] === 'currency') {
        return '$' . number_format((float)$output, 2);
    }
    return $output;
}, 10, 3);

// Pagination customization
add_filter('bb_xml_loop_pagination_defaults', function($defaults) {
    $defaults['prev_text'] = '← Previous';
    $defaults['next_text'] = 'Next →';
    return $defaults;
});

// Custom formatting
add_filter('bb_xml_loop_value', function($output, $raw_value, $settings) {
    if ($settings['format'] === 'currency') {
        return '$' . number_format((float)$output, 2);
    }
    return $output;
}, 10, 3);

// Pagination customization
add_filter('bb_xml_loop_pagination_defaults', function($defaults) {
    $defaults['prev_text'] = '← Previous';
    $defaults['next_text'] = 'Next →';
    return $defaults;
});

Styling Variables

The plugin uses CSS custom properties with built-in fallback values, so you only need to override the variables you want to customize. If you want to override any of them, you can do so simply by defining the variable like this:

.bb-xml-pagination {
    --bb-xml-pagination-gap: 6px;
    --bb-xml-pagination-disabled-color: #999;
    --bb-xml-pagination-disabled-bg: #f5f5f5;
    --bb-xml-pagination-radius: 3px;
    --bb-xml-button-bg: #0073aa;
    --bb-xml-button-color: #fff;
    --bb-xml-button-hover-bg: #005a87;
    --bb-xml-pagination-hover-color: #0073aa;
    --bb-xml-loading-overlay: rgb(255 255 255 / 0.6);
}

.bb-xml-pagination {
    --bb-xml-pagination-gap: 6px;
    --bb-xml-pagination-disabled-color: #999;
    --bb-xml-pagination-disabled-bg: #f5f5f5;
    --bb-xml-pagination-radius: 3px;
    --bb-xml-button-bg: #0073aa;
    --bb-xml-button-color: #fff;
    --bb-xml-button-hover-bg: #005a87;
    --bb-xml-pagination-hover-color: #0073aa;
    --bb-xml-loading-overlay: rgb(255 255 255 / 0.6);
}

Accessibility

The plugin’s pagination controls include full ARIA support for screen readers, semantic HTML structure, responsive design, and complete keyboard navigation. Grid and layout accessibility depends on how you structure your Loop template.

Troubleshooting

Keys dropdown is empty: Open Loop settings and run Preview to refresh available keys.

Feed returns empty results: Check your Item Element Path setting and verify XML structure in preview.

Pagination not working: For standard RSS/Atom feeds, use Client-Side pagination. Only use Server-Side if your feed explicitly supports pagination parameters.

Media elements not showing: Ensure you’re using the correct field name (e.g., `media:thumbnail.url` to access thumbnail images from feeds).

Wrapping It All Up

The Beaver Builder XML Loop plugin fundamentally changes how you approach external feeds in WordPress. No longer are you confined to displaying only WordPress posts and pages in your Loop modules. With this plugin, any XML feed, from RSS to custom feeds, becomes a content source for your Beaver Builder layouts.

What makes this plugin particularly powerful is its seamless integration with existing Beaver Themer workflows. You don’t need to learn new systems or abandon familiar tools. The same connection interface you use for WordPress data now works with XML feeds. The same pagination controls you’re accustomed to now handle remote data sources with intelligent caching and performance optimizations.

The plugin’s flexibility means it grows with your needs. Start simple with a basic RSS feed, then add client-side pagination as your content grows. Implement straightforward layouts, then customize them with your own styling variables and filters. The robust architecture supports everything from simple blog aggregators to complex, multi-feed content systems.

Whether you’re building a news aggregator that pulls from multiple RSS feeds, creating a podcast directory that showcases episodes from various sources, or developing a product showcase that displays items from XML feeds, this plugin provides the foundation for reliable, performant feed integration without the complexity of custom development.

Most importantly, the plugin handles the technical challenges of remote feed display, caching, pagination, error handling, and security, so you can focus on creating compelling user experiences. Your feed-powered content loads fast, navigates smoothly, and provides the same polished experience users expect.