Filters – Interactive Filtering for WordPress Query Loop

The Filters system extends the WordPress Query Loop block with interactive filtering. Users can filter posts by taxonomy, search by keyword, sort results, and see active filters—all without page reloads when using Enhanced Pagination.

How Filters Work

Groundworx Filters are designed specifically to work with the WordPress Query Loop block. The Filters container and all Filter blocks (Filter Terms, Filter Text, Filter Order By, Filter Active, Filter Submit) must be placed inside a Query Loop block.

When users interact with filters, the Query Loop automatically updates to show matching results.

Key Points:

• Filters only work inside a Query Loop block
• All filter blocks belong inside a Filters container
• For instant filtering, enable “Enhanced Pagination” in Query Loop settings

Adding Filters to Query Loop

1. Add a Query Loop block to your page
2. Enable Enhanced Pagination in Query Loop settings (recommended)
3. Inside the Query Loop, add a Filters block
4. Add filter blocks inside the Filters container

Filters Container Settings

The Filters block wraps all your filter controls and manages submission behavior.

Building a Filter Interface

Here’s a typical filter setup:

1. Query Loop with Enhanced Pagination enabled
2. Filters container with Auto Submit enabled
3. Inside Filters:
   • Filter Terms for category selection
   • Filter Text for keyword search
   • Filter Order By for sorting
   • Filter Active to show selected filters

Wrap filter blocks in Groups or Columns for custom layouts.

Enabling Instant Filtering

Auto Submit – When enabled, filters apply immediately when users make selections. When disabled, users must click a submit button to apply filters. For Auto Submit to work instantly (without page reloads), you must disable “Reload full page” in the Query Loop settings:

1. Select the Query Loop block
2. Open the Advanced panel in the sidebar
3. Disable “Reload full page” toggle

The “Reload full page” setting is found in the Query Loop block’s Advanced panel, below the HTML Element dropdown. When the toggle is off (disabled), the Query Loop updates dynamically without refreshing the page.

When “Reload full page” is disabled:

• Query Loop uses AJAX-like behavior to update results
• Auto Submit works instantly without page reload
• Smooth transitions between filter states
• Better performance and user experience

When “Reload full page” is enabled:

• Each filter change triggers a full page reload
• Auto Submit is then disabled, and a submit button will be used to submit
• Traditional form submission behavior

Filter Blocks

Add these blocks inside the Filters container:

Filter Terms Block

Filter by taxonomy terms (categories, tags, or custom taxonomies).

Taxonomy – Select which taxonomy to filter by

Selection Type:

• Single – Users can select one term at a time
• Multiple – Users can select multiple terms

Input UI:

• Select – Native browser dropdown
• Custom Select – Styled dropdown with better mobile experience
• Inline – Horizontal buttons/chips
• Stacked – Vertical list of options

Label Position – Hidden, Stacked (left/center/right), or Inline

Label – Custom label text

All Option Label – Text for the “All” option (default: “All”)

Show Count – Display post count next to each term

Show Only Top Level – For hierarchical taxonomies, show only parent terms

Show Hierarchy – Display terms in hierarchical tree structure

Hide Empty – Hide terms with no matching posts

Contextual Terms – Only show terms that exist in the current query results

Filter Text

Text search input for filtering posts.

Label Position – Hidden, Stacked (left/center/right), or Inline

Label – Custom label text (default: “Search”)

Placeholder – Placeholder text (default: “Search…”)

Search Content – When enabled, searches post content in addition to titles

Filter Order By

Sort control for query results.

Label Position – Hidden, Stacked (left/center/right), or Inline

Label – Custom label text (default: “Order by”)

Input UI:

• Select – Native browser dropdown
• Custom Select – Styled dropdown
• Inline – Horizontal buttons
• Stacked – Vertical list

Options – Customize available sort options:

• Newest to oldest
• Oldest to newest
• A → Z
• Z → A
• Add custom options for meta fields

Filter Active

Displays currently active filter selections with remove buttons.

Label Position – Hidden, Stacked (left/center/right), or Inline

Label – Custom label text (default: “Active Filters:”)

Show Clear All – Display a “Clear All” button

Clear All Label – Custom text for clear button (default: “Clear All”)

Filter Submit

Submit button for applying filters. Only needed when Auto Submit is disabled. When enabling auto submit at the Filters block setting, if a Filter Submit block is found as a child, it will hide it.

Label – Button text (default: “Apply Filters”)

Width – Set button width percentage

Supports button color, border, and typography customization.

Example Use Cases

Blog Archive: Filter posts by category with a text search and date sorting.

Product Catalog: Filter WooCommerce products by multiple taxonomies (category, brand, size) with price sorting.

Resource Library: Filter documents by type, topic, and date with keyword search.

Team Directory: Filter team members by department with alphabetical sorting.

Styling Filters

Filter blocks inherit your theme’s form styles. Use the block toolbar and sidebar to customize:

• Typography (font size, weight, family)
• Colors (text, background)
• Spacing (padding, margin)
• Border (for submit button)

For global form styling, use theme.json:

{
  "styles": {
    "elements": {
      "button": {
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--white)"
        }
      }
    }
  }
}

Next Steps

• Combine Filters with Featured Posts or Dynamic Flow for filtered carousels
• Experiment with different Input UI styles for Filter Terms
• Test your filters with Enhanced Pagination enabled