BugWP logo BugWP
Back to Community
Home / Community / Plugin → Wp shortcodes plugin — shortcodes ultimate

How to Trigger Popups and Lightboxes with Shortcodes Ultimate Buttons

13 threads Sep 16, 2025 Plugin → Wp shortcodes plugin — shortcodes ultimate

Content

Many WordPress users want to create interactive elements where a button click triggers a popup, lightbox, or other modal content. This is a common request for those using the 'WP Shortcodes Plugin — Shortcodes Ultimate', especially when integrating with page builders like Elementor. Based on community discussions, here are the most effective methods to achieve this.

The Core Challenge

The primary issue is that a standard button shortcode, [su_button url="#"]Click Me[/su_button], is designed to navigate to a URL. Users want to override this default link behavior and instead open a popup or lightbox when the button is clicked, without being redirected to a new page.

Common Solutions

1. Combining with the Lightbox Shortcode (Native Solution)

The most straightforward method is to nest the button shortcode inside the plugin's native lightbox shortcode. This approach uses the built-in functionality and requires no custom code.

Example Code:

[su_lightbox type="iframe" src="https://example.com"]
    [su_button]Open Popup[/su_button]
[/su_lightbox]

In this example, clicking the button will open a lightbox modal that displays the content from the specified URL. You can change the type attribute to "image" or "inline" depending on the content you want to display.

2. Using the 'onclick' Attribute for Custom JavaScript

For more advanced control or to integrate with third-party popup plugins (like Popup Builder), you can use the onclick attribute available in the button shortcode. This allows you to call custom JavaScript functions.

Example Code for a Generic Popup:

[su_button onclick="myCustomPopupFunction(); return false;"]]Click Me[/su_button]

The return false; part is crucial as it prevents the button from following its default URL link.

Example for Popup Builder Integration:
A community solution found for the Popup Builder plugin was to add a specific CSS class to the button.

[su_button class="sg-popup-id-3"]Click Me[/su_button]

In this case, sg-popup-id-3 corresponds to the ID of the popup you created in the Popup Builder plugin. You would add this class to the "Extra CSS Class" field in the button's shortcode attributes.

3. Using the 'rel' Attribute for Lightbox

Another native method is to use the rel="lightbox" attribute within the button shortcode itself. This can work for simple image or iframe lightboxes.

Example Code:

[su_button url="https://example.com/image.jpg" rel="lightbox"]View Image[/su_button]

Important Considerations and Limitations

  • Third-Party Popups: The success of methods using the onclick attribute often depends on how the other popup plugin is built. You may need to consult the documentation for your specific popup plugin to find the correct JavaScript function or CSS class to call.
  • No Countdown Timer Feature: As noted in one thread, there is no built-in feature to make a button click trigger a countdown timer before redirecting. This would require custom development.
  • Targeting Existing Buttons: If you need to modify thousands of existing buttons, a manual find-and-replace operation in your database or a custom script may be necessary, as the plugin does not have a bulk editing feature for this specific purpose.

By understanding these methods, you can effectively create engaging button-to-popup interactions on your WordPress site using Shortcodes Ultimate.

Related Support Threads Support