WP Thinker

The WordPress Playground

How to Embed PDF in WordPress

Embed PDF in WordPress

Want to insert PDF files into WordPress pages and posts? Unfortunately, the CMS (Content Management System), does not allow this functionality by default. You can upload and link to PDF in WordPress but have no way of displaying even a preview of the PDF in question. This is a bit surprising since you can embed audio and video files. We suspect it has to do with performance, content monitoring difficulty, and the risk of incorrect integration. Luckily, if you desperately need to displaying PDFs, there are a few solutions. Here’s how to embed PDF in WordPress.

1. Use a screenshot of a PDF (Workaround)

Is your goal is to show a preview of the PDF to tease the visitors into opening or downloading the actual file? If so, this is the perfect solution that will preserve precious resources. Simply open the PDF file, take a screenshot, cut it down to the desired size, and upload the picture. Then, follow these steps to embed PDF in WordPress via an image link:

1. Block Editor

Insert the Image Block into the post or page, and then:

  1. Select the uploaded image to insert it into text.
  2. Click on the image, then select the Link icon in the toolbar above (chain icon).
  3. Paste the URL to the PDF file into the text field.
  4. Recommended. Click on the down arrow (Link Settings) then toggle Open in new tab to on.
  5. Click on the Return icon.

2. Classic Editor

If you added the image already, click on it, and click on the Edit icon. If you haven’t, click on Add Media in the upper left corner and do so. Then, follow these instructions:

  1. Make sure the image is selected in the Media Library.
  2. Scroll down to the Attachment Display Settings section.
  3. Under Link To, select one of the two:
    1. Custom Link. Paste the link to the PDF file.
    2. Media File. Find the PDF file in the Media Library and select it.
  4. Confirm changes, then click on Edit again.
  5. Under Advanced Link Settings, tick the Open link in a new window box.

2. Embed PDF in WordPress via Google Docs Viewer

Okay, now we’re getting to the full-fledged PDF file integration in WordPress. Before we get into how embedding a PDF file into a page or post in WordPress works, you must know how to display their HTML code.

Switch from Visual to HTML view

Here’s how switching to HTML viewer works:

  • Classic Editor. Click on Text in the top right corner.
  • Gutenberg Editor. Add a new block, then click on the three-dot icon in the toolbar before choosing Edit as HTML from the drop-down list.

1. Use Google servers to display PDF

This method still requires you to upload the PDF file to your Media Library. But, you’ll use an iframe HTML tag to display it. First, switch to HTML view. Then, find a row where a PDF file should be before pasting the following code:

<iframe src="http://docs.google.com/viewer?url=<https://yoursite.com/.../your-pdf-file.pdf>&embedded=true" width=“800" height=“600” frameborder="0"></iframe>

Important. Add your PDF URL link under url=<…>. Also, change the width and height numbers based on your website design. You can also use percentages of the maximum width/height defined by CSS.

2. Upload file to Google Drive

If you decide to use Google Docs Viewer functionality, why waste your website resources? Go ahead and upload the PDF file to your Google Drive account – it’s free. Then, follow these instructions:

  1. Open the PDF file in Google Drive.
  2. Click on the 3-dot menu in the top right corner.
  3. Click on Open in a new window.
  4. Repeat step 2, then select Embed item… from the drop-down menu.
  5. Copy the displayed link.
  6. Change to HTML mode in WordPress, and paste the link to where the PDF file should be displayed.
  7. Optional. Change height and width in the code if needed.

3. Embedding PDF into WordPress via website builder

Are you using a website builder to customize and manage your website? If so, it makes sense to look through its functionality, while editing a post or page to see if such an option exists. For example, the Elementor website has an Embed PDF option by default. Other developers also offer free and paid add-ons for Elementor that allow displaying PDFs. This applies to other leading website builders, too.

4. Insert PDF in WordPress using a plugin

If you aren’t using a website builder, it doesn’t make to install one only to obtain this functionality. Instead, we suggest you install a WordPress plugin made for this purpose. Although there are hundreds of plugins available, and we’re affiliated with none, we believe PDF Embedder to be the most beginner-friendly. You can customize the height and width of each file separately, and visitors get Next/Previous buttons to turn pages. Moreover, the PDF files are served by your server (unlike method 2), so you can control their appearance and behavior.

PDF Embedder demonstration

If you decided to use a WordPress plugin we suggested, you can insert PDF to posts or pages via the PDF Embedder Block (Gutenberg Editor only). But by far the quickest way for both Editors is to place shortcodes anywhere in the text. Here’s how that looks:

[pdf-embedder url="https://yoursite.com/.../your-pdf-file.pdf"]

Tip. You can also add height=”…” and weight=”…” attributes like in method 2. Moreover, you can add a custom title like this:

[pdf-embedder url="https://yoursite.com/.../your-pdf-file.pdf" title="Name of a PDF File"]