DEV Community

Prabhakar Jonnapally
Prabhakar Jonnapally

Posted on

How to Trigger a Bricks Builder Popup from an Archive Template (Step-by-Step Guide)

When building a Careers page in WordPress using Bricks Builder, I faced a common issue:

The “Apply Now” button inside an Archive (Query Loop) was not triggering a Popup template — even though everything looked correct.

After debugging and testing multiple configurations, I found the exact steps required to make it work properly.

In this article, I’ll walk you through the complete solution.

Scenario

Custom Post Type: Jobs

Archive Template: Displays job listings

Popup Template: Shows job details + application form

Goal: Open popup when clicking Apply Now button inside the loop

The Problem

Even after:

Creating a Popup template

Setting interaction to "Open Popup"

Clearing cache

The popup would not open.

The issue was caused by one of the following:

Missing popup conditions

Button still having a link

prevent Default not enabled

Interaction misconfiguration inside Query Loop

Let’s fix it properly.

Step 1: Create a Proper Popup Template

Go to:

Dashboard → Bricks → Templates → Add New

Set:

Name: Job Popup

Type: Popup (Very important)

Click Create.

Step 2: Design Your Popup

Inside the popup template:

Add heading (Dynamic Post Title if needed)

Add job description

Add application form

Style it as needed

Save.

Step 3: Set Popup Conditions (Critical Step)

This is where most people make mistakes.

Inside the Popup template:

Click the Template Settings (📄 icon in top toolbar)

Go to Conditions

Add:

Include → Entire Website

Save.

If you skip this step, the popup will NOT load on frontend.

Step 4: Edit the Archive Template (NOT the Page)

Go to:

Bricks → Templates → Archive → Edit

Make sure your structure looks like this:

Archive Template
└── Query Loop (Post Type: Jobs)
└── Job Card
└── Apply Now Button

Select the Apply Now button.

Step 5: Remove Button Link (Very Important)

Go to:

Button → Content → Link

Set:

Link Type = None

If the button has:

Post URL ❌

Custom URL ❌

The popup will not trigger correctly.

Step 6: Configure Button Interaction Correctly

Go to:

Button → Interactions

Set:

Trigger:

Click

Target:

Popup

Action:

Open

Popup:

Job Popup

Step 7: Enable preventDefault (Most Overlooked Fix)

Inside the Interaction panel:

Enable:

Disable → preventDefault = ON

This prevents the button’s default behavior from overriding the popup trigger.

Without this, popup often won’t open inside Query Loops.

Step 8: Clear Cache & Test

Save Archive template

Save Popup template

Clear LiteSpeed cache (or any cache plugin)

Hard refresh (Ctrl + Shift + R)

Now click “Apply Now”.

Your popup should open successfully 🎉

Why This Happens in Query Loops

Buttons inside Query Loops sometimes:

Retain dynamic links

Override click events

Prevent JavaScript interaction execution

Enabling preventDefault ensures the popup interaction executes properly.

Bonus: Dynamic Job Content Inside Popup

If you want the popup to show the correct job content dynamically:

Inside Popup template:

Use Dynamic Data

Post Title

Post Content

Custom Fields

This allows one popup template to serve all job posts dynamically.

Final Working Structure
Popup Template
Type: Popup
Condition: Entire Website

Archive Template
Query Loop (Jobs)
Apply Now Button
Interaction → Open Popup
preventDefault = Enabled
Link = None

Conclusion

If your Bricks popup is not opening from an Archive template:

Check these 3 things first:

Popup Type = Popup

Condition = Entire Website

Button Link removed + preventDefault enabled

Once configured correctly, it works perfectly.

Top comments (0)