---
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-04-15
author: "Aditya Sharma"
description: "When creating a popup with the Popup Builder block from the Nexter Blocks you get the popup trigger element options within the block.  While it is a great option but..."
image: https://nexterwp.com/wp-content/uploads/2024/05/popup-on-other-element-click-1024x519.jpg
word_count: 243
---

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

## Key Takeaways

- Nexter Blocks includes a Popup Builder block that allows users to create popups triggered by custom elements like images.
- Users can add a class name to the Image block and configure the Popup Builder block to open popups on clicks of that image.
- The Popup Load Settings tab requires users to set the Type to Hidden if there are no other popup trigger elements on the page.

When creating a popup with the Popup Builder block from the Nexter Blocks you get the popup trigger element options within the block. 

While it is a great option but at times you might want to have the trigger element outside the popup or you might want to use some custom elements like an image as the popup trigger element. You can absolutely do that with the Popup Builder block using CSS classes.

*To check the complete feature overview documentation of the Nexter Blocks* Popup Builder block, [click here](https://nexterwp.com/docs/add-popup-builder-in-wordpress/).

***Requirement  - This block is a part of the Nexter Blocks*, make sure its installed & activated to enjoy all its powers.**

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

Let’s say you want to use the WordPress Image block and when someone clicks on that a popup will open.

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

For this add both the Image block and the Popup Builder block on the page. Select the Image block and go to **Advanced** > **Additional CSS class(es)** and add a class name.

![](https://nexterwp.com/wp-content/uploads/2023/02/pop-up-builder-content-image-block-additional-css-class.png)

Now select the Popup Builder block and go to **Display Conditions **> **On Any Other Element's Click** and turn on the toggle. In the **Element's Class** field add the same class name.

![](https://nexterwp.com/wp-content/uploads/2023/02/pop-up-builder-content-display-condition-any-other-elements-click.png)

Now the image will act as the popup toggle button you can use it to open and close the popup.

> *Note: Make sure there are no popup trigger elements on the page, so set the ****Type**** to ****Hidden**** in the ****Popup Load Settings*** *tab.*

## Frequently Asked Questions

**Q: What should I do if the popup doesn't appear when clicking the image?**
A: If the popup doesn't show up, ensure that you've added the correct CSS class name to both the Image block and the Popup Builder block. This class name must match in the Element's Class field of the Popup Builder block. Additionally, check that there are no other popup trigger elements on the page, as this can interfere with the functionality. Setting the Type to Hidden in the Popup Load Settings tab can help avoid conflicts.

**Q: What are the best practices for using the Popup Builder block?**
A: When using the Popup Builder block, it's crucial to ensure that the trigger element is correctly set up. Use a unique CSS class for the trigger element and ensure that it matches in the Popup Builder settings. Additionally, avoid having multiple popup triggers on the same page to prevent conflicts. Setting the Type to Hidden in the Popup Load Settings tab is also recommended to streamline the user experience.

**Q: Does the Popup Builder block work with other Gutenberg blocks?**
A: The Popup Builder block is designed to work seamlessly with other Gutenberg blocks, allowing you to create versatile popup triggers. For example, you can use an Image block or any other block as a trigger by assigning a CSS class. This flexibility enables you to customize how popups are triggered on your WordPress site, enhancing user engagement.

**Q: What happens if I forget to set the CSS class for the trigger element?**
A: If you forget to set the CSS class for the trigger element, the popup will not function as intended. The Popup Builder block relies on this class to identify which element should trigger the popup. Without it, clicking the designated element will not open the popup, leading to a frustrating user experience.

**Q: Are there any limitations when using the Popup Builder block?**
A: One limitation of the Popup Builder block is that it cannot function as a standalone theme without Gutenberg. Additionally, if there are multiple popup triggers on the same page, it may lead to conflicts. It's essential to ensure that only one trigger is active at a time and that the Type is set to Hidden in the Popup Load Settings tab to avoid issues.