Content is (of course) crucial for keeping visitors on your WordPress website, but you don’t have many options to display PDFs. The Block Editor does provide some functionality, but you often need to code up a solution or add download links to your pages. However, there’s one solution that will help you embed PDFs into WordPress: EmbedPress.

In this tutorial, I’ll walk you through three methods to embed PDFs into WordPress using EmbedPress. It’s going to cover the Block Editor and Elementor, but also give you a way to work with PDFs regardless of your page builder.

Why Embedding PDFs Directly in WordPress Matters

Before we get to the steps, let’s address why embedding PDFs onto your pages is valuable. The crux is that when you link to a PDF, you send visitors away from your content. They’ll need to download the file, find it on their device, and open it with an application. All of this is friction for the User Experience (UX) and isn’t optimal.

A download link for a PDF on a WordPress website.

However, if you embed PDFs into WordPress, you can instead provide a unique reading experience. Visitors will be able to view documents without leaving your site, increase their engagement, and spend more time on the page. 

This approach will benefit a few different industries, niches, and tasks:

  • Business presentations and portfolios that need to showcase brochures or catalogs.
  • Educational sites that share lesson materials or worksheets.
  • Legal or financial websites displaying documents.
  • Real estate listings with property information sheets.
  • Restaurants presenting menus on their sites.
  • Magazines or publications with downloadable content.

The main problem is that WordPress’ native PDF embedding functionality is poor. While you can upload to the Media Library and use a File Block to display the PDF, it’s cumbersome and lacks customization.

Embedding a PDF using WordPress.

This is where EmbedPress comes in. It offers a solution for file embedding (and plenty of media) that works across different WordPress editors and page builders.

How To Embed PDFs into WordPress Using EmbedPress (3 Methods)

Let’s dig into using EmbedPress in a few ways to upload and work with your PDF files. There are a few source options to embed PDFs and documents: Scribd, Issuu, DocDroid, and typical Google Docs and plain PDF files. To show how straightforward each method is, I’m going to tackle them ‘live’ – without referencing the excellent documentation.

My hope is that I can show how intuitive the process is. If a method shows up a sticking point, we’ll find out together!

Method 1: Embedding PDFs Using the Block Editor

The Block Editor is WordPress’ default editor, so EmbedPress should offer perfect integration. I already have the EmbedPress plugin active within my setup, but you might need to install and activate it.

I’m going to create a new post to embed my PDF and open it in the Block Editor. From my EmbedPress review, I remember that there’s a dedicated category for all of the EmbedPress Blocks. Of course, I could also search for the Block I need:

Choosing the EmbedPress PDF Block from within the Block Editor.

I’ll click to add the Block, which gives me two options for adding my PDF:

  1. Click the Media Library button to select a PDF already on site.
  2. Upload a new PDF file – although there’s no clear way to do this.

I don’t want to use the Media Library, although I know I have a PDF in there already. I’ll try dragging and dropping a PDF from my computer onto the Block interface:

Dragging and dropping a PDF onto the EmbedPress interface.

Ah! This turns into a file uploader, and processes the file once I let go of the mouse. As an aside, I’m using converted PDFs from the public domain Project Gutenberg library. I’ll typically take an EPUB file, run it through the excellent CloudConvert site, and download the PDFs. It could be why I get a rendering error within the Block Editor:

An error within EmbedPress.

If I view a preview though, I can interact with the PDF as normal:

Viewing a PDF embed on the front end of a website.

Next, I want to customize the display a little so I’ll take a look at the right-hand sidebar.

Customizing the EmbedPress PDF Block’s Display

EmbedPress is different to other solutions as you can access a range of customization options in the Block Settings panel:

The EmbedPress Block Settings sidebar within the Block Editor.

First, I don’t want the user to scroll to read the whole PDF page. The Embed Size panel seems like a good tweak as it lets you adjust the width and height of the PDF viewer. You can work in both percentages and absolute pixel values, but I’ll stick with percentages here.

I’m not a fan of the busy toolbar of the PDF viewer, and the Document Controls tab has a lot of toggle switches:

The Document Controls tab within WordPress.

Okay, so I like that I can choose between Modern and Flip Book styles along with the ability to theme the PDF viewer with a custom color if I wish. Changing the Viewer Style also changes the toggle switch settings underneath, which I can then customize further.

I’m going to play with these options for a while to figure out what I like, but I’m willing to try the Flip Book style and a custom green for the PDF viewer theme:

Customizations to the EmbedPress PDF viewer.

There are plenty of options here, although I’d love to be able to change the default scale of the PDF within. Right now, it seems too small, which means the reader will need to zoom into the PDF. However, there doesn’t seem to be a way to do that through the options.

Method 2: Embedding PDFs with Elementor

The Block Editor implementation is slick and simple, but EmbedPress also supports Elementor through a custom widget. I can find a few widgets for EmbedPress through the search bar, so I’m going to drag and drop the EmbedPress PDF widget onto the page.

The widget is blank right now, but looking at the options, I can see a few tabs with a layout similar to the Block Editor:

The EmbedPress General tab within Elementor.

The upload process is ‘clunkier’ as you have to go through the Media Library rather than use drag-and-drop. Still, at least I can see a preview render on the page:

Elementor displaying a PDF on a webpage.

Most of the options are the same as that of the Block Editor. However, one that is welcome here is the Zoom setting. I’m going to leave it at Automatic Zoom, but I’m glad the option is there:

The Zoom settings drop-down menu within Elementor.

The Controls tab is almost identical to the Block Editor. It lets you toggle a few different options to tailor the reading experience to your needs:

The Controls tab for EmbedPress within Elementor.

I’m going to make some changes here, but I won’t even preview the post as I go. This is because Elementor shows me a live render of the PDF viewer. Once I save my changes, I can take a further look and refine the layout.

Method 3: Using Shortcodes

While the Block Editor and Elementor have interfaces, EmbedPress also offers shortcodes that will work across almost every other WordPress page builder. I’m going to use the free version of Brizy for this, although the approach will be transferable to whatever your own setup is.

The main drawback of this approach is how you need to use the Media Library. The additional step over Elementor here is how I need to copy the PDF’s URL to use in the shortcode. I can do this through clicking on the PDF file, then on the Copy URL to clipboard button:

Copying the URL of a PDF from the WordPress Media Library.

Now I need to figure out how to generate a shortcode. I guess this is going to be within the EmbedPress settings. There’s a dedicated Shortcode tab here that I have to paste the URL into. Once you click the Generate button, it will build the shortcode link:

The EmbedPress Shortcode tab.

Now I can add this shortcode to my post. In Brizy, I can drag a Shortcode Block in and paste the link there. Brizy will render the PDF viewer almost immediately:

Adding a shortcode to Brizy.

Customizing the PDF viewer means working with the global options within EmbedPress’ settings:

The EmbedPress global iFrame settings.

It’s not as versatile or customizable as other approaches, although it’s still useful when you’re working with an older site using the Classic Editor or using a page builder that doesn’t integrate with EmbedPress. Also, you might need to add PDFs to areas without configuring Blocks or widgets – shortcodes will be invaluable for this.

Additional PDF Embedding Options

There were a few options within EmbedPress I didn’t look into, but I want to mention them here. For instance, through the Branding page of the EmbedPress settings, you can add a company logo or a Call To Action (CTA) button to your PDF embeds:

The company logo upload option within EmbedPress.

If you need to share documents, there are content protection options for premium EmbedPress users:

The EmbedPress content protection options.

You can restrict views to logged-in users, password-protect PDF embeds, and control whether visitors can download your documents. This is something you’d often have to pay to add to your documents regardless, so it’s great to see it in EmbedPress. It makes the plugin much more beneficial to whatever your use case is.

EmbedPress Makes It A Cinch to Embed PDFs Into WordPress

You don’t need code or wonky workarounds to embed PDFs into WordPress. EmbedPress can give you an intuitive way to do this in seconds, no matter your choice of editor. I love using the Block Editor, but didn’t like the lack of preview or some missing options. Elementor surprised me though. It gave me a fast preview, more options, and a slightly more intuitive way to embed my PDFs.

Will EmbedPress become the way you embed PDFs into WordsPress? I’m interested to hear about your plans in the comments section below!