Quick start

Overview

Create a simple filter for WordPress posts that lets visitors search by text and refine by category. Choose one of two methods to display results: Archive Loop or Divi Loop Builder.

Jump to a method

Prerequisites

• Divi Ajax Filter installed, activated, and licensed.
• Divi Theme or Divi Builder 5.0.0-public-beta or newer.
• Published WordPress posts with categories and featured images.
• Basic familiarity with the Divi 5 Visual Builder interface.

---

Method 1: Archive Loop

Use the Archive Loop module to render the filtered list of posts.

Step 1: Add a results area with Archive Loop

1. Create or open a page in the Divi 5 Visual Builder with a 2-column row.
2. Insert the Archive Loop module where you want results to appear.
3. Configure it to show Posts.
   • Set items per page, order, and order by as needed.

Step 2: Add the Filter Posts module

1. In the left column, add the Filter Posts module.
2. Open its settings.
3. Set the Filter Post Type to Post.
4. Set the Filter Update Method to your preferance:
   • On button click
   • On change (instant Ajax update)

Step 3: Add text and category filters

1. In Filter Posts, add two filter items:

Search: provides a free-text search across post content.

Category: displays a list of categories based on post type Categories.

2. Leave other options at defaults for now.
3. Save the module.

Step 4: Test the page

1. Save the layout and view the page on the front end.
2. Type a keyword into Search and select one or more Categories.
3. Confirm that results update without a page reload and that pagination (if enabled) remains in sync.

Tip: If no posts match, check your category selections or try a broader search term.

Back to top

---

Method 2: Divi Loop Builder

Use a custom Loop Builder layout to render the filtered list of posts. This method requires a little more work to get started as you need to build the Loop Layout yourself.

Step 1: Add a Loop Builder layout for results

1. Open your target page in the Divi 5 Visual Builder.
2. Add a new Container (Row or Section) that will hold the loop content.
3. Select the parent container and open its settings.
4. In the Content tab, expand the Loop accordion.
5. Toggle Loop Element to On.
6. Choose the Post Type you want to display, such as Posts

Step 2: Design the loop item layout

1. Inside the parent container, add child modules to represent a single item in the loop.
   • Example: Image, Heading, and Text modules for a post card layout.
2. Assign Dynamic Content to each module:
   • Image → Featured Image
   • Heading → Post Title
   • Text → Post meta, Excerpt, etc
3. Adjust design and spacing to style the repeating item layout.

Step 3: Add the Filter Posts module

Now that you have a grid displaying your Posts it is time to add the Filter module using the same steps as you would use in the Archive Loop method.

1. In the left column, add the Filter Posts module.
2. Open its settings.
3. Set the Filter Post Type to Post.
4. Set the Filter Update Method to your preferance:
   • On button click
   • On change (instant Ajax update)

Step 4: Add text and category filters

1. In Filter Posts, add two filter items:

Search: provides a free-text search across post content.

Category: displays a list of categories based on post type Categories.

2. Leave other options at defaults for now.
3. Save the module.

Step 5: Test the page

1. Save the layout and view the page on the front end.
2. Type a keyword into Search and select one or more Categories.
3. Confirm that results update without a page reload and that pagination (if enabled) remains in sync.

Tip: If no posts match, check your category selections or try a broader search term.

Back to top

---

What’s next

• Learn empty filter options for handling no-result states.
• Review URL sync to share filtered views.
• Explore the filter items reference for all options and operators.