Mastering Bricks Pagination with AJAX Filters: Solving Duplicate Results

Introduction

When building dynamic content in WordPress, especially with AJAX filtering, ensuring seamless pagination can be challenging. This guide walks through a real-world example encountered using Bricks Builder, where filtering with AJAX and paginated results led to duplicate entries. We’ll break down why this issue isn’t unique to Bricks and share practical steps to make pagination and AJAX filters work harmoniously across WordPress.

Understanding the Pagination and Filtering Issue

In our use case with Bricks Builder, the pagination and AJAX filters displayed an unexpected behaviour: selecting a filter (e.g., “Widgets”) correctly showed results on multiple pages. However, upon closer inspection, items appeared on both page one and page two, creating confusion for the end-user.

This issue wasn’t isolated to Bricks but was due to how WordPress handles pagination queries, particularly when post timestamps aren’t unique. When WordPress orders content by date, identical timestamps across posts can result in unpredictable pagination, causing items to appear repeatedly across paginated pages.

Here is a video showing the issue. Watch the post titled “Image Widget” you will see duplication occur.

Breaking Down the Cause of Duplicate Pagination Results

The underlying issue is related to how WordPress sorts content in queries. By default, WordPress orders posts by date in descending order, which works well for most scenarios. However, when posts have the same date (as happens frequently with imported content or bulk-created entries), WordPress may struggle to maintain unique pagination, leading to duplication.

In our case:

• Imported Posts: All imported posts for the “Widgets” filter shared the exact same timestamp, meaning they were indistinguishable by date alone.
• AJAX and Pagination: With AJAX filtering, WordPress was unable to distinguish results across pages since they lacked unique identifiers in the query.

Solution Steps to Resolve Pagination and Filter Duplication

This solution applies broadly to WordPress sites using AJAX filters, not just Bricks users, but here we’ll illustrate it using Bricks Builder settings.

1. Change the Sorting Order for Uniqueness

• To avoid repeated posts, use a unique field for sorting—such as Post ID or Title—instead of the default Date.
• In Bricks: Go to the template query settings and adjust the “Order By” field from Date to Title or Post ID. This change ensures that each post has a unique order, allowing WordPress to manage pagination without duplicating entries.
• For General WordPress Users: Access the query settings for your filtered content in your theme or plugin and apply a unique sorting order.

2. Disable Query Merge (If Using Complex Query Setups)

• When dealing with complex queries or layered filters, sometimes query conflicts can occur. In Bricks, leaving the “Disable Query Merge” option off allows the main query to function cleanly.
• This step is optional, but for those encountering complex filtering requirements, ensure that query settings aren’t overly restrictive.

3. Applying User Interaction Enhancements for Smooth Navigation

• Using AJAX pagination allows for a smoother user experience, but ensuring that users return to the top of the content after each pagination click improves usability. In Bricks, you can add an Interaction to the block element to scroll to the top automatically after each pagination click.
• For non-Bricks WordPress setups, a simple JavaScript or jQuery snippet can be added to trigger an automatic scroll back to the top after each pagination action.

4. Additional Considerations for Custom Queries and AJAX Filters

• If using custom WP_Query calls or plugins to generate your paginated results, ensure your query parameters avoid default ordering by Date if timestamps are the same. For instance, try a combination of Post ID and Title ordering for unique identifiers across each paginated page.
• AJAX filtering can also sometimes interact with caching plugins in ways that disrupt smooth pagination. If you’re using caching, ensure your AJAX requests bypass caching or are configured for real-time updates.

Summary: Optimising Pagination and Filtering for WordPress

While this example centres around Bricks Builder, the principles here are essential for any WordPress setup involving AJAX filtering and pagination. By setting unique sorting identifiers and configuring interactions correctly, you can achieve reliable and consistent results across paginated content, elevating the user experience and reducing display errors.

This approach allows you to maintain control over how filtered content appears on each page, ensuring smooth transitions and avoiding frustrating duplication. With these insights, you’ll be well-equipped to tackle any similar pagination challenges, no matter your WordPress theme or builder of choice.