The Post Filter Module in Divi 5

Overview

For detailed information, see the official Elegant Themes documentation.

Settings & Options

General

Setting	Type	Description
Green Plus		reen Plusiconto insert aRow.
Gray Plus		Gray Plusiconinside the Row, which will show the list of all available Divi modules.
Post Filter module		r moduleand click on it to load it. Alternatively, you can use the Search option to find it.
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 anOrder Bydropdown so they can re-sort a loop without reloading the whole page.
Content
Design
Advanced

Content Tab

Setting	Type	Description
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 thePagination module, the Post Filter module cannot target the main query - until you select a loop, the module shows aSelect a Loopmessage 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.Autoupdates 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.Orrequires at least one filter to match.
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 thePagination module, the Post Filter module cannot target the main query - until you select a loop, the module shows aSelect a Loopmessage 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.Autoupdates 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.Orrequires at least one filter to match.
And		(the default) requires every filter to match.
Or		requires at least one filter to match.
Elements		Add, edit, duplicate, reorder, and delete thePost Filter Itemsthat 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 fromTarget 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.

Design Tab

Setting	Type	Description
Layout		Choose the Layout Style. It allows you to change how the child modules are being displayed.BlockFlex(default)Grid
Block
Flex		(default)
Grid
Field		Choose the styling for the form's text inputs, number inputs, and dropdowns, plus theLabel Texttypography for the labels above them.
Option		Choose the styling for individual checkbox and radio option rows.BackgroundBorderBox ShadowSizingSpacing
Background
Border
Box Shadow
Sizing
Spacing
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 aMultiple Ordercontrol.
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.

Advanced Tab

Setting	Type	Description
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.
Loop		d the content you want to filter and turn on theLoopoption group on that Section, Row, Column, or module.
Content		e Post Filter module'sContenttab and open theTargetgroup.
Target Loop		oop from theTarget Loopdropdown. Loops are listed by their module label, so give your looped element a clear label in itsMetagroup first.
Apply Mode		pply Mode.Submitwaits for a button click and reloads the page with the filters in the URL.Autoupdates the loop as the visitor types or ticks a box, without a page reload.
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.
Relation		Relation:Andnarrows results with every filter you add.Orwidens them.
And		narrows results with every filter you add.
Or		widens them.
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 thePencil iconnext to the Post Filter Item you want to change.
Add a new item		In theContenttab, clickAdd New Post Filter Item.
Duplicate an item		Click theDuplicate iconnext to it. This copies its settings and styling.
Delete an item		Click theTrash iconnext to it.
Text		A single input. UseField Value Typeto switch it between a keyword search box, a number input, or a date, date-time, or time picker.
Select		andRadio. 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, andReview Rating. Only available when the target loop is a WooCommerce product loop.
Sort options		Order By,Order, andMultiple Order. Let visitors change how the loop is sorted.Multiple Ordergives them up to five stacked sort rules.
Order By		,Order, andMultiple Order. Let visitors change how the loop is sorted.
Multiple Order		gives them up to five stacked sort rules.
Button		SubmitReset.
Submit
Reset		.
Field Label		Sets the label shown above the control. ForSubmitandResetitems, this setting is namedButton Textand 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, orTime. Available for theText,Select,Radio, andCheckboxfield types.
Field Option		The data source the control filters, such as a taxonomy, the post author, or a custom field. Shown forSelect,Radio, andCheckbox.
Field Value		The same setting under a different name, shown for theTextfield 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 whenField OptionorField Valueis set to a manual custom field.
Field Placeholder		Hint text inside the control. Shown forTextitems using theTextorNumbervalue type. Leave it empty, and the control falls back to theField Label, then toSearch. 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 theCompareoptions in the Loop builder's Meta Query. Shown for number, date, date-time, and time values, and for custom fieldSelectandRadioitems.
Label Date Format		A PHP date format string used to make date option labels readable, for exampleM 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 aSelect,Radio, orCheckboxlist are filled when it targets a custom field.Automaticdiscovers the distinct values in your database at render time and caches them for a day.Manuallets you define the list yourself.
Clear Cached Options		Empties the cache so the next page load rediscovers the values. Shown whenOptions MethodisAutomatic.
Generate Options		Fetches the distinct values from the database and fills theOptionslist below. Shown whenOptions MethodisManual.
Options		The sortable list of choices for a manualSelect,Radio, orCheckbox. Each row has aValue, which is submitted with the filter, and aLabel, which is what the visitor sees.
Order By Options		Tick which sort choices visitors can pick from. Shown forOrder ByandMultiple Orderitems. 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.
Save		k on theSavebutton.
Exit		k on theExitbutton.

Code Examples

Common Patterns

Troubleshooting

AI Interaction Notes

Task	Confidence	Notes
Basic placement	🔬 Needs Testing	Untested — stub page
Settings configuration	🔬 Needs Testing	Untested — stub page
Custom styling	🔬 Needs Testing	Untested — stub page

Related