This article is going to discuss these several methods that you can use to embed a PDF in WordPress.

Recently, we published an article that needed to display PDF reports within the content period to do this, we had to embed a PDF into our WordPress post. In this article, we want to discuss several methods that you can use to do this, and why you may want to in the first place.

Why Embed A PDF In WordPress?

PDF documents typically consist of reports, product catalogs, and other administrative documents. There could be some very good use cases for embedding PDF documents into a WordPress website. For example, in our situation, we had recently generated reports that were out put it as PDF's, and figured that it would be a good thing to include in our article period to do this, we needed to embed a PDF document into our WordPress post.

If you're a store that uses PDF product catalogs, embedding it directly into your WordPress website could definitely increase conversion rates while lowering bounce rates. Whatever your case is and requirements are, embedding PDF documents into WordPress posts is often necessary and beneficial.

Let's take a look at a couple of methods that you can use to embed a document directly into your page. This post is going to assume that you want to embed the PDF file into a blog post, but the techniques outlined here can also be used for pages and custom post types.

Gutenberg PDF Viewer Block Plugin

This simple and lightweight plugin adds a Gutenberg PDF viewer block to your WordPress installation. If you use Gutenberg, this is probably the best way to embed a PDF in Word press. It's also the method that we use on our blog here at isotropic.co/blog.

Simply install the plugin, and then you'll be able to add a PDF block to your Blog post edited in Gutenberg. It's fully responsive, works well on Chrome Firefox, Opera, Edge and Internet Explorer 11, and also has a fall back if JavaScript is disabled in the browser. It uses the PDF.js library.

If you're looking for an extremely simple and lightweight way to embed a PDF in Word press, doing it via a Gutenberg block not only is the easiest method, but it's the quickest and simplest way to do this.

Manually Insert The PDF Document (No JS)

If you don't want to install the plugin on to your WordPress website, you can also manually insert the PDF document. This is simple, easy to do, and doesn't require any third party JavaScript libraries As the functionality is built directly into HTML5 and the users browser. There are actually a couple of ways that you can embed a PDF document into a WordPress website using straight HTML5, but the object method allows for fallbacks in case the browser doesn't natively support PDF embeds (This could be the case if your user is running an older version of a browser interface).

Here's the code that you use to insert a PDF into your WordPress website using Object.

<object data="../pdf/sample-3pp.pdf#page=2" type="application/pdf" width="100%" height="100%">
<p><b>Example fallback content</b>: This browser does not support PDFs. Please download the PDF to view it: 
<a href="../pdf/sample-3pp.pdf">Download PDF</a>.</p>
</object>Code language: HTML, XML (xml)

Notice the message that will display if the browser does not support the object element. It will alert the user that the PDF is not displaying and direct them to click a link which will automatically download the PDF onto their computer.

The source of this code, and a great article on using the object element in HTML5 to embed a PDF in WordPress can be found here: https://pdfobject.com/static/

If you're not familiar with utilizing HTML code on your WordPress website, the easiest way to do this is by adding the HTML block in your Gutenberg editor. Then, simply copy and paste the code from this website to your HTML block, hit the preview button, and make sure that everything is working.

You can also easily embed an iframe with a PDF that is hosted on Google docs. This is a free method of using third party hosting to store your PDF files, and depending on your use cases, this could be a great option for you. Here's what the iframe embed would look like for the Google docs method of embedding a PDF into your WordPress website:

<iframe src="http://docs.google.com/gview?url=http://domain.com/pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>Code language: HTML, XML (xml)

Some more reading on this method.

If you want to combine the functionality of the object and the iframe, this is also doable. What this setup does is loads the PDF from your local hosting installation, using the object element in HTML5. If object is not supported by the browser, it falls back to an iframe embed of a PDF document hosted on a third party platform , meaning that it will work in whatever browser supports iframes (which I believe is every single browser that has ever existed since the early 2000s).

<object data="../pdf/sample-3pp.pdf#page=2" type="application/pdf" width="100%" height="100%">
<iframe src="../pdf/sample-3pp.pdf#page=2" style="border: none;" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: 
<a href="../pdf/sample-3pp.pdf">Download PDF</a>
</iframe>
</object>Code language: HTML, XML (xml)

Here's what this embed would look like on your WordPress website.

Manually Insert The PDF Document (With A Integrated Viewer)

This method essentially does what the plug-in does automatically, that removes the need to install additional plugins into your WordPress website, which could impact the loading time. To do this, we're going to use a third party JavaScript library which creates a PDF viewer interface around the uploaded PDF document.

We're going to use these super popular PDF.JS framework which is created by Mozilla. It's an open source project with the defined purpose of being a “general-purpose, web standards-based platform for parsing and rendering PDFs”.

Incorporating this as well as a PDF document on your WordPress website is very easy to do. First, upload the PDF to your media library and copy the file URL location.

Now we're going to build the embed code which includes the PDF.js Code delivered by a CDN, as well as the actual embed of the PDF document. Here's what your code should look like, simply replace the URL of the PDF document with your own:

<html>
<head>
    <title>PDF Viewer Demo</title>
    
    <link href="https://sunbox.github.io/st2_pdf_panel/demo/SimpleViewer/app.css" rel="stylesheet" type="text/css" />
    
    <script src="https://sunbox.github.io/st2_pdf_panel/lib/sencha-touch/sencha-touch-all.js"></script>
    <script src="https://sunbox.github.io/st2_pdf_panel/lib/pdf.js/compatibility.js"></script>
    <script src="https://sunbox.github.io/st2_pdf_panel/lib/pdf.js/pdf.js"></script>
   
      

  
      <script>
    
  Ext.Loader.setConfig({
    enabled: true,
    paths: {
        'Ext.ux': 'https://sunbox.github.io/st2_pdf_panel/ux'
    }
});

Ext.application({

    name  : 'PDF Viewer Demo',
    views : [
        'Ext.ux.panel.PDF'
    ],
    launch: function() {
        
        Ext.Viewport.add({
            xtype     : 'pdfpanel',
            fullscreen: true,
            layout    : 'fit',
            src       : 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf', // URL to the PDF - Same Domain or Server with CORS Support
            style     : {
                backgroundColor: '#333'
            }
        });
    }
});
  </script>
  
  
  </head>
<body>
</body>
</html>Code language: HTML, XML (xml)

Sourced from CodePen: https://codepen.io/alidz/pen/yJVRmG

You can also set up a plugin that opens the PDF in another page, tracking the amount of times that it is downloaded to the user's computer. This could be helpful if you're looking for statistics that you can use to increase sales.

Conclusion

We hope that this article presented you with the multiple ways that you can embed a PDF into WordPress. Whatever your use case is, there's a solution out there for you , from installing a plugin to using a third party JavaScript library. If you have any questions about embedding a PDF in WordPress, feel free to reach out in the comments below.