Trigger popup on clicking a button in WordPress

Last updated on

This tutorial will guide you how to trigger a popup on clicking a button in WordPress. You can use the popup to display an email opt-in or newsletter subscription form, promote new products, deliver special offers or show videos to your visitors.

There are 4 steps in this tutorial:

  • Step 1 - Install WordPress plugin Wonder Popup
  • Step 2 - Create a popup
  • Step 3 - Enable the popup on pages or posts
  • Step 4 - Add HTML code to trigger the popup

A demo created with this tutorial is as follows:

Step 1 - Install WordPress plugin Wonder Popup

First please install the plugin Wonder Popup. You can download the Free Version from the product homepage, try it, make sure it works for you before upgrading to the commercial version.

For how to install a plugin from the downloaded plugin ZIP file, please view this tutorial: How to install a WordPress plugin from a ZIP file.

Step 2 - Create a popup

After you have installed the WordPress plugin Wonder Popup, in your WordPress backend, left menu, goto Wonder Popup -> Add New.

In the New Popup page, you can select from 4 types of forms:

  • Lightbox: Create a lightbox popup that displays in the center of the web browser
  • Embed: Embed the form into pages, posts or sidebar widgets
  • Slide In: Create a popup that slides in from corner
  • Notification Bar: Create a bar that displays on top or bottom of the web page

wordpress popup types

Step 3 - Enable the popup on pages or posts

In the popup editor, step 3 Display Rules -> Display Rules tab, make sure the popup is enabled on the page or post that you are going to add the button.

WordPress popup display rules

If you don't like the popup to show up automatically, in the popup editor, step 3 Display Rules -> Display Time, uncheck all options.

WordPress popup display time

Step 4 - Add HTML code to trigger the popup

In the page or post that you are going to add the button, switch to Text edit mode, add the following code to create a button that will tigger the popup on click. 

<a href="#" class="wppopup" data-popupid=1><button>Show Popup</button></a>

Please make sure to change value of data-popupid to the ID of your own popup.

Triggering lightbox gallery with a button

Last updated on

Product:

WonderPlugin Portfolio Grid Gallery

Question:

I'm wondering if there is a way to trigger a gallery with a button? In other words I just want to have a button on my page that says "View photos here" rather than displaying all the thumbnails. And when the button is clicked, the lightbox would come up with the first photo.
Continue reading →

Add specific posts to WordPress Carousel

Last updated on

Product:

WonderPlugin Carousel

Question:

I try to create a WordPress carousel of posts. How could i add some specific posts to the carousel?

Answer:

You could create a special category, assign these posts to it, then in the plugin, step 1, Add WordPress Posts dialog, select this category.

Or you could add a tag for these posts, then in the plugin, step 1, Add WordPress Posts dialog, enter the tag to the "Select posts by tags" input box.

You could view this tutorial for how to create a WordPress carousel by selecting categories and tags: https://www.wonderplugin.com/wordpress-carousel-plugin/wordpress-posts-carousel-by-tags//

How to track tab clicks with Google Analytics

Last updated on

Product:

WonderPlugin Tabs version 4.6 and above

Question:

For your WordPress tabs plugin, does it work with Google Analytics? Is there an way to allow me to find out "pageview" for each individual tab?

Answer:

In the plugin, step 3 Options tab -> "Tab Options", check the option "Enable Google Analytics", then enter your Google tracking ID to the following input box. Google Analytics tracking ID has a format like UA-XXXXXXXX-1.

The tab clicks will be logged as page views in your Google Analytics account, and it will add a URL parameter tabid=TABID to the current page URL. The TABID starts from 0.

For example, for the tabs on the page https://www.wonderplugin.com/wordpress-tabs/, one click of the second tab will be logged as one page view of /wordpress-tabs/?tabid=1 in Google Analytics, one click of the third tab will be logged as /wordpress-tabs/?tabid=2.