Not sure how to embed PDF in WordPress? Still hesitating? Sometimes you may want to embed a PDF file in a post or page:
- Book authors may wish to provide readers with free copies.
- Add a product catalog to your website.
- Share the design in PDF format with customers.
- You may be running a travel agency and want to show the itinerary of a travel package.
But there is a problem!
Although WordPress allows you to embed audio, video, and of course images, it cannot embed PDF files in your posts and pages. This feature is currently not available and may be added in the future.
If you want to add a PDF file, you can use Add media Option, insert it, and the link to the file will be added to your page. Your visitors can download it by leaving your website or view the file in a web browser.
But what if you want to embed a PDF file in a post and let visitors view it without leaving your website? Is there any solution? The short answer is yes.
Therefore, in this article, I will show how to embed a PDF file in a WordPress article or page.Before you start, you might want to use PDF editor. Then, whether you use the plugin or not, you can add it to your post. let’s start.
How to use plug-ins to embed PDF files
You can use many plugins to add PDF files to WordPress posts.
Step 1: Install the PDF embedder plug-in
Log in to your WordPress dashboard and go to Plugins> Add New. Search now PDF embedder In the search box. After finding the plug-in, just install and activate it. It’s simple, isn’t it?
Step 2: Set up the plug-in
Although you can start embedding PDF files after installing this plug-in, you can modify the settings first to make the embedded files look better.To open the settings page for this plugin, go to Settings> PDF Embedder From the left sidebar of the WordPress dashboard.
The free version of this plugin allows you to change the following:
- Width and height – You can modify the width and height of the PDF viewer.It accepts integer values (in pixels) or Maximum (100% width).
- Toolbar position – The toolbar of this PDF viewer allows your viewers to zoom in or out and go to the next or previous page. You can place the toolbar at the top, bottom, or both.
- Toolbar hover – You can choose whether you want the toolbar to be visible only when the mouse hovers over the document.
Now, these are common settings. But what if you want to change the settings of a specific file? Well, you can do this with the help of shortcodes. Below is an example:
[pdf-embedder url=”http://yoursite.com/wp-content/uploads/2019/01/April.pdf” width=”500″ toolbar=”top” toolbarfixed=”on”]
In the above example, the width is set to 500px, and the toolbar position is set to the top, the toolbar will be fixed. You can also set the toolbar to the bottom and the fixed toolbar to off.
The plug-in also has an advanced version that provides download buttons, track viewing and downloading, continuous page scrolling, and opening links in new windows.
Step 3: Embed the PDF file in your post or page
After finishing the settings, you can start doing dirty work. Now, whether you are using the classic editor or the Gutenberg editor, you can easily use this plugin to get the results you need.
If you are using Classic editor, Embedding PDF files is similar to what you do with images or videos.
First, create a new post or open an existing post, then click Add media Button.Now, upload your PDF file and click Insert post Button, a shortcode will be added to your post.
That’s it-now you can preview your post to check if it is working properly.
what is it about Gutenbergedit? Well, the PDF Embedder plug-in comes with a specific block. So, create a new post and click on the “add block” icon.Next, search PDF embedder Block and select it.
Finally, click the block to select (or upload) your PDF file, and your work is complete.
No matter which editor you use, this is the end result:
Although the PDF Embedder plugin does a good job, it is always good to have some alternatives. So now let me share some free and high-quality PDF viewer plugins, in no particular order:
PDF viewer for WordPress
WordPress PDF viewer has sold more than 3900 sales, and it is the best-selling PDF viewer plugin on CodeCanyon. It is a fully responsive and cross-browser compatible plug-in. This plugin allows you to enable or disable options such as printing, downloading, zooming, page navigation, and social sharing. You can also use Google Analytics in conjunction with WordPress to track the number of visitors who read your PDF.
Google Drive embedder
Google Drive Embedder is a free plugin that allows you to access your Google Drive from the WordPress dashboard and embed PDF, Word documents or spreadsheets into your posts or pages.However, to use this plugin, you must install Google Apps login The same-the purpose of this plugin is to connect your Google Drive to your WordPress website.
Algorithm PDF Viewer
Looking for a Gutenberg block plugin for embedding PDF files? You can try the Algori PDF Viewer plug-in. This free plugin is compatible with all web browsers such as Google Chrome, Firefox, Safari, Opera and Internet Explorer 11. It allows you to load multiple files in a single page and supports demo mode.
Real3D Flip Book WordPress Plugin
As the name suggests, Real3D FlipBook is a responsive and touch-friendly 3D FlipBook plug-in for displaying PDF and images. It is developed using HTML5 and does not require Flash. You can customize settings such as flip speed, flip sound, zoom level, and camera angle. This plugin also supports lightbox and full screen mode.
Embed any document Plus
Embed Any Document Plus is a similar plugin that allows you to easily upload and embed document files (PDF, Word, PPT, Excel, etc.) on your WordPress website. The plug-in adds an “add document” button above the visual editor. This will open the EAD Plus pop-up window from which you can select the document source. It is also tightly integrated with Google Drive, Dropbox and Box.com cloud services. You can stay in your WordPress site and upload files to the cloud service and embed from there.
After uploading or selecting a document, if you want to embed, you will also get an option to choose which document service you want to choose to embed your file. The plug-in will automatically recognize the file format and recommend you to check it. The viewer can handle files up to 5 to 8MB. For larger files, the developer recommends uploading them to Google Drive and embedding from there.
How to embed PDF files without plug-ins
Well, if you are one of the people who have been looking for a solution without plugins, then this section is for you. We can of course embed PDF files in WordPress posts and pages without having to install another plugin.
The idea is simple-you have to upload the PDF file to your Google Drive account, and then use the iframe code to embed the file on your website. Although this method is safe, the only problem is that it uses an iframe.
step 1: go Google Drive And log in to your account (just sign up for a free Gmail account to get 15GB of Drive space for free).
Step 2: Upload the PDF file to embed the WordPress post here.To do this, click new From the left sidebar of your Google Drive account, select upload files, And upload the file from the local computer.
Step 3: After uploading the file to your drive, double-click it to preview the file.Now, click on the 3 vertical dots in the upper right corner (more actions) and select Opens in new window.
the fourth step: In the new window, click “More Actions” (3 vertical dots in the upper right corner) and select share.
Step 5: A pop-up window named “Share with people and groups” and “Get link” will open.Here, click Change to anyone with the link In the “Get Link” section. This ensures that anyone with a link to the PDF file can view it. If you don’t do this, the file will remain private and will not be visible to visitors to your website.
You should see the following confirmation message:
Once you click complete.
Step 6: Now it’s time to get the embed code that we will use in the post.To do this, click “More Actions” again and select Embed the project.
Step 7: This will open a pop-up window where you can copy the iframe code.
Step 8: Go to your WordPress dashboard and create or edit the post or page you want to embed in the PDF file.Now if you are using Classic editor, Just go to the “Text” tab and paste the code:
for Gutenbergedit, You have to add a new block, search for Custom HTML, and finally add the iframe code in the Custom HTML block:
Step 9: That’s it-now preview your post or page to check your embedded PDF file.
Endnotes on how to embed PDF files in WordPress
WordPress allows you to link to your PDF files-but you cannot embed them. However, this tutorial solves this problem. It shows how to embed PDF files in posts or pages, just like images and videos, with or without plugins.
Have you ever used any of these two methods to embed PDF files on your website? Do you have an alternative plugin and think it is better than the one mentioned in this article? Let me know what you think in the comments section.