Filter Panel and Loop
A working filter experience pairs two regions on the page: a filter panel (Filter Posts + Filter Posts Item blocks) and a results loop (Archive Loop block). WPEnhanced Ajax Filter Blocks keeps them in sync over AJAX. This page explains how they relate, how to lay them out in the block editor, and how to target the correct loop when a page grows beyond a single panel.
Roles recap
| Component | Block type | Responsibility |
|---|---|---|
| Filter panel | Filter Posts | Container, update timing, reset/search buttons, mobile toggle, column layout for items |
| Individual filters | Filter Posts Item (children) | One control per row: taxonomy, meta, search, price, etc. |
| Results area | Archive Loop | Query, grid/masonry/list layout, pagination, no-results message |
Filter Posts Item blocks must be nested inside Filter Posts. They cannot sit at the root of the page on their own. Archive Loop is independent in the block tree but logically downstream of the panel.
Typical page layouts
Sidebar filters, main content loop
Common on shop and directory pages:
┌──────────┬────────────────────────────┐
│ Filter │ Archive Loop │
│ Posts │ ┌────┐ ┌────┐ ┌────┐ │
│ (items) │ │ │ │ │ │ │ │
│ │ └────┘ └────┘ └────┘ │
│ │ pagination │
└──────────┴────────────────────────────┘
In the block editor, use a Columns block (or theme row layout): narrow column for Filter Posts, wide column for Archive Loop. Set Filter Posts Location / layout options if available to keep the panel visually in the sidebar on desktop.
Stacked filters above the grid
Common on landing pages and blogs:
┌─────────────────────────────────────┐
│ Filter Posts (horizontal items) │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│ Archive Loop │
└─────────────────────────────────────┘
Use Filter Posts column settings to arrange Filter Posts Item blocks in a row on desktop and stack on mobile.
Filters in a header bar, loop below the fold
Filter Posts supports toggle and slide-in appearances (enhanced in WPEnhanced Ajax Filter Blocks Pro for mobile-specific layouts). A compact bar can open a full filter drawer while the Archive Loop remains in the main content flow.
Main loop: default targeting
Every Archive Loop has a Main loop toggle. When on, that loop is the default AJAX target for Filter Posts blocks on the same page that share the same post type.
For the common case—one panel, one loop, one post type—no extra wiring is needed:
- Add Filter Posts (post type:
post). - Add Archive Loop (post type:
post, Main loop: on). - Add Filter Posts Item children.
When a filter changes, the plugin finds the main loop for that post type and replaces its HTML.
Block selector ID: multiple loops or panels
When a page has more than one Archive Loop or more than one Filter Posts panel, assign a matching Block selector ID on each related pair:
| Situation | What to do |
|---|---|
| Two product loops (e.g. “Featured” and “All products”) | Turn Main loop on for only one default, or turn it off on secondary loops and use selector IDs |
| Filter panel should only update the shop grid, not a related-posts loop | Give the shop Filter Posts and shop Archive Loop the same selector ID; leave the related loop without that ID |
| Same filters duplicated top and bottom of page | Same selector ID on both Filter Posts blocks so either panel drives the same loop |
Selector IDs are plain strings you define (e.g. main-shop, blog-archive). They must match exactly between the Filter Posts block and the Archive Loop it should update.
Two Archive Loop blocks both marked Main loop for the same post type can cause ambiguous targeting. Prefer one main loop or use selector IDs exclusively.
Post type must align
Filter Posts, every Filter Posts Item, and the targeted Archive Loop must agree on post type:
- Blog filters →
post - Products →
product - Custom post type → your CPT slug
A mismatch produces empty results or loops that never update. Filter Posts Item blocks inherit post type context from the parent Filter Posts block via block editor context.
Filter Posts Item inside the panel
Each item is an independent control but shares panel-level behavior:
| Panel setting (Filter Posts) | Effect on all items |
|---|---|
| Update type | On change vs update button for the whole panel |
| Synchronize | URL sync for combined filter state |
| Update count | Refresh option counts when other filters narrow results |
| Reset | Clear all child items together |
Items can use different control types (select + checkboxes + range on one panel). Order items in the block list top-to-bottom as you want them to appear.
Archive Loop responsibilities
The loop block owns everything about presentation and baseline query:
- Post type, status, includes/excludes, sort order
- Grid vs masonry (list view is Pro)
- Loop template (blog card, product card, custom template)
- Pagination vs Load More (Load More is Pro)
- Result count text, sorting menu, map display (Pro map radius uses ACF)
Filters narrow the loop query; they do not replace loop template or column settings.
Empty and loading states
When filters match nothing:
- Archive Loop shows its No results message (customizable in block settings).
- Filter Posts Item blocks may hide options with zero matches when Hide empty options is enabled—see Empty filter options when available.
During AJAX requests, the loop region typically shows a preloader configured on the Archive Loop block so visitors know content is updating.
Editor vs front end
In the block editor, Filter Posts Item blocks may show placeholder controls or sample options. Full faceted behavior—including live counts and AJAX refresh—runs on the published front end. Always verify filter pages after publishing, especially with page caching enabled.
Common patterns
| Pattern | Setup summary |
|---|---|
| Blog archive with category + tag | One Filter Posts, two items, one main Archive Loop |
| WooCommerce shop | Product post type; items for category, attribute, price; product loop template |
| CPT directory | Custom post type on panel and loop; taxonomy items for CPT taxonomies |
| Fixed category landing + filters | Archive Loop include rules limit to one category; panel adds search and meta filters within that set |
Tutorials: Posts filter, Product category filter when available.
Pro enhancements to the panel/loop pair
WPEnhanced Ajax Filter Blocks Pro extends layout and behavior without changing the mental model:
- Conditional filters — Show or hide Filter Posts Item blocks based on other selections.
- Filter appearances and mobile — Off-canvas panels, sticky filter buttons.
- List view and grid switcher — Visitor toggles loop layout on the Archive Loop.
- Catalog Index — Faster count updates on large WooCommerce catalogs.
Get WPEnhanced Ajax Filter Blocks Pro
What's next
- Quick start — Build a basic panel + loop page step by step
- Archive Loop block — Loop settings reference
- Filter Posts block — Panel settings reference