---
title: "How to show WordPress Popup on link Click of other Element using selector?"
url: https://nexterwp.com/docs/popup-on-other-element-click/
date: 2023-02-06
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "The button you want people to click is usually the one already in your design, not one the popup block adds. Give the block a CSS selector and any matching..."
image: https://nexterwp.com/wp-content/uploads/2024/05/popup-on-other-element-click-1024x519.jpg
word_count: 426
---

# How to show WordPress Popup on link Click of other Element using selector?

## Key Takeaways

- Nexter Blocks Popup Builder block lets a custom trigger element outside the popup open it by using CSS classes.
- Image block becomes a popup toggle when its Advanced > Additional CSS class(es) matches the Popup Builder block’s Display Conditions > On Any Other Element's Click Element's Class field.
- Popup Load Settings tab sets Type to Hidden when there are no popup trigger elements on the page.

The button you want people to click is usually the one already in your design, not one the popup block adds.

Give the block a CSS selector and any matching element on the page becomes the popup's trigger.

*For every Popup Builder setting in one place, see the [Popup Builder block guide](https://nexterwp.com/docs/add-popup-builder-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-popup-builder/)

## Before You Start

- **Edition:** **Pro** — the Popup Builder block is part of Nexter Blocks Pro.- **Block to enable:** Popup Builder, switched on under **Nexter > Blocks** in your WordPress dashboard.- **The popup's content decided:** a short message, a form, or a saved pattern to load into it.

## Learn via Video Tutorial

https://youtu.be/cUqsOejgx3w?t=1274

## Steps

- Add the **Popup Builder** block to your page and click **Design from Scratch**.

- In the **Content** panel, choose a **Type** and set the popup's size.

![The Content panel with the Type setting](https://nexterwp.com/wp-content/uploads/2026/09/popup-builder-type.webp)

- Set **Content Type** and add what the popup should show.

![The Content Type setting with Pattern, Content, Editor and Shortcode](https://nexterwp.com/wp-content/uploads/2026/09/popup-builder-content-type.webp)

- Open **Display Conditions** and switch **On Any Other Element's Click** on.

![The Display Conditions panel with On Any Other Element](https://nexterwp.com/wp-content/uploads/2026/09/popup-builder-other-click.webp)

- Give the element you want to use a class or ID of your own, for example **my-trigger**, in its **Advanced** settings.

- Enter that selector in the field, written as CSS — **.my-trigger** for a class or **#my-trigger** for an ID.

- Publish the page and test it on the front end.

> *A popup can have more than one display condition switched on at once. Leave **On Button Click** on only if you also want the button to open it.*

## How It Behaves

- The selector is passed through to the page exactly as you typed it.- Any element matching it becomes a trigger, so one selector can serve several buttons at once.- The element can be anywhere on the page — it does not have to be near the Popup Builder block.- Switch **On Button Click** off if you do not want the block's own button as well.

## Limitations

- **Pro only.**- It has to be a valid CSS selector. Typing a bare class name without the leading dot will not match anything.- The element must already be on the page when it loads; something added later by another script will not be picked up.- A selector that matches more than you expect turns unrelated clicks into popup triggers.

## Troubleshooting

### Clicking my button does nothing

Check the selector includes its dot or hash, and that the class really is on the element — inspect the published page to confirm.

### The popup opens from the wrong things

The selector is matching more elements than intended. Make it more specific, such as **#pricing .my-trigger**.

## Related Docs

- [Open a popup on button click](https://nexterwp.com/docs/open-popup-on-button-click/)- [Popup Builder block: all settings](https://nexterwp.com/docs/add-popup-builder-in-wordpress/)- [Show a popup to visitors from a specific URL](https://nexterwp.com/docs/show-popup-arriving-from-specific-url/)