PHPMatters Help You Better Hosting Your PHP-based Sites
How to Add a WordPress PDF Viewer to Better Display PDF Files

How to Add a WordPress PDF Viewer to Better Display PDF Files

Are you looking to display some PDF files on your WordPress site? By default, WordPress cannot embed this type of files into your posts or pages the same way as it does with images, videos and audio files. Instead, this CMS showcases the PDF files in a way of downloadable links. If your readers want to view the content, they need to download the file and check it outside your website. As many people may never go back to your webpage, this can do no good to the improvement of your page views.

To deal with this situation, you can think about the content upgrades that display the PDF files exclusively to your email subscribers. Check this page for more information. Or, you simply need to add a WordPress PDF viewer on your website, allowing people to check these files without leaving your site. Check below to learn the detailed steps.

How to Add a WordPress PDF Viewer

Surely, the easiest and time-saving method to achieve this is by using the WordPress plugin. After searching from the Plugin Directory of WordPress and some third party plugin providers, we finally recommend you to try the PDF Embedder plugin, with which you can add your PDF files just like inserting the images, and display the file content in a preview manner on your webpage.

One of the best highlights of this plugin is that it only uses JavaScript to embed the PDF files, without the help from some additional service providers or iframes. This nature simply ensures a high level of flexibility on the display of this kind of file.

Step 1 – Configure the Plugin Default Settings

To use this plugin, you simply need to go to the Settings page of your WordPress dashboard and click the PDF Embedder button after the plugin installation and activation. Then, you can make some default configurations for the PDF viewer.

PDF Embedder Plugin

  • PDF files will be showcased with their original sizes and shapes automatically. However, if needed, you can specify their width and height optionally to make it better suitable for your webpage design.
  • There will be a special Toolbar displayed along with the PDF files, including the buttons for “Previous Page”, “Next Page”, “Zoom Out”, “Zoom In” and “Full Screen”. Here, you can decide the Toolbar location between the options of Top and Bottom, as well as determining whether to showcase it all the times or only when people hover over the document.
  • If you utilize the premium version of this plugin, you can also decide whether to showcase a download button of this special file, along with the counting numbers for downloads and views.

In addition, we have to mention that this plugin works fine with the most mobile browsers. However, to ensure the proper display on some small screens, you’d better activate its mobile function. In this case, the PDF document can be showcased only with a thumbnail scale, along with a special “View In Full Screen” button for readers to click.

Step 2 – Insert the PDF Files

Here, you can embed the PDF files the same way as you normally do with images. Simply go to the post editing page, click the Add Media button, upload the PDF file and insert it into your blog post.

Insert the PDF Files

After that, the plugin will generate a special shortcode automatically. If you fail to configure the size and toolbar settings in the previous step, you can add some parameters into the shortcode for better customization. Check this plugin instruction for the detailed information.

Now, you can update or publish your post, and the PDF files can be displayed just like the following screenshot showcases.

PDF Sample