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

Source: Dev.to

When building a Careers page in WordPress with Bricks Builder, the “Apply Now” button inside an Archive (Query Loop) may not trigger a Popup template even though everything appears correct. Below is a step‑by‑step guide to resolve the issue.

Step 1: Create a Proper Popup Template

1. Dashboard → Bricks → Templates → Add New
2. Set:
   • Name: Job Popup
   • Type: Popup (very important)
3. Click Create.

Step 2: Design Your Popup

Inside the newly created popup template:

• Add a heading (e.g., Dynamic Post Title)
• Add the job description
• Add an application form
• Style as needed
• Save.

Step 3: Set Popup Conditions (Critical)

1. Click the Template Settings (📄 icon in the top toolbar).
2. Go to Conditions → Add → Include → Entire Website.
3. Save.

Skipping this step prevents the popup from loading on the frontend.

Step 4: Edit the Archive Template (Not a Page)

1. Bricks → Templates → Archive → Edit.
2. Ensure the structure includes the “Apply Now” button within the loop.

Step 5: Remove the Button Link (Very Important)

1. Select the button → Button → Content → Link.
2. Set Link Type = None.
   • Ensure Post URL and Custom URL are both unset.

Step 6: Configure Button Interaction

1. With the button selected, go to Button → Interactions.
2. Set:
   • Trigger: Click
   • Target: Popup
   • Action: Open
   • Popup: Job Popup

Step 7: Enable preventDefault (Most Overlooked Fix)

In the Interaction panel, toggle Disable → preventDefault = ON.
This stops the button’s default behavior from overriding the popup trigger, which is essential inside Query Loops.

Step 8: Clear Cache & Test

1. Save the Archive template and the Popup template.
2. Clear any caching (e.g., LiteSpeed or other cache plugins).
3. Perform a hard refresh (Ctrl + Shift + R).
4. Click “Apply Now”.

Your popup should now open successfully 🎉.

Why This Happens in Query Loops

Buttons inside Query Loops can:

• Retain dynamic links
• Override click events
• Prevent JavaScript interaction execution

Enabling preventDefault ensures the popup interaction runs correctly.

Bonus: Dynamic Job Content Inside the Popup

To display the correct job details for each listing:

• Use Dynamic Data within the Popup template (e.g., Post Title, Post Content, Custom Fields).
• This allows a single popup template to serve all job posts dynamically.

Final Working Structure Checklist

If the Bricks popup isn’t opening from an Archive template, verify these three items:

1. Popup Type = Popup
2. Condition = Entire Website
3. Button: Link removed and preventDefault enabled

Once configured correctly, the popup works perfectly.