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.
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’);
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‘);
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.
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.