How to create targeted popups on WordPress

Choose one audience and one action before you build anything. Examples include visitors reading a particular category, first-time visitors, WooCommerce shoppers with items in their cart, or people arriving from a campaign link.

Write down the display rule, trigger, frequency limit and exclusions. For example: show a newsletter offer on blog posts after 45 seconds, once per visitor, but not to logged-in users or existing subscribers.

Use a modal for a short, important action such as an email signup or coupon. A slide-in or notification bar is less disruptive for reminders and content upgrades. Avoid showing several popups at once, especially on mobile.

Include a clear close button, a useful heading and a short explanation of what happens after the visitor submits the form. If you collect personal data, add the privacy information required for your audience and email service.

A basic popup can be built without a plugin. Add the popup markup through a child theme template or a site-specific plugin, hide it with CSS, and use JavaScript to open and close it after a page-load, time, click or scroll event. WordPress recommends enqueueing JavaScript rather than inserting scripts directly into page content.

For page targeting, render the markup only where it is needed by using WordPress conditional tags such as is_page(), is_single() or is_singular(). Do not evaluate those conditions too early in a file that loads before the main query; WordPress documents that timing as a common error.

Connect the audience rule to the trigger. A simple implementation can check the current page on the server and use a cookie or browser storage value to avoid showing the popup again after dismissal or submission. Add a date check if the campaign must start or end at a particular time.

Exit intent is mainly a desktop interaction and is unreliable on touch devices. Use a delay or scroll-depth trigger for mobile instead. Also test logged-in users, cached pages, private browsing and visitors who arrive through campaign links, because caching can serve the same popup markup to the wrong audience.

Give the popup a meaningful title, a labelled close button and dialog semantics. When it opens, move focus into it; when it closes, return focus to the element that opened it. Support the Escape key and keep keyboard focus inside a true modal without creating a keyboard trap. These are part of the expected accessible dialog behaviour described by W3C guidance.

Check the popup with a keyboard and screen reader, then check it at narrow widths. A frequent Friday-afternoon failure is a close control that works with a mouse but cannot be reached or activated from the keyboard.

Test every targeting combination in an incognito window: included pages, excluded pages, desktop, mobile, returning visitors, logged-in users and visitors who have already submitted the form. Confirm that the form sends the expected confirmation and that the popup does not reappear immediately after submission.

Check the browser console if the trigger fails or the close button does nothing. WordPress notes that browser developer tools are useful for diagnosing JavaScript errors, which can stop other interactive features on the page as well.

For campaigns that need page targeting, behaviour triggers, schedules, animations, responsive layouts and email integrations, use JetPopup For Elementor instead of maintaining the markup, CSS and JavaScript yourself. Create the popup in Elementor, choose its display conditions, set the trigger and frequency rules, connect the form and preview it on desktop and mobile.

This route is usually the practical choice when marketing staff need to change offers without editing theme files. Keep the manual route for one small, stable notice where adding a plugin would create more administration than value.