Contact
Divi 5 Tips

How to Add Front-End Search, Filtering and Sorting to a Divi 5 Blog with the Post Filter Module

By Spencer Taylor ·

Until August, letting visitors search or filter a Divi blog on the front end meant a third-party plugin, a shortcode, or hand-written AJAX. Divi 5's new Post Filter module does it natively. Because it sits on top of the Loop Builder, it works with any looped element — a blog, a portfolio, a team directory, a WooCommerce product grid — and it filters without a page reload if you want it to. This guide walks through the exact build, setting by setting. It's the same approach I use on client sites as a Divi 5 specialist.

Before you start

The Post Filter module does not create content. It narrows what an existing Loop returns. If the element you want to filter isn't a Loop yet, the module shows a "Select a Loop" message and does nothing. So Phase 1 is the Loop, and it has to work on the front end before a single filter goes on the page.

Phase 1

Build the Loop You Want to Filter

You can loop a Section, Row, Column or a single module. For a blog, the simplest reliable setup is a Row with one Column, looped, containing a Post Title, a Post Featured Image and a Post Excerpt module wired to dynamic content.

1
Add the element and enable the Loop
Select the row (or column) → Content → Loop → enable Loop Element.
2
Set the query
Query Type → Post Type → choose Posts (or your custom post type). Set the number of results per page and the default ordering. Leave the rest at defaults for now — the filter will override them at runtime.
3
Give the looped element an Admin Label
Advanced → Meta → Admin Label → something like "Blog Results". The Post Filter module lists loops by this label, so name it now and you won't be guessing between three unnamed rows later.
4
Design one item with dynamic content
Inside the looped column, add your modules and point each one at dynamic content (Post Title → Dynamic → Post Title, and so on). You're designing a single card; the Loop repeats it for every result.
5
Save and check the front end
Publish and load the page. Confirm the loop shows real posts with the right ordering and count. Anything that's wrong here will look like a filter bug later, so fix it now.
Phase 2

Add the Post Filter Module and Point It at the Loop

1
Insert the module
Add a Row above (or beside) the loop → add a module → choose Post Filter. It arrives with four starter items already inside: a Search field, a Category checkbox list, a Reset button and an Apply button.
2
Choose the target
Content → Target → Target Loop → pick "Blog Results" from the dropdown. The "Select a Loop" placeholder disappears and the starter items become live.
3
Pick the Apply Mode
Content → Apply Mode. Two options, and this is the one decision that changes how the page feels — see the table below.
Apply ModeWhat happens
Submit (default)Nothing changes until the visitor clicks Apply. The page reloads with the filters written into the URL. Best for long lists, many filters, or when you want shareable, bookmarkable filtered URLs.
AutoThe loop updates the moment a control changes. No reload, no Apply button needed. Best for short blogs, portfolios, anything where instant feedback matters more than a clean URL.
4
Set the Relation
Content → Relation → And (default: every active filter must match) or Or (any one match is enough). For a blog with categories plus a search box, And is almost always what visitors expect.
Phase 3

Configure the Filter Items

Every control inside the form is a Post Filter Item — a child module you add, duplicate, reorder or delete from the Elements list. Each item has a Field Type, and the Field Type decides which other settings appear.

Field TypeWhat it renders
TextSearch box — or a number, date, date-time or time input via Field Value Type. Searches title, content and custom fields.
SelectSingle-choice dropdown. Best for long option lists.
RadioSingle-choice button list. Visible options, one pick.
CheckboxMulti-choice list. The starter Category item is one of these.
Order BySort-field picker. You choose which fields visitors may sort on.
OrderAscending / descending toggle. Pairs with Order By.
Multiple OrderUp to five stacked sort rules. Overkill for a blog; useful for catalogs.
Submit / ResetButtons. Submit is required unless Apply Mode is Auto. Reset clears this loop's filters only.
Price Range / Stock Status / Review RatingWooCommerce controls — only offered when the target loop is a product loop.

Item settings that matter

SettingWhat it does
Field LabelThe text above the control. For Submit and Reset it's the button text.
Field Value TypeText, Number, Date, Date Time or Time — how the input is interpreted. Get this wrong and a date filter silently compares strings.
Field OptionThe data being filtered: a taxonomy (Category, Tag…), author, standard post data, or a custom field.
Meta KeyThe custom-field key, when Field Option is a custom field.
Field PlaceholderHint text inside the input. Falls back to the Field Label, then to "Search".
Field ComparisonHow values are matched: equals, not equals, greater than, contains, and so on.
Options MethodAutomatic discovers the distinct values in the database and caches them for 24 hours. Manual lets you type your own Value / Label pairs.
Order By OptionsOn an Order By item: the checkboxes that decide which sort fields visitors can choose.
Label Date FormatPHP date format for date option labels, for example M j, Y.
1
Keep the search box, rename it
Open the starter Text item → Field Label "Search posts" → Field Placeholder "Type a keyword…". Leave Field Value Type on Text.
2
Decide how categories should look
The starter Category item is a Checkbox list with Options Method on Automatic, so it already shows your real categories. If you have more than six or seven, change the Field Type to Select — a wall of checkboxes is the fastest way to make a filter look like a tax form.
3
Add a sort control (optional)
+ Add Element → Field Type Order By → tick the fields you want to allow under Order By Options (Date and Title cover most blogs). Add a second item with Field Type Order for the ascending/descending toggle.
4
Order the items
Drag in the Elements list: broad controls first (Search, Category), specific ones next (sort), buttons last. If you switched Apply Mode to Auto in Phase 2, delete the Apply button — it does nothing in Auto mode.
Gotcha

Automatic options are cached for a day. Add a new category and it won't appear in the filter until the cache expires or you click Clear Cached Options. Remember this before you file it as a bug.

Phase 4

Style the Form

The parent module's Design tab sets defaults for every item; each item can override them. Work parent-first.

Design groupControls
LayoutBlock, Flex (default) or Grid for how the items line up. Flex with wrap is the right answer for a horizontal filter bar that stacks on phones.
FieldText and number inputs, dropdowns, and label typography.
Option / Checkbox & Radio OptionsThe individual rows in a checkbox or radio list: spacing, backgrounds, borders, icons.
ButtonSubmit and Reset appearance — use the same preset as your site buttons so the form doesn't look bolted on.
Sizing / Spacing / Border / Box ShadowStandard Divi 5 groups. Design Variables apply here, so pull your global colors and spacing tokens rather than typing hex values.
Check on a phone before you call it done

A long Select on a 390px screen needs full width, and a Flex row of five items needs Wrap turned on or it will overflow the column.

Phase 5

Test It Like a Visitor

Search for a known wordPick a word you know is in exactly one post. One result?
Combine a category and a searchWith Relation on And, you should get the intersection, not the union.
Sort both waysTitle ascending, then descending. Confirm the order actually flips.
ResetEvery control clears and the loop returns to its default state.
Filter down to nothingConfirm the empty state is acceptable, and consider adding a "no results" message to the Loop.
Share the URLIn Submit mode, paste the filtered URL into a private window. The same filtered results should load — that's the built-in shareable-link behavior.
Repeat on tablet and phoneReal widths, not the builder's preview alone.
Worth knowing

Things That Will Save You an Afternoon

  • Multiple Post Filter modules can target the same loop and they stay in sync. A search box in the hero and a category bar above the grid is a legitimate layout.
  • Filters never leak across loops. Two loops on one page, two independent filter forms.
  • Pagination stays in sync. A Pagination module on the same loop resets to page one whenever a filter changes.
  • Taxonomy, user and menu loops are limited. They only support Text, Order By, Order, Submit and Reset — no Select, Radio or Checkbox items.
  • Changing the Target Loop to an incompatible type resets any affected items back to Text. Set the target first, then build the items.
  • Custom fields with thousands of unique values trigger a warning in Automatic mode. Switch that item to Manual options or pick a different field.
Related

The same Canvas + Interaction approach from my Divi 5 off-canvas menu tutorial can hide this whole filter form behind a "Filter" button on mobile.

Quick Reference — Key Settings

Loop
Row or Column, Loop Element on, Post Type = Posts, Admin Label "Blog Results"
Target Loop
Blog Results
Apply Mode
Submit for shareable URLs · Auto for instant filtering
Relation
And
Items
Text (search) · Category as Select · Order By (Date, Title) · Order · Reset · Submit (drop in Auto mode)
Options Method
Automatic — cached 24h, use Clear Cached Options after adding terms
Layout
Flex, wrap on
Buttons
Site button preset
Spencer Taylor, WordPress web designer and developer

About the Author

Spencer Taylor

South Jersey–based WordPress web designer and developer, and the person behind Threshold Solutions. I build fast, custom Divi 5 and WordPress sites for businesses across New Jersey and Philadelphia — and share what I learn here.

Work with me

More from the blog

All articles