I recently got a question from Phin Hall from PhinHall.net asking me how to create a lightbox popup on click of a link or a button on his WordPress website so people can download his Free E-book. Besides that Phin requested to make the process easy so he could do it himself in the future and he asked to make a short tutorial video for it. So I thought this was a great opportunity to create my next WordPress How To Video Blog or Vlog post.Of course there are a lot of ways to add an onclick lighbox popup to a WordPress website and this is the way I thought was very simple for people to do.

Check out the video:

In this tutorial I won’t be going into installing Layered Popups as I assume you already know how to install a WordPress plugin. So I will get right to the point.

Step One: Get the OnClick code to add to the button

In your dashboard click on the Layered Popups link in the left menu. Now you see a list of all the template popups. For this tutorial we already created a custom popup by duplicating one that looked like we wanted. Next to the Title you see the ID. Copy the ID of your popup and paste it in a text file.

01-CopyPopupId

The next action is to click on Layered Popups -> FAQ

On this page copy only the code inside the quotation marks: return ulp_open(‘OBJECT_ID’);

02-CopyOnClickCode

Paste the code in the text file and replace OBJECT_ID with the ID you from your of your popup. In this case the code we are going to use becomes: return ulp_open(‘DQyNRskF6aJn66t4‘);

Please don’t use this code with this ID because your popup will have his own unique ID.

Step Two. Add the button to the widget, page or post

Now in this tutorial we use a widget to add the button to the homepage, but of course you can add a button to a page or post as well.

When we go to Widgets from the left menu and open the widget where we are going to add the button to Shortcodes Ultimate adds a button called Insert Shortcode. If you don’t already have a Visual Editor Widget, in this case we used the free plugin Black Studio TinyMCE Widget.

Click on Insert Shortcode and then click Button. Change the settings of the button as you prefer and copy the code from the text file to the OnClick field and hit the Insert Shortcode button.

03-PasteOnClickCode

Save the Widget and check your homepage to see the results and your done.

I hope this WordPress guide was useful and you got an idea about how to add a lighbox popup on click of a button or link to your website. Please share this post or leave a comment if you have questions or perhaps another easy way to do this.  One note! I know Shortcodes Ultimate has a shortcode to add a lightbox popup button but because I was asked to make it as simple as possible I went looking for a plugin that also made it easy to create a lightbox form as the ShortCode Ultimate function requires knowledge to create a form etc.

 

Plugins used in this tutorial

The first one is a plugin called ShortCodes Ultimate, an amazing free plugin that I use often to add a variety of great features to WordPress websites and for a few bugs you can even Extend Shortcodes Ultimate with wide set of new shortcodes.

The second plugin I used is called Layered Popups (affiliate link), a premium popup that I have used before and found on CodeCanyon. This WordPress plugin makes adding a Layered Lighbox popup to your WordPress website a breeze because the creators already added a lot of sample popups that you can easily edit to make it your own so you don’t have to create a form from scratch.

The third plugin is called Black Studio TinyMCE Widget. A free plugin that adds a Visual Editor Widget to your Widget area.