How to Embed PDFs in WordPress
How to Embed PDFs in WordPress
Updated on Dec 8, 2022
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
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 Algori PDF Viewer, 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 Algori PDF Viewer plugin.
- Install and enable the Algori PDF Viewer 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. The standard WordPress editor Gutenberg is explicitly supported by Algori PDF Viewer. All other editors will require you to work with HTML code.
With Gutenberg:
- Click the small + button to add a new block to your content:
- Select the PDF Viewer 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-algori-pdf-viewer"> <iframe class="wp-block-cgb-block-algori-pdf-viewer-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.
We hope you find this article useful. Discover more about FastCloud - the top-rated Hosting Solutions for personal and small business websites in four consecutive years by the HostAdvice Community!