There may be times when you would like to embed a PDF file in your post or page:
- A book author may want to give readers a free copy.
- To add product catalogs to your website.
- To share your creations in PDF format with your customers.
- You can run a travel agency and want to display the itinerary of the tourist packages.
But there is a problem !
Although WordPress allows you to embed audios, videos, and of course, images, it is not possible to embed PDF files in your posts and pages. This feature is not available at this time, maybe it will be added in the future.
If you want to add PDF file, you can upload the file using option Add a media, insert it and the link to this file will be added to your page. And your visitors will be able to download it or view the file in the web browser when leaving your website.
But what if you want to embed PDF files in your articles and let your visitors see it without leaving your website? Is there a solution to this?
The short answer is YES.
So in this post, we will show you how you can embed PDF file into your WordPress posts or pages. Before you start, you will probably need to create a well-formatted and neat PDF document using a PDF editor. Then you will be ready to add it to your articles with or without using a plugin.
But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog
Then back to why we are here.
How to add a PDF file with a plugin
There are a lot of plugins that you can use to add PDF file to your WordPress post.
However, we will use WordPress PDF Embedder plugin. This is a WordPress Plugin free which is available in the WordPress Plugin Directory. The best thing about this plugin is that it uses javascript to do its job and not third party service or iframes.
Step 1: Install the Embedder PDF plugin
Log into your WordPress dashboard and navigate to the menu Extensions> Add Search PDF Embedder in the search box. Once you find the plugin, just install and activate it. You can also discover our step by step guide on how to install a WordPress plugin.
Step 2: configure the plugin
Although you can start to embed your PDF files once you install this plugin, you can change the settings first to make them look modern. To do this, go to Settings> Embed PDF from the left sidebar of your WordPress dashboard.
The free version of this plugin allows you to modify the following:
- Width and height - You can change the width and height of the PDF viewer. It accepts integer values (in pixels) or Max (100% width).
- Bar location Tools - The toolbar of this PDF viewer allows your audience to zoom in or go back and go to the next or previous page. You can place the toolbar on top, bottom, or both.
- Hover over the toolbar - You can select whether you want the toolbar to be visible only when the document is hovered with the mouse.
Now these are the universal settings. But what if you want to change the settings for a specific file? Well you can do that with the help of shortcodes. Here is an example :
[pdf-embedder url = "http://yoursite.com/wp-content/uploads/2019/01/April.pdf» width = "500" toolbar '"top" toolbarfixed "on"]
In the example above, the width is set to 500px, the location of the toolbar is set on top, and the toolbar will be fixed. You can also set the toolbar on the bottom and the fixed toolbar at the end.
This plugin also has a premium version which offers features like the download button, view and download counters, continuous page scrolling, and links opened in a new window.
Step 3: Embed PDF file in your post or page
Once you're done with the settings, you can start getting the job done. Now whether you are using the classic editor or the Gutenberg editor, you can easily use this plugin to achieve the desired result.
If you use classic editor, embedding a PDF file is similar to what you would for an image or video.
First, create a new post or open an existing post and click on the button Add media.Upload your PDF file, click Insert in the button publication, and a shortcode will be added to your post.
That's it - you can now preview your post to check if this plugin is working properly or not.
What about Gutenberg Editor ? Well, the Embedder PDF plugin comes with a specific block. So create a new publication and click on the icon Add block. Then find the block Embedder PDF and select it.
Finally, click on the block to select (or download) your PDF file and your work is done.
Here's the end result, no matter which editor you use:
Some popular PDF viewer plugins
Although the WordPress Plugin PDF Embedder does a good job, it's always good to have a few alternatives. So let me now share some WordPress plugins premium PDF viewer, in no particular order:
1. DK PDF Generator
Creating PDF versions of your posts and sharing them in sharing communities can be a great option for traffic management.
Le WordPress Plugin premium DK PDF Generator allows you to easily choose pages, posts as well as custom post types that can be shared or downloaded as PDF.
See our article on 30 things to do on your blog posts after they are published
With these, you can even add a cover and table of contents (with interactive links) to your PDF file.
Download | Demo | Web hosting
2. PDF Product Catalog for WooCommerce
It is a very useful premium WordPress plugin from WooCommerce, which will help you to download the complete list of products from your online store in PDF format.
This plugin comes with five default PDF templates, but you can create your own according to your needs with simple HTML and CSS.
Read also our 9 WordPress plugins to manage your product catalog
It also provides you with a shortcode creation and insertion option to add PDF download buttons to any article or page.
Download | Demo | Web hosting
3. WordPress social sharing and print post page to pdf plugin
This premium WordPress plugin is leaving exclusive WordPress social sharing plugins, the simplest, and optimized with great features that you will see by consulting its demo. It offers many features such as full sharing of a blog post or web page on any social network, and downloading these in PDF format.
With this WordPress plugin you will be able to easily redirect website visitors to your social media accounts and increase your presence On the latter.
Download | Demo | Web hosting
How to add PDF file without plugin
Well, if you are one of those who are still looking for plugin free solutions then this section is for you. We can certainly add PDF file in WordPress posts and pages without installing yet another plugin.
The idea is simple: you need to upload your PDF file to your Google Drive account, then use the iframe code to embed this file into your website. Although this method is safe, the only problem is that it uses iframes.
Step 1 : Go to Google Drive and sign in to your account (you just need to sign up for a Gmail account to get free of charge 15 GB of space).
Step 2 : Upload the PDF file you want to embed in your WordPress post. To do so, click on New on the left sidebar of your Google Drive account, click on Import a file and upload the file from your computer.
Step 3 : Once the file is uploaded to your google drive, double click on it to preview the file. Now click on the 3 vertical dots (More actions) present in the upper right corner and select Open in a new window.
Step 4 : In the new window, click on More actions (the 3 vertical points in the upper right corner) and click on Share.
Step 5 : A pop-up called "Share with people and groups" and "Get a link" will open. Click here on Edit to anyone with the link in the "Get a link" section. This is to ensure that anyone with the PDF file link can view it. If you don't, the file will be kept private and not visible to your website audience.
You should see the following confirmation:
Once it's done, click Completed.
Step 6 : Now is the time to get the embed code that we are going to use in our post. To get this, click again on More actions, select Integrate an element.
Step 7 : This will open a pop-up window that allows you to copy the iframe code.
Step 8 : Go to your WordPress dashboard and create or edit the post or page where you want to embed the PDF file. If you use classic editor, just go to the Text tab and paste the code:
For Gutenberg editor, you need 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 PDF file.
Summary
WordPress allows you to attach your PDF files, but not to embed them. However, this tutorial fixes this problem. It shows how you can embed your PDF files into your posts or pages, just like your images and videos, with or without using a WordPress plugin.
Discover also some premium WordPress plugins
You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
1. Backup And Restore
Backup And Restore is a premium WordPress plugin that will help you schedule your website backups to a local server or to different cloud servers such as Dropbox, Google Drive and Amazon S3. You will therefore be able to restore your entire website, including the database, from existing restore points with just one click.
Downloading your website, database and all your backups will also be possible. This plugin will also help you manage the backup and restore processes in a simple, secure and reliable way.
Its features include: full website backup, Amazon S3 backup, Google Drive, dropbox, the disk space manager, the auto-deletion of old backups, the complete restoration of your website, support for multisiteEtc. ...
Download | Demo | Web hosting
2. Yellow Pencil: Visual CSS Style Editor
Yellow Pencil is a visual style editor that you can use with any theme to personalize your website in minutes (fonts, colors, animations and more…).
This premium WordPress plugin will create CSS styles in background while you play with the colors as if it were a game. It was designed for beginners as well as experienced users.
Discover also our 5 plugins WordPress to show notifications
No coding knowledge is required. However, the WordPress plugin has a good CSS editor for those who like to code. You can code live with this editor and customize your CSS.
Download | Demo | Web hosting
3. Quack Chat Live Chat System
Quack Chat is a WordPress extension premium that easily integrates with your website and offers a user-friendly interface for your customers. It is an online chat that can be used from any computer or mobile device.
As functionalities it offers among others: support for instant notifications via messages or emails, an audible notification system, automatic archiving (history) of chats, a user-friendly control panel, a customizable chat window, an automatic and customizable greeting message, support for automatic scrolling on the chat page etc ...
Download | Demo | Web hosting
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- How to Add Drip Content to a WordPress Website
- How to clear a cache in WordPress
- 10 WordPress WooCommerce plugins to use on your blog
- 6 WordPress plugins to convert currency on a blog
Conclusion
Here ! That's it for this tutorial. We hope this article has helped you embed PDF files in WordPress. Do not hesitate to share with your friends on your favorite social networks.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on WordPress blog creation.
If you have suggestions or remarks, leave them in our section Comments.
...
