Beginner Guide to Add a PDF Viewer in WordPress

Do you often provide content in the form of PDFs to your site users? If yes, you might wonder if you could add a PDF viewer in WordPress. 

PDFs are a great way to provide vast and complex information to users in an organized manner. However, users can’t access the information directly on your site. This is because PDFs are incorporated into the content using a link, and they mostly open in a new tab once users download them. 

Adding a PDF viewer on the website allows you to embed PDFs on your site and provide the content to users directly from your website without redirecting to a new tab. This can lead to plenty of benefits which we’ll discuss further. 

Do you also want to learn ways to add a PDF viewer to your website? If so, this guide is specially created for you. In this blog, we’ll explore the benefits and two easy and practical ways to add a PDF viewer in WordPress.

So, without further ado, let’s get started!

Why must you add a PDF viewer in WordPress?

PDFs are a popular file format for documents, and many website owners use them to share information with their audience. You can upload a PDF file to your website and provide a download link for it. However, simply linking to a PDF file can be inconvenient for users and can hamper the user experience of a website. This is because they have to download and open the PDF in a separate application.

Users need a quick solution to their queries rather than following a lengthy process of downloading the PDF and then accessing the information. This is especially helpful for users navigating the website from a smaller screen such as a mobile or tablet.

By adding a PDF viewer to your website, you can make it quicker and easier for users to view and interact with your PDF file without leaving your website. This can improve the user experience and keep visitors engaged on your site for longer periods of time. This may increase your page views and time spent on your website and reduce your site’s bounce rate. 

So, adding a PDF viewer is a valuable addition for you (website owner) as well as your users.

How to add a PDF viewer to WordPress?

This section will show you two simple and easy ways to add a PDF viewer to your website. The first method uses the block editor to add a PDF viewer to WordPress, while the second method uses a plugin to add a PDF viewer to WordPress. So, let’s go over both methods in detail to help you choose which one is most suitable for you.  

1. Using block editor to add a PDF Viewer in WordPress.

In order to add a PDF viewer in WordPress, we’ll use the in-built file block editor. This is the simplest and quick way to add a PDF viewer to your site, as it doesn’t require the installation of additional software or Plugins. 

To begin with the block editor, open the post or page where you like to add the PDF viewer and click on the ‘+’ tab to add a new block.  

Then, look for the ‘File’ block. This will pop up a screen with two options ‘Upload’ or ‘Media library.’

Here, you can select the ‘Media library’ option if you’ve already uploaded your PDF file to your WP media library. After that, select the PDF file that you want to embed in your post or page.

On the contrary, if you have not uploaded your PDF to your media library, you need to click on the ‘Upload’ option. Then, select a PDF file from your computer that you want to upload to your post/page. 

You don’t need to stress about the size of your PDF file. WordPress will select the size for the embedded PDF automatically.

Keep in mind that you or visitors might not view the full document file in the default view. But you and visitors can scroll through the PDF file to see more content. In addition, the ‘File’ block includes a toolbar that allows you and your visitors to zoom in and zoom out of the document. 

You can also modify the height of the PDF viewer if you want to display more or less content of the embedded file to your audience. For this, you can simply navigate to the ‘Height in pixels’ slider in the right-hand menu and change the height as per your desire.

Furthermore, WordPress provides a ‘Download’ option in the toolbar and below the PDF by default. This feature allows visitors to download a copy of your PDF content if they wish one for themselves. They can quickly get a copy of your PDF content using the download options.

Once you are happy with your PDF settings, you can click on the ‘Update’ or ‘Publish’ button to store your changes and make them live on your site.

However, if you don’t want your visitors to download your PDF content and keep your PDF content safe, you can simply disable the ‘Show Download Button’ toggle.

Once done, you can visit your website to see your PDF viewer in action.

That’s it. You have successfully added the PDF viewer to your website.

 

This block editor method is a suitable and quick way to add a PDF viewer in WordPress. However, it only provides you with only a few customizations. If you want to have more features and advanced customization options, you can check our next plugin method.

2. Using Plugin to add a PDF Viewer in WordPress.

The block editor method is a straightforward and user-friendly way for web admins to incorporate PDF viewer on their site effortlessly. However, choosing a WordPress plugin can be a fruitful approach if you want more customizations and control over your PDF viewer.

i. Install and activate PDF.js Viewer.

There are multiple efficient plugins that allow you to embed a PDF viewer in WP. But to narrow down your search, we’ve chosen the most featureful and customizable Plugin for embedding PDF viewer in WP- the PDF.js Viewer. You can also try its other alternatives, such as PDF Embedder and Embed PDF Viewer.

Our preferred choice PDF.js Viewer is one of the finest PDF plugins for WP. It serves over 20,000+ active installations and is popular due to its intuitive interface and ease of use. So, let’s get started with it.

First of all, install and activate the ‘PDF.js Viewer’ Plugin on your site. If you are new to this and need help, you can check out our guide on WP plugin installation.

Once done, you need to configure the settings. 

ii. Set up PDF.js Viewer

The next step after plugin installation is to configure the plugin settings.

From your admin dashboard, navigate to Settings >> PDFjs Viewer. 

On the next screen, you’ll witness the ‘Default’ settings under the PDFjs Viewer options. It includes downloads, Print, a search button, a full-screen link, and a few more. You can keep the settings enabled or disabled as per your desire. 

If you want to keep all the settings enabled, leave the default settings as it is. Contrarily, if you don’t want these to be enabled, simply uncheck the box next to each setting.  

The following settings are regarding the PDF configurations and control. Let’s configure each one by one.

• Show Fullscreen link.

By default, the PDF.js viewer provides a ‘View Fullscreen’ link above the embedded PDF, which enables visitors to open the PDF in Fullscreen mode. The fullscreen mode makes it easier for visitors to read long documents with ease. So it’s better you leave this feature enabled.

However, if you don’t want to enable the fullscreen feature, you can simply uncheck the box next to the ‘Show Fullscreen link’ option.

• Fullscreen Link Text

The next setting you’d see is ‘Fullscreen Link Text.’ The Plugin provides you with an option to change the ‘View Fullscreen’ link text with a custom message. This means you can change the ‘View Fullscreen’ text to anything you want. If you prefer to change this, simply enter the text into the box next to ‘Fullscreen Link Text.’  

• Fullscreen Links in New Tabs.

Next, you need to decide whether you want to open the PDF link in a new tab or not. You can set this using the ‘Fullscreen Links in New Tabs’ box.

Note that launching a link in a new tab can be annoying for mobile users. So, decide what suits you the best.

• Embed Height and width

Next, the Plugin also allows you to change the default height and width and the viewer scale of the PDF.       

• Page Mode

An unmatched feature of the PDF.js viewer is that it displays the PDF without any sidebar to provide an extended view to the visitors. This enables them to see the entire document effortlessly. Also, it provides a ‘Toggle Sidebar’ button that visitors can click to open a sidebar at any time.

Further, if you plan to add multi-page and longer PDFs, displaying the sidebar by default can be a valuable decision.

For this, click on the Page Mode dropdown menu and choose either Thumbs, Bookmarks, or Attachments.

And that’s it. Once you are happy with your plugin settings, go ahead and click on the ‘Save Changes’ tab to store your settings. 

iii. Add PDF viewer in WordPress.

Now, you are ready to add a PDF viewer in WordPress. For this, navigate to your admin dashboard and open the page or post where you like to display your PDF. 

Then, click on the ‘+’ tab and look for the ‘Embed PDF.js Viewer’ by simply typing into the search box. Go ahead and select the block when it appears. 

Once done, click on the ‘Choose PDF’ link. This will lead you to the WP media library. Now, you can select a PDF from your media library or upload the PDF from your computer. 

The Plugin will now use the default settings you made earlier, but you can still choose to modify the settings every time you upload a PDF to your site. If you want to change your settings, you can simply do it from your right-hand menu without leaving your post/page editor.

Once you are happy with how your PDF looks and acts, click on the ‘Update’ or ‘Publish’ tab to make the changes live. 

That’s it. You’ve successfully added a PDF viewer to your site.  

Now, visit your site to see the PDF viewer in action.

To Conclude:

A PDF viewer is a great addition for websites that often share PDF files with audiences. Although you can always add a PDF to your site, the users are required to download it and view it on another tab, leaving your site. This can hurt your website’s user experience and SEO and can hamper your online success. 

Incorporating a PDF viewer brings multiple benefits. It is beneficial not only for the site audience but for website owners as well. 

Adding a PDF viewer to your WordPress site can improve the user experience and make it easier for visitors to view and interact with your PDF files. On the other hand, it can enhance user engagement, increase page views and average time spent on the site, and reduces the bounce rate, which are all valuable for websites. Thus, a PDF viewer is a win-win for both. 

Here, we’ve covered two different and easy methods to add a PDF viewer in WordPress step-by-step. We hope this easy guide has helped you understand the process in a better way. By following the simple and easy steps outlined in this blog post, you can easily add a PDF viewer to your website and customize it to fit your needs. So, go ahead and add a PDF viewer to your WordPress site today and give a boost to your website.