4 Easy Steps to Embed a PDF in WordPress

Table of Contents
    Add a header to begin generating the table of contents

    PDF files are a homestay of the Internet. Longer documents, calendars, forms, and more are often linked to on sites to save space and not ruin the site’s theme. Embedding PDFs in WordPress sites allows you to show the contents to users right on your site so they don’t need to hit a link and open it up in a new tab. Remember, this will decrease your bounce rate and make for a much cleaner site design! 

    We’ll go step by step through the process, all the way from how to upload a PDF to WordPress to using a WordPress PDF plugin. Using the free version of WordPress.com that disallows plugins or would rather not install one? No worries, we’ll also show you how to embed a PDF in WordPress without a plugin!  

    how to Embed a PDF in WordPress

    Embedding PDFs in WordPress

    In our tutorial, we’ll take a sample PDF file, upload the file to your site, and embed it! In less than ten minutes, you’ll be a pro! Let’s get started.

    Step 1: The Prerequisites to Embedding PDFs in WordPress

    First, you’ll need to log into your WordPress Portal as the administrator. Once you’re on the Portal, you’ll need to make a new post by clicking the “Add New” button:

    add new post

    Next, prepare a sample post to use. You can either click “Publish” or “Save Draft”. This is the page where we’ll practice embedding PDFs in WordPress!

    publish a post

    Hit the “Dashboard” link in the left column to go back, since that’s where the next step will begin. 

    Now it’s time to choose your own adventure! If you want to use a plugin for embedding PDFs in WordPress, go on to “Step 2” and skip “Step 4”! If you want to embed a PDF in WordPress without a plugin, skip “Step 3” and go on to “Step 4”!  

    Step 2: Grab a WordPress PDF Plugin

    After a careful review of the plugins available for embedding PDFs in WordPress, we found that you’ll get the most versatility out of Lever Technology’s “PDF Embedder” plugin. It uses a unique mechanism to show the contents of a PDF file on a WordPress page without iframes or the browser’s native PDF file reader.

    In short, this plugin dodges the (unfortunately very) common situation where users can’t see your PDF file because their browser automatically blocks it, depending on security settings. You get the best of both worlds: the ability to display a PDF file and not worrying about users needing to download it manually!

    First, from the Portal, click the “Plugins” item in the menu on the left-hand column:

    click plugins

    On the page that comes up, you’ll need to click on “Add New” as shown:

    add a new plugin

    You should then see the plugins library page. In the “keyword” search box, type in: “pdf embedder”, and you should get a pack of results as shown below. Hit “Install Now” on the proper plugin. It is the one that has its “Install Now” button boxed in red.

    pdf embedder

    Next, that “Install Now” button should take a few seconds, then its text should say “Activate”. Click on the button again. Then, you’ll be redirected to the page that shows the plugins that are currently on your WordPress site. Verify that “PDF Embedder” is present on that list.

    pdf embeder plugins

    Step 3: Using the Plugin to Embed a PDF File

    Now that you’ve successfully installed the “PDF Embedder” plugin, it’s very easy to embed a PDF file in our sample post. You’ll first need to return to your Portal by clicking the “Home” button. 

    Next, let’s locate our sample post. On the Dashboard, click on the “Posts” link on the left-hand column menu as shown:

    posts tab

    Then, you’ll be presented with a list of all of your posts. Find the one you most recently created for this tutorial in the list. Then, click the title you created for that post to access its contents.

    We will now need to make a new “Content Block”. As shown in the picture below, click on the button with a “+” sign on it.

    add block

    You’ll then get a popup as shown in the next image. In the search box that is boxed in red, just type “PDF”. That should only yield a few results. You’ll need to then click on the item boxed in yellow that says “PDF Embedder”. This calls the plugin we just installed and enables us to drop that PDF in our site!

    add block search

    A Content Block will then be created. Yes, the layout is a bit odd, but bear with us! It will just look like a box with some text in it that says “Click here to Open Media Library to select PDF”. Click on that text, and then you should see your current media library. We will now have to upload a sample PDF file.

    import files

    The “Upload Files” tab will be selected by default. In case you don’t know how to upload a PDF to WordPress, it’s quite simple. You can either click the “Select Files” button boxed in yellow, or you can simply drag and drop a PDF file from your File Explorer!

    sample pdf

    Once the PDF file is finished uploading, you will see a small document icon and file name like in the yellow box above. You can optionally fill out the fields we pointed to with red arrows if you want to be able to find that PDF file in the future. Be sure to click “Select” to continue!

    You should then get something that looks like the image below.

    pdf embed example

    You may have to tweak the sizing, but that completes the process! You now have completed the process of embedding PDFs in WordPress by using a plugin.

    Step 4: Embed a PDF File Without a Plugin

    This step is only meant for those who did not follow “Step 3”. It covers embedding PDFs in WordPress without using any plugins.

    Please note that this method may cause the content to be blocked by certain browsers! 

    First, access the sample post we made in “Step 1”. You’ll need to go to the Dashboard’s “Home” and then click the “Posts” item on the menu as shown below.

    posts tab

    We will be using Google Docs for this. After logging into your Google account, access your Google Drive and upload your sample PDF file. Right-click on that file, and then select “Open With -> Google Docs” on the menu to get started!

    Once you have the file open in Google Docs, on the top toolbar, click “File -> Publish to the Web”. You should see a dialog box like this:

    google publish

    First, you need to hit “Publish” so that others can view the file. Then, select the “Embed” tab in yellow. Copy the HTML code that appears in the textbox. Going back to your WordPress sample post, we’ll need to add a new Content Block. 

    add block

    Type “Custom HTML” in the search box that comes up. Select that option, then you should see something like this:

    custom html

    Simply copy and paste the HTML from Google Docs inside the box there, and you’re good to go!

    Wrapping Up

    As you’ve seen, embedding PDFs in WordPress can be a tedious process. There are only two real routes: using a plugin or using a service like Google Docs. In general, it is a better idea to use the plugin, since it’s more likely to work universally, and it references content that is stored locally in your WordPress media library.

    A service like Google Docs usually will provide you with “iframes”, which are generally frowned upon in web design, and some browsers will fail to display them. Regardless of which path you choose, you should now be confident in your ability to embed those PDF files!

    In summary, here’s what you have to do to embed PDFs in WordPress:

    1. Log into your WordPress Portal.
    2. Make a New Post, then save or publish it.
    3. Install the “PDF Embedder” plugin.
    4. Insert a new Content Block into your post.
    5. Click on the “PDF Embedder” option for your Content Block.
    6. Upload a PDF file by clicking on the content block.
    Clever Tips From Experts
    More to Explore
    Today's
    Clever Tip