Skip to main content
WordPress made easy with the drag & drop Total WordPress Theme - now 50% OFF!Learn More

How to Embed PDF Files in WordPress

Last updated on:
How to Embed PDF Files in WordPress

There can be times when you would love to embed a PDF file in your post or page:

  • A book author may want give readers a free copy.
  • To add product catalogs on your website.
  • To share your designs in PDF format with clients.
  • You may be running a travel agency and want to display the itinerary of the tour packages.

But there is a problem!

Though WordPress allows you to embed audios, videos and of course, images, it is not possible to embed PDF files in your posts and pages. This feature is not available so far, maybe it will be added in future.

In case you want to add a PDF file, you can upload the file using the Add Media option, insert it, and the link to that file will be added to your page. And your visitors can either download it or view the file in the web browser by leaving your website.

But what if you want to embed PDF files in your posts and let your visitors view it without leaving your website? Is there any solution for that? The short answer is YES.

So in this post, I will show how you can embed a PDF file in your WordPress post or page, with or without using a plugin. Let’s get started.

How to Embed a PDF File with a Plugin

There are a lot of plugins that you can use to add a PDF file to your WordPress post.

However, we will be using a plugin called PDF Embedder. It is a free plugin which is available in the WordPress Plugin directory. The best thing about this plugin is it uses javascript to do its job and not some third party service or iframes.

Step 1: Install PDF Embedder Plugin

Log in to your WordPress Dashboard and go to Plugins > Add New. Now search PDF Embedder in the search box. Once you find the plugin, just install and activate it. Simple, isn’t it?

Install PDF Embedder Plugin

Step 2: Setup the Plugin

Though you can start embedding your PDF files once you installed this plugin, you can first modify the settings to make the embedded files look better. To open the settings page of this plugin, go to Settings > PDF Embedder from the left sidebar of your WordPress Dashboard.

PDF Embedder Settings

The free version of this plugin allows you to change the following:

  • Width and height – You can modify the width and height of the PDF viewer. It accepts integer values (in pixels) or max (100% width).
  • Toolbar Location – The toolbar of this PDF viewer allows your audience to zoom in or out and go to the next or previous page. You can have the toolbar at the top, bottom, or both.
  • Toolbar hover – You can select whether you want the toolbar to be visible only on mouse hover over the document or not.

Now, these are the universal settings. But what if you want to change the settings of a specific file? Well, you can do that with the help of shortcodes. Here is an example:

[pdf-embedder url=”http://yoursite.com/wp-content/uploads/2019/01/April.pdf”  width=”500″ toolbar=”top” toolbarfixed=”on”]

In the above example, width is set to 500px, the toolbar location is set to top, and the toolbar will be fixed. You can also set the toolbar to bottom and toolbar fixed to off.

This plugin also has a premium version which offers features like download button, track views & download, continuous page scrolling, and open links in a new window.

Step 3: Embed PDF file in Your Post or Page

Once you are done with the settings, you can start doing the dirty work. Now, whether you are using the Classic Editor or the Gutenberg Editor, you can easily use this plugin to get the desired result.

If you are using the Classic Editor, embedding a PDF file is similar to what you would do for an image or video.

First of all, create a new post or open an existing one and then click on Add Media button. Now, upload your PDF file, click on Insert into post button, and a shortcode will be added to your post.

Embed PDF file Classic Editor

That’s it – now you can preview your post to check if it is working properly or not.

What about Gutenberg Editor? Well, the PDF Embedder plugin comes with a specific block. So create a new post and click on Add Block icon. Next, search for PDF Embedder block and select it.

Embed PDF file Gutenberg Editor

Finally, click on the block to select (or upload) your PDF file and your job is done.

Here is the final result, irrespective of which editor you are using:

Embedded PDF file final

Popular PDF Viewer Plugins

Though PDF Embedder plugin does a good job, it is always good to have some alternatives. So let me now share some free and premium PDF viewer plugins, in no particular order:

PDF viewer for WordPress

PDF viewer for WordPress Plugin

With more than 3900+ sales, the PDF viewer for WordPress is the selling PDF viewer plugin on CodeCanyon. It is a fully responsive and cross-browser compatible plugin. This plugin allows you to enable or disable options like print, download, zoom, page navigation, and social sharing. You can also use Google Analytics with WordPress to track the number of visitors reading your PDFs.

Google Drive Embedder

Google Drive Embedder Plugin

Google Drive Embedder is a free plugin that allows you to access your Google Drive from your WordPress dashboard and embed PDFs, Word documents, or spreadsheets to your post or page. However, to use this plugin, you have to install Google Apps Login as well – the purpose of this plugin is to connect your Google Drive to your WordPress site.

Algori PDF Viewer

Algori PDF Viewer Plugin

Looking for a Gutenberg block plugin for embedding PDF files? You can try the Algori PDF Viewer plugin. This free plugin is compatible with every web browsers like Google Chrome, Firefox, Safari, Opera, and Internet Explorer 11. It allows you to load multiple files in a single page and supports presentation mode.

Real3D FlipBook WordPress Plugin

Real3D FlipBook WordPress Plugin

As the name suggests, Real3D FlipBook is a responsive and touch-friendly 3D flipbook plugin for displaying PDFs and images. It has been developed using HTML5 and does not require the use of Flash. You can customize settings like flip speed, flip sound, zoom level, and camera angle. This plugin also supports lightbox and fullscreen mode.

How to Embed a PDF File without a Plugin

Well, if you are one of those who is always looking out for solutions without a plugin, then this section is for you. We can certainly embed a PDF file in WordPress posts and pages without installing yet another plugin.

The idea is simple – you will have to upload your PDF file to your Google Drive account and then use the iframe code to embed that file in your site. Though this method is secure, the only problem is it uses iframes.

Step 1: Go to Google Drive and log in to your account.

Step 2: Upload the PDF file which you want to embed in your WordPress post here. To do that, click on New from the left sidebar of your Google Drive account, select File Upload, and upload the file from your local computer.

Google Drive file upload

Step 3: Once the file is uploaded to your drive, double click on it to preview the file. Now, click on the 3 vertical dots (More actions) present in the top right corner and select Open in new window.

Step 4: In the new window, click on More Actions (the 3 vertical dots in the top right corner) and select Share.

Google Drive PDF share

Step 5: A pop-up called “Share with others” will open up. Here, click on Get shareable link – what this does is it makes sure anyone with the PDF file link can view it. If you don’t do this, the file will remain private and won’t be visible to your website audience.

Get Shareable Link

Step 6: If you don’t want your visitors to download or print the file and also disable copy text feature, then click on Advanced in the same pop-up window. Check the option which says – “Disable options to download, print, and copy for commenters and viewers” and click on Done.

Disable download print copy in Google Drive PDF

Step 7: Now it’s time to get the embed code which we will use in our post. To get that, again click on More actions, select Embed item, and copy the iframe code.

Google Drive copy embed code

Step 8: Head over to your WordPress Dashboard and create or edit the post or page where you want to embed the PDF file. Now, if you are using the Classic Editor, just go to the Text tab and paste the code:

Classic Editor Text tab

For Gutenberg Editor, you have to add a new block, search for Custom HTML, and finally, add the iframe code in the Custom HTML block:

Custom HTML Block

Step 9: That’s it – now preview your post or page to check your embedded PDF file.

Endnote on How to Embed PDF Files in WordPress

WordPress allows you to link to your PDF files – but not embed them. However, this tutorial solves that problem. It shows how you can embed your PDF files in your posts or pages, just like your images and videos, with or without using a plugin.

Have you ever embedded a PDF file on your website using any of the two methods? Do you have an alternative plugin in mind and believe that it is better than the ones mentioned in this article? Let me know your thoughts in the comment section.

Subscribe to the Newsletter

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

Comments

No comments yet. Why don't you kick off the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *

Learn how your comment data is processed by viewing our privacy policy here.