Context & Page Setup
I have created a custom archive template that displays all posts for a specific taxonomy term (let’s call it Categories). This part works perfectly.
However, my posts also use a second taxonomy called Themes. On the category archive page, I want to group and display the posts by their assigned Theme.
To achieve this, I am using nested queries:
- Outer Query Loop (on a Section): This loops through the “Themes” taxonomy and outputs the Theme title as a heading.
- Inner Query Loop: Placed inside the section (within a component, though the issue persists without it). This loop fetches and displays the posts that match both the current Category of the archive page AND the current Theme of the outer loop.
Example of it working so far:
- Available Themes:
A,B,C - Available Categories:
A,B - Let’s say I am on the archive page for Category A, and there are only posts assigned to Theme A and Theme C.
- The page successfully outputs sections for Theme A and Theme C, dynamically skipping Theme B. The correct posts are displayed under each heading.
The Problem The issue arises when I try to use a “Load More” button for the inner query loops.
Because the inner loops are generated dynamically by the outer loop, they all seem to inherit the exact same Query Loop ID. As a result, the “Load More” button doesn’t know which specific inner loop to target, and the pagination fails to load the correct posts (or doesn’t load anything at all).
Has anyone built a similar setup or found a workaround for handling “Load More” buttons inside nested query loops? Is there a way to dynamically assign unique IDs to the inner loops so the buttons target the correct query?
Any help or snippets would be greatly appreciated!