How to Embed a PDF in WordPress

How to Embed a PDF in WordPress

WordPress allows us to embed numerous types of content into our posts and pages, including audio and video files, tweets, content from Reddit, Amazon Kindle, and much more. But, one thing we cannot do in WordPress, at least not out of the box, is embed a PDF file.

PDF is one of the most popular file types and a universally accepted format. It’s used for various types of content, most notably for eBooks, travel brochures, restaurant menus, and course materials. So when you want to embed this content in a PDF format in your WordPress website, how do you do that?

Sure, you can embed PDF in WordPress by selecting the Add Media option in Classic Editor, or by adding the File block in Gutenberg and then uploading the file to it. But, in that case, users can only download the file or view it in a separate tab, away from your website. And that’s not what embedding is about. The goal is to keep the visitors on your page.

In this article, we’ll dive further into this subject and we’ll show you:

How to Embed a PDF to WordPress Using a Plugin

The fastest and easiest way to embed a PDF to a page or a post is by using a plugin. The one we’d recommend using is PDF Embedder.

PDF Embedder

It currently has over 200,000 active installs, an average rating of 4.6 stars on the official WordPress plugin repository, and it’s regularly updated.

This plugin makes embedding PDFs to your pages and posts very simple. It displays files in their original size, but you also have the option to modify the width and the height of the file (more on that a bit later).

What we particularly liked about PDF Embedder is that it’s using JavaScript to embed the files, and not iframes. This means you can modify the plugin as you like, even add some new features to it that the plugin doesn’t include by default. While this may not mean much to you if you’re not a developer, for anyone into coding, this info could be of great use. Remember, plugins are open-source, and as such can be altered to the user’s liking.

Now let’s see how to embed a PDF in WordPress using PDF Embedder.

Activate PDF Embedder

First up, let’s install and activate the plugin.

To do that, select Plugins > Add New and type PDF Embedder in the search box at the left-hand side of the screen.

Activate PDF Embedder

Once the plugin appears in the search results, first click on Install and then Activate. And that’s it, the plugin is now active on your WordPress website.

Plugin Setup

Next comes the plugin configuration. Go to Settings > PDF Embedder.

PDF Embedder Plugin Settings

The free version of the plugin allows you to:

  • modify the width and the height of the file
  • choose the toolbar location
  • select if the toolbar will appear only on hover or if it’ll be always visible
  • add the link to the plugin author’s website (if you wish to promote and support them)
PDF Embedder Main Settings

The Mobile and Secure options are for premium users only. You can purchase the premium version of the plugin on the wp-pdf official website, with the prices starting at $20 for a single site license.

But the free version of PDF Embedder already comes with the features you need to embed a PDF in WordPress, so if you’re cash-strapped, there’s no need to spend money on premium plans.

Embed a PDF File

Upon altering the plugin settings to your liking, it’s time to upload a PDF file to your page.

Go to Pages > Add New. If you’re using Classic Editor, click on Add Media.

Add Media in Classic Editor

Then, select the PDF file and press the Insert Into Page button.

Insert Into Page button

The PDF shortcode will now appear in your text editor.

PDF shortcode

If you’re using Gutenberg, upon installing the plugin go to Pages > Add New. Then, click on the “+” symbol to add a new block and look for PDF Embedder.

PDF Embedder Gutenberg block

Once you’ve added the block, all that’s left to do is upload the PDF file to the page.

Upload the PDF file to the page

Et voilà, that’s all you have to do to embed a PDF in WordPress with PDF Embedder.

There are other free plugins you can try, for example Google Drive Embedder, Embed PDF Viewer, and Algori PDF Viewer, but as far as we’re concerned, PDF Embedder definitely takes the crown.

Qode WordPress Themes: Top Picks
Bridge WordPress Theme Banner

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme

A Genuinely Multi-Concept Theme

Startit WordPress Theme

Fresh Startup Business Theme

Biagiott banneri

Beauty and Cosmetics Shop

How to Embed a PDF in WordPress Using Google Drive

If you don’t feel like dealing with plugins, no matter how simple they may be, you can still embed a PDF file in your posts and pages using Google Drive (you can also use it to embed Word documents and Google Sheets in WordPress). In this case, you’d have to use the iframe code.

The first thing you should do is upload a PDF file to Google Drive. To do that, go to your Google Drive account, click on New in the top left corner of the screen, and select File Upload.

Upload a PDF file to Google Drive

Locate your PDF file and upload it to the drive.

Next, click two times on the file to preview it. In the top right corner of the screen, you’ll notice the three vertical dots symbol which stands for More Actions. Click on it and select the first option – Share.

Share document

We now need to make sure that everyone with the link can see your PDF file. To do this, in Anyone with the link filed select the can view option.

Anyone with the link

We’d also advise you to click on Advanced options and check the box that prevents visitors from downloading, printing, or copying your file.

Prevents visitors from downloading, printing, or copying your file

Once you’ve saved your changes, click again on the three dots and select Open in New Window.

Open document in New Window

When the file opens, the three dots will be visible again. Click on them, and from the dropdown menu select Embed Item.

Embed Item

The iframe code to your PDF file will now appear.

The iframe code to your PDF file

Copy the link and go to your WordPress dashboard. Select Pages > Add New and paste the link in the text editor.

Custom HTML box

To do this in Gutenberg, you should first add the Custom HTML box to your page and then paste the link into the block.

Add the Custom HTML box to your page

The iframe code may not allow for too many customization options, but you can at least alter the size of the preview according to your requirements by modifying the width and the height parameters at the end of the code.

Alter the size of the preview

And with that, you’re done! You’ve successfully embedded a PDF file in WordPress using Google Drive.

Final Thoughts

WordPress comes with copious amounts of features you can use for all kinds of purposes, but embedding PDF files from the platform itself sadly still isn’t possible. Luckily, there are two simple ways you can go about that. If you’re a WordPress expert, you might lean more towards PDF Embedder, because that’s a JavaScript plugin and you can alter its code exactly to your liking. And others may feel more comfortable in Google Drive’s familiar environment. It’s really not that important – it all comes down to your preferences and skills.

Post your comment