Quick Start

This tutorial walks through a common first project: a blog archive page where visitors filter posts by category and keyword search, with results updating instantly in an Archive Loop grid.

Estimated time: 15–20 minutes. You need the free plugin installed and activated.

What you will build

┌─────────────────────────────────────┐
│  Filter Posts                       │
│  ┌─────────────┐ ┌───────────────┐  │
│  │ Category    │ │ Search        │  │
│  │ (dropdown)  │ │ (text field)  │  │
│  └─────────────┘ └───────────────┘  │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│  Archive Loop                       │
│  [Post] [Post] [Post] [Post]        │
│  ← pagination →                     │
└─────────────────────────────────────┘

Step 1: Create a page

1. Go to Pages → Add New (or edit an existing test page).
2. Give the page a title, e.g. Filtered Blog.
3. Use a blank or full-width template if your theme offers one so the loop has room to breathe.

Step 2: Add the Archive Loop block

1. Click + and search for Archive Loop.
2. Insert the block below where you want results to appear (filters usually go above the loop).

Configure the basics in the block sidebar:

Setting	Suggested value
Post type	Post (or your custom post type)
Post count	12
Main loop	On — marks this loop as the primary target for filters on the page
Grid style	Grid
Columns	3 (adjust for your theme)
Pagination	Standard pagination

Leave other query options at defaults for now. The loop shows published posts on first load.

note

Only one Archive Loop on a page should be marked Main loop unless you intentionally target multiple loops. The quick-start setup uses a single main loop.

Step 3: Add the Filter Posts block

1. Above the Archive Loop, insert a Filter Posts block.
2. In the block sidebar, set:

Setting	Suggested value
Post type	Post — must match the loop
Update type	On change (updates as visitors interact) or Update button (updates when they click Search)
Synchronize	On — keeps filter state aligned with the URL when URL sync is enabled globally

The Filter Posts block is a container. It does not create filters by itself—you add Filter Posts Item blocks inside it.

Step 4: Add a category filter item

1. With Filter Posts selected, click + inside the block (or use the block inserter while the container is focused).
2. Add a Filter Posts Item block.
3. Configure the item:

Setting	Value
Filter source	Category (or Taxonomy → category)
Filter type	Select (dropdown)
Show label	On
Custom label	Category (optional)

Save the page. On the front end you should see a category dropdown inside the filter panel.

Step 5: Add a search filter item

1. Add another Filter Posts Item inside the same Filter Posts block.
2. Configure:

Setting	Value
Filter source	Search
Filter type	Search
Placeholder	Search posts…

Search filters typically fire after a short typing delay or when the visitor submits, depending on Update type on the parent Filter Posts block.

Step 6: Connect filters to the loop

On a single page with one Main loop Archive Loop and one Filter Posts block sharing the same post type, blocks connect automatically—no manual ID wiring is required for this basic setup.

If you use multiple loops or filter panels on one page, assign matching Block selector ID values on the Filter Posts and Archive Loop blocks so each panel updates the correct loop. See Filter panel and loop for advanced wiring.

Step 7: Test on the front end

1. Publish the page and view it on the front end (not in the editor preview if your theme behaves differently cached).
2. Choose a category—the Archive Loop should refresh without a full page reload.
3. Enter a search term and confirm results narrow accordingly.
4. Combine category + search and verify both constraints apply.
5. Check the browser address bar: with URL sync enabled, query parameters should reflect active filters (see URL sync).

If nothing updates, confirm the free plugin is active, no JavaScript errors appear in the browser console, and your host is not blocking REST API requests.

Step 8: Optional polish

• Reset button: On Filter Posts, enable reset controls so visitors can clear all filters.
• Result counts: Enable count badges on filter items to show how many posts match each option.
• Empty state: Customize the Archive Loop “no results” message.
• WooCommerce: Swap post type to Product and add attribute or price filter items—see WooCommerce integration when available.

Example: product category filter (WooCommerce)

If WooCommerce is active, repeat the same pattern with these changes:

1. Archive Loop → post type Product, loop template suited for products.
2. Filter Posts → post type Product.
3. Filter Posts Item → filter source Product category or Product attribute.

Price, weight, and stock filters are available in the free plugin for WooCommerce stores.

Pro features (optional next steps)

After the free setup works, WPEnhanced Ajax Filter Blocks Pro adds Load More, list view, conditional filters, Catalog Index for large catalogs, Auto Suggest on search fields, and more. Pro installs separately—see Install Pro when available.

What's next

• How filtering works — Understand REST requests and query building
• Filter panel and loop — Multiple loops, selector IDs, and layout patterns
• Feature overview — Explore all filter sources and layout options