How to Trigger a WordPress Popup on a Button Click Using CSS Selectors

When people think about popups, they usually picture something that fires automatically. Like, the moment a page loads, after a 10-second delay, or when someone’s mouse drifts toward the browser tab. Those triggers have their place, but they put you in control of when the popup appears, not your visitor.

Click-triggered popups flip that dynamic. Instead of the popup interrupting whatever the user was doing, it responds to something they deliberately chose to do. That’s a fundamentally different kind of interaction, and it converts better because of it.

In this blog, you’ll learn how to show popups on custom button clicks using PopupKit, with no prior technical knowledge required. If you can add a button to a WordPress page, you can pull this off.

Why Show a Popup on a Button Click?

Switching from automatic triggers to click-based triggers changes the user experience from interruptive to interactive. When a popup fires automatically, it can catch someone mid-read, mid-scroll, or mid-thought. Even if the offer is good, the timing feels random.

A click-triggered popup is different. It appears because someone specifically asked for it by clicking a button labeled “See Pricing Plans” or “Unlock Your Discount.” That single click is a signal of intent. Visitors who trigger a popup on purpose have already demonstrated that they’re interested in what’s behind that button, which makes them far more likely to engage with whatever’s inside. Whether that’s a contact form, a size guide, a bonus download, or a special offer, the lead quality is higher because the context is self-selected.

There’s also a design benefit worth mentioning. Click-triggered popups let you keep your landing pages clean. Instead of cramming secondary information or long forms directly onto the page, you tuck them behind a sleek button. The page stays focused and uncluttered, while the detailed content is available on demand.

How to Show a Popup on Click Using PopupKit’s Custom Selector Feature

PopupKit‘s Custom Selector Click feature makes this entire setup straightforward. It works by connecting a CSS class name. It’s basically just a label you create between your site’s pop-up settings and a button. When a visitor clicks the button carrying that class, PopupKit listens for it and launches the campaign.

Here’s how to set it up, start to finish.

Step 1: Configure the Trigger Event in PopupKit

The first thing you need to do is tell PopupKit to stop listening for standard automatic triggers and start watching for a specific click instead.

Open your PopupKit campaign editor for the popup you want to use. Navigate to the Display Options tab in the left-hand sidebar and find the Open Event dropdown. From the list of available triggers, select Custom Selector Click.

As soon as you do, a new field called Selector Class will appear directly below it. This is where you type a unique name for your trigger class, something like subscribe-trigger or open-promo works fine. The name itself doesn’t matter much as long as it’s unique and descriptive enough that you’ll recognize it later.

One important thing to note: when you enter the class name in this field, don’t include a period (.) before it. Just type the plain name with hyphens or underscores if needed. The period notation is CSS syntax for your stylesheet, not what PopupKit expects here.

Step 2: Define Where the Popup Can Load

Even though the popup is triggered by a click rather than a page event, PopupKit still needs to know which pages it’s allowed to load its scripts on. This is configured through the Display Conditions tab.

Switch to the Display Conditions tab inside the editor and click the + Add Condition button. Under the Include section, you’ll choose the scope of where the trigger button lives on your site. If the button appears in your header or footer and therefore shows up on every page, select Entire Site. If the button only exists on one specific landing page or post, select Singular and pick that exact page from the dropdown.

After setting the condition, make sure the Activate Campaign toggle is switched on, then save your settings.

Step 3: Add the CSS Class to Your Button

This is where you create the actual bridge between your popup settings and the element on your page. You’re going to take the exact class name you typed into PopupKit and paste it onto the button you want visitors to click.

If you’re using the Gutenberg block editor, open the page or post where the button lives and click on the Button block you want to use as the trigger. In the right-hand settings panel, scroll down and expand the Advanced tab. You’ll see a field labeled Additional CSS Class(es). And, paste your class name here exactly as you entered it in Step 1. Save or publish the page.

If you’re using Elementor or another page builder, the process is the same in principle. Select the widget or element you want to use, go to its Advanced tab, find the CSS Classes field, and enter your class name there.

That’s it. The class name is now on both the PopupKit campaign and the button on your page. When a visitor clicks that button, PopupKit sees the matching class and fires the popup.

Step 4: Verify and Test the Trigger

Before you call it done, test it properly. Open a new incognito or private browser window. This avoids any caching issues that might interfere with the result and visit the live URL of the page you just edited. Click the button you assigned the class to, and your popup should appear immediately.

If the popup doesn’t appear, the most common culprit is a simple typo. Check that the spelling of the class name in your page editor and the Selector Class field in PopupKit are exactly the same, character for character. Also, confirm that your display conditions are set to include the page you’re testing on. If the campaign is set to exclude that page, the script won’t load, and the trigger won’t fire, no matter what.

Also Read: How to Add Multi-Step Popups that Drive Higher Conversions

Best Practices for Click-Triggered Popups

Setting up the trigger correctly gets you halfway there. Getting people to actually click the button and then converting them once the popup opens depends on a few things worth paying attention to.

Be clear about what clicking will do. Don’t make visitors guess what’s behind the button. Labels like “See Pricing Plans,” “Get the Free Checklist,” or “Unlock Your Discount” tell people exactly what to expect. Vague labels like “Click Here” or “Learn More” reduce clicks because there’s no clear reward for the action.

Match the popup content to the button label. If the button says “Subscribe to Newsletter,” the popup should immediately show a newsletter subscription form, not an unrelated offer. Any mismatch between what the button promises and what the popup delivers breaks trust and tanks your conversion rate on that click.

Keep the popup content tight. The visitor clicked because they wanted something specific. Don’t make them read through paragraphs to find it. Keep forms short, copy concise, and the path to conversion obvious. The user already said yes by clicking. So, don’t give them a reason to change their mind.

Think about mobile users. Clicking a precise element is straightforward on a desktop, but on a phone screen, buttons need to be large enough to tap comfortably. Make sure your trigger buttons meet a minimum tap target size, and always check that the popup itself is fully responsive and easy to close on smaller screens.

FAQs

Wrapping Up

Giving visitors control over when a popup appears changes the entire dynamic of how it’s received. Instead of interrupting someone mid-browse, you’re responding to something they chose to do. That intent-first interaction is what makes click-triggered popups convert at a higher rate than their automatic counterparts.

PopupKit’s Custom Selector Click feature handles all of this without any complex code, just a class name in two places and a clean bridge between your button and your campaign. Set it up once, and every click on that button becomes a conversion opportunity.