Do you want to add a PDF viewer in WordPress?
PDF format is good to use when you want your files to always have the same layout, no matter what device they’re viewed on. By embedding PDF files in WordPress, you can share your files while keeping visitors on your website.
In this article, we will show you how to add a PDF viewer in WordPress.
Why Do You Need a PDF Viewer in WordPress?
By default, WordPress doesn’t embed PDF files into blog posts as it does with audio, video, tweets, and other media formats. It just adds the file as a downloadable link.
That means your visitors will have to leave your post to view the PDF file. Many of these users don’t come back to your site, and this reduces your site’s pageviews as well as user engagement.
One way to deal with this is to offer PDF files as content upgrades. This way, you can ask users to join your email list to get the bonus content.
However, if you just want users to view PDF files without leaving your website, then you will need to add a PDF viewer to your WordPress site.
How to Install and Set Up PDF Embedder
We’ll be using PDF Embedder, one of the best PDF plugins for WordPress.
It uses JavaScript to embed files with a fully functional toolbar that allows users to zoom in and navigate the PDF file. It’s also fully responsive, so the embedded PDF will be viewable on any size screen.
First, you need to install and activate the PDF Embedder plugin. For detailed instructions, see our step by step guide on how to install a WordPress plugin.
Upon activation, you can visit Settings » PDF Embedder to configure the plugin settings. The default settings are suitable for most websites, so this step is optional.
The settings allow you to control the height and width of the PDF viewer. You can change this if you feel that the PDF viewer is too wide or narrow.
You can also choose whether to display the toolbar at the top or bottom of the viewer, and whether to hide it until the user hovers their mouse over the document.
The premium version adds options for a download button, continuous page scrolling, clickable links, and tracking file downloads. It also offers a number of mobile and security settings.
When you’ve finished customizing your settings, don’t forget to click on the ‘Save Changes’ button to store them.
Now we’re ready to embed a PDF in a WordPress post or page. The way you do that depends on whether you use the block editor or classic editor. You can use the links below to jump to your preferred section:
How to Add a PDF Viewer in the Block Editor
Adding PDF files to your WordPress posts and pages is quite simple. We’ll start by adding a new post or editing an existing one.
First, place your cursor where you want to embed the PDF document. Then you’ll need to add a new block by clicking the Add Block + button at the top left of the WordPress edit screen.
Next, you should click on the ‘PDF Embedder’ button under the Text section.
Once you’ve done that, you’ll need to upload a new PDF file to your post or select one from your media library. You can do that by clicking the link that says ‘Click here to Open Media Library to select PDF’.
You’ll be taken to the WordPress media library. If you haven’t already added the PDF, then do that now. Just drag the file into the library, and when you see the ‘Drop files to upload’ message you can let go of your mouse button.
The PDF will be automatically uploaded and selected. All you need to do is click the ‘Select’ button.
The PDF will be added to your document. You won’t see a preview of the PDF while you’re editing the post. Instead, the block contains the file’s URL.
To view the PDF, you’ll need to save your post and preview it on your live website. Here’s how it looks on our demo website.
How to Add a PDF Viewer in the Classic Editor
Embedding a PDF in the classic editor is just as easy. Start by adding a new post or opening the one you’re working on.
After that, you should place the cursor where you want to display the PDF, and then you need to drag the PDF onto the page. When you see the ‘Drop files to upload’ message you can let go of your mouse button.
The PDF will be automatically uploaded to your media library and selected. All you need to do now is click the ‘Insert into post’ button.
PDF Embedder will add a shortcode to your post or page. It will look like [pdf-embedder url="PDFURL"]. This will display the PDF when you preview or publish the file.
To view the PDF, simply save your post and preview it on your live website. Here’s how it appeared on our demo website.
We hope this article helped you add a PDF Viewer in WordPress. You may also want to take a look at our guide on how to create an email newsletter or check out our list of must have WordPress plugins to grow your site.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Works great on the latest version!
Thanks for letting us know
I see that PDF Viewer has not been updated in 3 years, and has not been tested with my current version of WordPress (v4.9.1). Is this still the suggested plugin to use? It’s looking like no one is maintaining it, perhaps?
Hi Ian,
You are right. You should check out these PDF plugins for WordPress.
if am clicking print for my word press web page i am getting the page which is not properly aligned.
I am getting all the urls and content combined
On the plugin page it says:
“This plugin hasn’t been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.”
Maybe that’s why it does not work for some.
In my site pdfviewer does not work. In fact I cannot embed any pdf file on my blog post.
hi i want to publish a book in my wordpress site and people only read the book so can u refer me any easy pdf reader plugin
This is not working for me on the last version of WP. Someone know a workaround? Or another option that works?
Hi guys,
the problem with PDF plugins like this ones, is that you cannot remove sibar(s) when generating your PDF, an that changes style a lot !
If ever I find one that has this so useful feature, I come back here to tell you ! Or maybe someone found one somewhere ?
NIce information
You should try ‘Embed Any Document’. It’s a much better alternative.
Thanks for the recommendation. It works great!!
Is it possible to set the viewer by opening a file to 110% view automaticly and how i gonna do that?
It’s a perfect plugin used by WordPress 4.4.2 and twenty-eleven theme
Hi Syed,
Many thanks for the ‘heads up’ on this issue.
I’ve been using the following free version of this plugin for the last two years, though have just upgraded to the premium due to the high number of fPDF’s held on my clients site:
So far I’ve had no issues at all with the premium version, I’m also able to ‘unbrand’ the document, plus track the number of download/views.
I read the info that you indicated. Looks like the pdf viewer is not available for wordpress.com. Too bad. I understand the issue that readers who click on my url for a pdf will go to a separate page, and may not return to my blog. That is a problem. I didn’t know that I would have this a need to display pdfs when I started with wordpress.com, or I may have made a different choice.
Am I correct that WordPress.org is the required application for the embedding plugin? If so, I suggest that information be clearly stated as a requirement. All references that I saw are to the generic WordPress, so it’s not possible (Did I miss it?) to determine whether there is a specific application requirement. It would help us newbies to avoid mistakes, and direct us to potentially making different decisions.
Thanks.
I really appreciate your posts that identify a DIY (do it yourself) issue in wordpress, and then provide some alternate solutions, usually involving plug ins.
“But”, am wondering if you take the time to read some of the reviews posted by users on the plugin page in wordpress.org directory, and also the LAST UPDATED info.
For example, this PDF VIEWER plugin was last updated “8 months” ago, and is compatible up to WP 4.2.6
Also, per one reviewer….
“November 4, 2015 for WP 4.3.1
This plugin was precisely what I needed. Thanks!
******Only concerns are:
(1) This plugin leverages Mozilla PDF.JS framework. As of 2015-NOV, this plugin is significantly behind the present version of that framework:
Plugin Settings page states:
PDF.js Version Date
Stable 1.1.1 18 Mar 2015
Beta 1.1.114 7 May 2015
PDF.JS page states as of 2015-NOV:
Stable 1.1.366
Beta 1.1.469
SUMMARY > Don’t you think it’s good practice to use plugins with good ratings, but that are also consistently updated and highly rated ? If you do, please include some info in your posts that acknowledge a suggested plugin hasn’t been updated in a while, but appears to be the best solution among the ones currently available.
PDF Viewer allows you to use the beta version of PDF.js from the settings page. You may also want to see our guide on Should You Install Plugins Not Tested With Your WordPress Version?
I use WordPress.com, not .org. Can I embed pdfs and other documents using a plug-in? I have found varying references, and want to be certain, before experimenting and possibly damaging m existing blog.
WordPress.com edit page does have a location labeled plugins. That also leads me to believe that I can use them, yet, references say “no”. I’ll appreciate an explanation.
Thanks
Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Hey Syed,
I think this is the first of its kind pots on wordpress. I did not see a post on PDF for WordPpress, but many of SEO and bloggers are looking for this pluging. So thanks to introduce this to the WP industry. This could be very helpful for tutorials as well.
I am using WordPress.com (not .org). I want viewers to see my pdf documents on the same page as the rest of my blog post. Can I install the pdf viewer that is described here, in my WordPress.com blog?
Thanks for this article. For SEO purpose, is it better to add the pdf content in text and add a button to download the link, or to display the pdf only using this viewer plugin ?
Like we said, a download link forces users to view the PDF separately. This decreases the time they spend on your page and their chances of coming back to resume browsing your website. You will get the same SEO benefit as adding a download link. Since it is written in JavaScript and compatible with HTML5 search engines can still index your PDF contents if the PDF file has text in it and not just images.