How to Embed PDFs in WordPress

While displaying a PDF document on your website may be necessary, the user should not be directed away from the site. In this case, you must embed the document directly into a PDF viewer on your website. However, the built-in features of WordPress do not support embedded PDF files. To address this issue, we will show you how to use a free plugin to embed a PDF document on your WordPress site.

This post includes:

• When Not to Embed PDF Files
• How to Embed a PDF File Into Your WordPress Site
• Final Thoughts

When Not to Embed PDF Files

If you can't avoid embedding a PDF file into your website, you should think twice about it. PDF files embedded in websites should not be used for several reasons:

• PDF files are not responsive. This means that it does not adjust to the size of the viewer's screen. As a result, PDFs on mobile devices such as smartphones are frequently barely readable.
• PDF documents are not part of your page's content. They are always separate files that are loaded in conjunction with your page. This means that Google does not consider the content of your PDF document to be part of your page, and people will be unable to find that page even if the answer to their question is in your PDF.
• PDF files are frequently large. A PDF file that is several MB in size takes a long time and a lot of bandwidth to download. This is especially aggravating for visitors who use mobile devices with poor connections.

Consider reorganizing your content to fit as part of your website and inserting your website content directly into your website as text, images, and so on, rather than embedding a PDF file.

How to Embed a PDF File Into Your WordPress Site

Despite the disadvantages, you will need a WordPress plugin if you want to embed a PDF file into your WordPress site. A good solution for this need is PDF Embedder, a free plugin on wordpress.org.

• Open the backend of your WordPress website and go to Plugins.
• Click the Add New button at the top of the page and search for the PDF Embedder plugin.
• Install and enable the PDF Embedder plugin.
• Go to Media.
• Upload the PDF document to your WordPress media library.
• Go to the Edit Post dialog of the post or page, where you want to embed your PDF document.

The steps that follow are dependent on which editor or page builder you use on your website. It may be required that you to work with some HTML code.

With Gutenberg:

• Click the small + button to add a new block to your content:
• Select the PDF Embedder block.
• In the inserted block, you can now select the PDF document that you have previously uploaded for embedding.
• In the right sidebar of the Gutenberg editor, you will find additional settings for the block, such as the height or width of the PDF Viewer block.

Without Gutenberg:

• You have to add the following HTML snippet in your editor in text mode;

<div class="wp-block-cgb-block-pdf-embedder">
    <iframe class="wp-block-cgb-block-pdf-embedder-iframe" src="https://example.com/wp-content/plugins/algori-pdf-viewer/dist/web/viewer.html?file=https://test.example.com/wp-content/uploads/demo-doc.pdf" style="width:600px;height:300px"></iframe></div>

• If you want to resize the embedded PDF document, you must replace the size in the width:600px;height:300px part of the code snippet.

Final Thoughts

Both methods mentioned in this article are viable options for embedding a PDF file in WordPress. Choose the method that best meets your needs and skill set. You can then quickly create, embed, and display a variety of PDFs on your website, engaging and serving your audience.

Related articles

• How To Embed TikTok Posts in Your WordPress Website
• How to Transfer WordPress.com to WordPress.org
• How to Properly Move from Squarespace to WordPress
• How to Split a Subsite From a WordPress Multisite Network
• How to Selectively Enable Gutenberg Block Editor