This tutorial will guide you how to open a PDF file in a lightbox popup in your WordPress website. There are 4 steps in this tutorial:
- Step 1 - Install Wonder Lightbox
- Step 2 - Upload PDF file to your WordPress and Copy the URL
- Step 3 - Create a text or image link to your PDF file
- Step 4 - Activate the lightbox on the PDF link
A demo created with this tutorial is as follows:
Step 1 - Install Wonder Lightbox
In the first step please install the plugin Wonder Lightbox. 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 - Upload PDF file to your WordPress and Copy the URL
To open the PDF file in the lightbox, the PDF file must be uploaded and hosted on the same WordPress.
In your WordPress dashboard, goto left menu Media -> Add New, click the Select Files button, select your PDF file and upload it.
After you have uploaded the file, click the Edit link, then copy the File URL.
Step 3 - Create a text or image link to your PDF file
In WordPress classic editor, in Visual mode, click the Insert/Edit link button to insert a link to the copied PDF file URL.
In Text mode, click the link button to insert a link.
Step 4 - Activate the lightbox on the PDF link
After you have added the link, switch the classic editor the Text mode, then add
class="wplightbox" to the <a> tag. You can also add data tag
data-height to specify the size of the lightbox popup.
The demo created with this tutorial is as follows:
The code of the online example is as follows:
<a class="wplightbox" data-width=1200 data-height=1200 href="https://www.wonderplugin.com/wp-content/uploads/2017/02/how-to-create-a-wordpress-post-carousel.pdf">Open PDF in a lightbox popup</a>