The Divi Post Filter module builds a front-end filter form that refines a Loop already on your page. Visitors can search, tick categories, set a price range, or change the sort order, and the looped content updates to match.
Each control in the form is its own Post Filter Item child module, so you can add, remove, and reorder controls independently.
The Post Filter module itself does not create content - it points at a loop you have already built and narrows what that loop returns.
Add The Divi Post Filter Module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon
to insert a Row.Click the Gray Plus icon
inside the Row, which will show the list of all available Divi modules.Find the Post Filter module and click on it to load it. Alternatively, you can use the Search option to find it.
Connect it to a Loop builder.
Divi inserts the Post Filter module with a starter set of Post Filter Items - a Search field, a Category checkbox list, a Reset button, and an Apply button - so you can see the form immediately.
⚠️ Note: The Post Filter module needs a loop to work on. Build your looped content first - a Group, Row, or module with the Loop builder enabled - then add the Post Filter module and point it at that loop.
The Divi Post Filter Module Use Cases
Filterable blog archives: Let readers narrow a post loop by category, tag, or author, and search by keyword.
Product catalogs: On a WooCommerce product loop, give shoppers a price range slider, a stock status filter, and a review rating filter.
Team and staff directories: Filter a user loop by name or username, and sort by display name.
Custom post type listings: Filter properties, events, or recipes by their custom fields - price, date, capacity, or anything else stored as post meta.
Sortable listings: Give visitors an Order By dropdown so they can re-sort a loop without reloading the whole page.
Post Filter Module Settings Breakdown
Once you've added the Post Filter module, the module settings automatically pop up. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
The Content tab is where you connect the filter form to a loop, decide when filtering happens, and manage the controls inside the form.
Target - Connect the form to a loop and choose how it behaves.
Target Loop - Choose which loop this filter form should control. The dropdown lists every loop on the current page by its module label. There is no default, so you must pick one. Unlike the Pagination module, the Post Filter module cannot target the main query - until you select a loop, the module shows a Select a Loop message and does nothing.
Apply Mode - Choose when filter criteria are applied to the targeted loop. Submit (the default) waits until the visitor clicks the submit button. Auto updates the loop as soon as the visitor changes a control.
Relation - Choose how multiple active filters combine:
And (the default) requires every filter to match.
Or requires at least one filter to match.
Elements - Add, edit, duplicate, reorder, and delete the Post Filter Items that make up the form. Covered in detail below.
Background - Choose the Post Filter module's background styles.
Loop - Enables the loop builder on the Post Filter module itself. This is separate from Target Loop - it repeats the filter form; it does not choose what the form filters.
Order - Choose where the Post Filter module appears inside a Flexbox or Grid layout.
Meta - Choose the Post Filter module's label text and force its visibility inside the Visual Builder.
The Design tab
All the design styles and options for the Post Filter module are in this tab. The styling you set here applies to every Post Filter Item in the form, and each item can override it individually.
Layout - Choose the Layout Style. It allows you to change how the child modules are being displayed.
Field - Choose the styling for the form's text inputs, number inputs, and dropdowns, plus the Label Text typography for the labels above them.
Option - Choose the styling for individual checkbox and radio option rows.
Checkbox - Choose the styling for the checkbox field types and their labels.
Radio Options - Choose the styling for the radio button field types and their labels.
Multiple Order Button - Choose the styling for the small add and remove buttons inside a Multiple Order control.
Button - Choose the styling for the form's submit and reset buttons.
Sizing - Choose the Post Filter module's sizing.
Spacing - Choose the Post Filter module's spacing.
Border - Choose the Post Filter module's border styles.
Box Shadow - Choose the Post Filter module's Box Shadow styles.
Filters - Choose the Post Filter module's filters, such as hue shifts, saturation changes, and blending modes.
Transform - Choose the Post Filter module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the Post Filter module's animation styles, adding personality and interactivity while keeping a polished, professional feel.
The Advanced tab
The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.
Attributes - Assign a CSS ID, reusable CSS classes, or custom HTML attributes to the element. Use these to apply advanced styling via your child theme's stylesheet or Divi's custom CSS settings.
CSS - Allows you to add custom CSS code to fine-tune your Post Filter module, enabling advanced styling that perfectly aligns with your vision.
HTML - Choose the semantic HTML tag for the Post Filter module.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Interactions - Create custom interactions, such as showing or hiding the Post Filter module, and many more.
Visibility - Choose the Post Filter module's visibility based on different devices.
Transitions - Choose how long the Post Filter module's animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.
Position - Choose precise control of the Post Filter module placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the Post Filter module behaves and transforms during scrolling.
Connect the Post Filter module to a loop
The Post Filter module does nothing until you tell it which loop to control.
Build the content you want to filter and turn on the Loop option group on that Section, Row, Column, or module.
Add the Post Filter module to the page - above, beside, or below the loop.
Open the Post Filter module's Content tab and open the Target group.
Pick your loop from the Target Loop dropdown. Loops are listed by their module label, so give your looped element a clear label in its Meta group first.
Choose an Apply Mode.
Submit waits for a button click and reloads the page with the filters in the URL.
Auto updates the loop as the visitor types or ticks a box, without a page reload.
Choose a Relation:
And narrows results with every filter you add.
Or widens them.
Pro tip: Filtered results are stored in the page URL, so a filtered view can be bookmarked and shared. If you also place a Pagination module targeting the same loop, it stays in sync with the active filters and resets to page one whenever the filters change.
⚠️ Note: You can point more than one Post Filter module at the same loop, and they will stay in sync. Filters on one loop never affect another loop on the same page.
Add, edit, and delete Post Filter Items
Every control in the form - each search box, checkbox list, dropdown, and button - is a Post Filter Item child module. You manage them from the Content tab of the parent Post Filter module.
Open the Post Filter module: Click the Post Filter module on your page, or click the Gear icon to open its settings.
Edit an item: Click the Pencil icon next to the Post Filter Item you want to change.
Add a new item: In the Content tab, click Add New Post Filter Item.
Duplicate an item: Click the Duplicate icon next to it. This copies its settings and styling.
Delete an item: Click the Trash icon next to it.
Drag the handle on the left edge of each item to reorder the controls in the form.
⚠️ Note: Every form needs a Submit item unless Apply Mode is set to Auto. A Reset item is optional but recommended - it clears the filters for this loop only and leaves the rest of the page's query untouched.
Post Filter Item settings
Open a Post Filter Item, and you get its own Content, Design, and Advanced tabs. The Content tab holds a single Field group, and what appears inside it changes based on the field type you pick and what kind of loop the parent module targets.
Field Type
Field Type is the first choice you make, and it drives everything else. The available types are grouped in the dropdown:
Text - A single input. Use Field Value Type to switch it between a keyword search box, a number input, or a date, date-time, or time picker.
Select and Radio. A dropdown or a radio list where the visitor picks one value.
Checkbox. A checkbox list where the visitor can pick several values at once.
WooCommerce - Price Range, Stock Status, and Review Rating. Only available when the target loop is a WooCommerce product loop.
Sort options:
Order By, Order, and Multiple Order. Let visitors change how the loop is sorted.
Multiple Order gives them up to five stacked sort rules.
Button:
Submit
Reset.
Which types appear depends on the loop your parent module targets.
A post type loop offers all of them. A taxonomy, user, or menu loop only offers Text, Order By, Order, Submit, and Reset, because those loops cannot be narrowed by term lists or sorted on several fields at once.
The WooCommerce types only appear on a product loop with WooCommerce active.
⚠️ Note: If you change the parent module's Target Loop to something that doesn't support the field type you picked, Divi resets that item to Text so the form keeps working.
The rest of the Field group
The remaining settings appear only when they apply to the field type you chose:
Field Label - Sets the label shown above the control. For Submit and Reset items, this setting is named Button Text and becomes the button's label instead. Divi fills this in for you when you pick a field type or a field option, and you can overwrite it.
Field Value Type - How visitor input is collected and compared: Text, Number, Date, Date Time, or Time. Available for the Text, Select, Radio, and Checkbox field types.
Field Option - The data source the control filters, such as a taxonomy, the post author, or a custom field. Shown for Select, Radio, and Checkbox.
Field Value - The same setting under a different name, shown for the Text field type. It names what the keyword, number, or date is matched against - a search target, a post date, a term count, or a custom field.
Meta Key - Enter the custom field meta key to filter when Field Option or Field Value is set to a manual custom field.
Field Placeholder - Hint text inside the control. Shown for Text items using the Text or Number value type. Leave it empty, and the control falls back to the Field Label, then to Search. Date and time pickers don't show placeholder text, so the setting is hidden for them.
Field Comparison - How the visitor's input is compared to the stored value: equals, not equals, greater than, contains, and so on. The choices match the Compare options in the Loop builder's Meta Query. Shown for number, date, date-time, and time values, and for custom field Select and Radio items.
Label Date Format - A PHP date format string used to make date option labels readable, for example
M j, Y. Leave it empty to use the default labels. Only the labels change - the submitted values stay the same.Options Method - How the choices in a Select, Radio, or Checkbox list are filled when it targets a custom field. Automatic discovers the distinct values in your database at render time and caches them for a day. Manual lets you define the list yourself.
Clear Cached Options - Empties the cache so the next page load rediscovers the values. Shown when Options Method is Automatic.
Generate Options - Fetches the distinct values from the database and fills the Options list below. Shown when Options Method is Manual.
Options - The sortable list of choices for a manual Select, Radio, or Checkbox. Each row has a Value, which is submitted with the filter, and a Label, which is what the visitor sees.
Order By Options - Tick which sort choices visitors can pick from. Shown for Order By and Multiple Order items. When you first switch an item to one of those types, Divi ticks the core post options for you and leaves the custom field groups unticked.
Pro tip: Automatic option discovery warns you when a custom field has a lot of unique values or a lot of records behind it. If you see that warning, switch Options Method to Manual, click Generate Options, and trim the list down to the handful of values that actually matter.
Styling an individual item
Changing a Design setting on the parent Post Filter module styles every control in the form.
Each Post Filter Item also has its own Design tab with the same Layout, Field, Option, Checkbox, Radio Options, Multiple Order Button, Button, Sizing, Spacing, Border, Box Shadow, Filters, Transform, and Animation groups, plus the full Advanced tab.
Anything you set on the item wins over the same setting on the parent, so you can style the whole form once and then adjust a single control. To get back to the parent module's settings, click the arrow icon in the top-left corner of the modal.
Use the item's Sizing group to control how wide each control is. That's how the starter form puts Reset and Apply side by side on one row.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
