How to open PDF in a lightbox in WordPress

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:

Open PDF in a Lightbox Popup

This tutorial will show you how to enable the lightbox by using WordPress classic editor or HTML code. For how to enable the lightbox popup in a WordPress page builder, for example, WordPress Block (Gutenberg) editor, Elementor, WPBakery, SiteOrigin, Divi, Beaver Builder and Brizy Builder, please view Wonder Lightbox Help Document. You only need to change the lightbox URL in the tutorial to the PDF URL.

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.

WordPress Lightbox Plugin

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.

PDF media 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.

classic editor visual link

In Text mode, click the link button to insert a link.

classic editor text 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-width, data-height to specify the size of the lightbox popup.

wordpress open pdf in lightbox

If you are using a WordPress page builder, for example, WordPress Block (Gutenberg) editor, Elementor, WPBakery, SiteOrigin, Divi, Beaver Builder or Brizy Builder, please view Wonder Lightbox Help Document. You only need to change the lightbox URL in the tutorial to the PDF file URL.

The demo created with this tutorial is as follows: Open PDF in a Lightbox Popup.

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>