How To Display a PDF

There are two ways to display a PDF document. You can simply link to it and let the browser do all the work, or you can embed it in a page so it is part of your website.

Regardless of how you display the PDF, step one is to upload it into your Media Library (Media→Add Media File). It will automatically go in the Documents section of your Media Library.

Once uploaded, click on it in the Media Library. Note the File URL, with a handy button to copy the URL to the clipboard. So, when you need the URL, this is how to get it.

Display in Browser
Now that you have the URL, you can create a link or button as you would for any other web thingy that has a URL. Nothing new to learn. When the link or button is clicked, the browser displays the PDF. You can scroll it, download it, print it. Quick and easy. But it stands alone and does not look like part of your website. On the other hand, you do not have to set up a page for it. This is my preferred method unless I have a PDF I want to feature on its own page.

Display in Page

This is called embedding. You do it with a plugin. Here is an example:

Depending on the plugin you use, you get more handy features than using the browser's bare-bones interface, like jumping to a specific page.

I have tried several PDF plugins. They can be slow to load and even buggy. The one I have settled on is the free version of PDF Poster. It loads fast and everything works as expected on computers and smartphones. Your page can simply consist of one shortcode that looks like this:

[pdf_embed url="https://example.com/whatever.pdf"]

but I like to add download and print buttons:

[pdf_embed url="https://example.com/whatever.pdf" download_btn="true" print="true"]

Whether you display it in the browser or in a page, that's all there is to displaying a PDF.

My Use Case

Our club has a monthly newsletter. We want to feature it on our website for our members. We also want to maintain an archive of all our newsletters and be able to easily access them, although the need to access back issues is infrequent.

So, we have a Read the Latest Newsletter button in the sidebar (make finding frequently used functions obvious) that displays, yes, the latest newsletter on its own page. Once a month, I upload the new newsletter and update the URL in the shortcode.

At the top of the Latest Newsletter page is a link to the Newsletter Archive page (make finding infrequently used functions discoverable). It looks like this:

This just a WordPress table. Each of those "open" links has the URL of that month's newsletter. Once a month, I add one. Once a year, I add a row.

PDF Poster Shortcode Documentation

You probably don't need the full shortcode documentation. But if you do, you have to really dig around to find. Instead of subjecting you to that annoyance, here it is:

[pdf_embed url=”https://example.com/document.pdf” width=”100%” height=”842px” print=”true” title=”My PDF Document” download_btn=”true” fullscreen_btn_text=”View in Fullscreen”]

Attributes

• url (required): The URL of the PDF file.

  • Default: null
  • Example: url="https://example.com/document.pdf"

• width (optional): Width of the PDF viewer.

  • Default: "100%"
  • Example: width="80%"

• height (optional): Height of the PDF viewer.

  • Default: "842px"
  • Example: height="600px"

• print (optional): Display a print button.

  • Accepted values: "true", "false"
  • Default: "false"
  • Example: print="true"

• title (optional): Title displayed above the PDF viewer.

  • Default: null
  • Example: title="Document Title"

• download_btn (optional): Display a download button.

  • Accepted values: "true", "false"
  • Default: "false"
  • Example: download_btn="true"

• fullscreen_btn_text (optional): Text for the fullscreen button.

  • Default: "View Fullscreen"
  • Example: fullscreen_btn_text="Open Fullscreen"