WordPress is a modern and flexible website publishing platform. One way you can see this is through its handling of the media. You can upload almost all types of files to your site through the media library, but for some files, you need some additional support. If you want to learn how to embed PDF files in WordPress, you need more steps than simple image or video embedding.
because WordPress only provides universal embedding, you need to use a server to host files or install plug-ins for most use cases. The good news is that both solutions are appropriate and, most importantly, easy to implement.
in this article, we will show you how to embed PDF files in WordPress using Google Drive, WordPress blocks, and plug-ins. First of all, it’s worth discussing why you embed PDF and pointing out the difference between simple upload and embedding.
hide why
embeds PDF files in WordPress you may already know why you want to embed PDF files in WordPress, although you may not know the benefits you will get. There are many, here are just a few:
PDF is ideal for use as a sampler for a complete product or service. For example, if you are a graphic designer or writer, you can make a PDF for download.
- depending on the content, some PDF can be used well as reusable elements. The registration form is a good example, or a document of terms and conditions.
- if you delegate white papers or reports, you do not have to enter them into WordPress. Instead, you can provide files for download or viewing. The last point of
- presents common use cases for PDF. For example, due to the time-consuming nature of the conversion, you may not want to recreate a valuable PDF as an article on your site. However, you can embed the file and retain all dynamic and interactive elements of the native content. The difference between
embedding and uploading PDF files
seems obvious to some people, but there is a difference between embedding PDF files and uploading PDF files. Yes, you can upload any file to WordPress (except SVG at the time of current writing), but that doesn’t mean you can view it.
to do this, you need some way to get WordPress to “talk” to the file to display it. This is where the dedicated PDF viewer works. In the past, WordPress was not the best at embedding files. However, with the advent of the Block Editor, you will get a more consistent workflow that is more consistent with other media types in WordPress-more later. How to embed a PDF file
in WordPress in
to embed a PDF file in WordPress, we will introduce three methods. Each will be suitable for different applications and workflows. Therefore, your choice is a personal decision:
if you use Google Drive to host your files, you may want to add embedded code to WordPress’s HTML. The
- WordPress Block Editor has a way to view PDF, which is probably all you need to display them on the front end.
- Plug-ins such as PDF Embedder allow you to display PDF and provide readers with a full-featured experience.
- the solutions we offer are not in any order, and no one is more “correct” than the other. Therefore, please look at each one and select one that suits your overall goal.
1. Using the Google Drive embedded file
many website owners use Google products, and for those who invest in the ecosystem, you will understand the importance of Google Drive.
if you host PDF files in the cloud and do not want to move them, you can embed them in your WordPress site relatively easily. First, go to the file you selected in Google Drive, and then click the “Share” option under the “more actions” menu:
welcomes you to choose a combination of settings that match the experience you want. When you’re done here, return to the more actions menu and open the file in a new window:
you’ll notice that the options in the menu have changed. If you open more action menus, there will now be an Embed item… Link:
clicking on it will bring up a dialog box containing some HTML code. You should copy this and then return to WordPress:
. At this point, you can return to WordPress and open the page from which you want to embed PDF. This time, in the more actions menu in the Block Editor, open the Code Editor:
your job here is to find the correct location for your embedded code and paste it into:
after clicking the exit code editor link, you will see the embedded:
on the page:
however, while this is easy to implement, it is a practical way to display PDF because it is iframe and you don’t have many options. For more flexible methods, please continue to read!
2. Use WordPress blocks to add viewable PDF files to your site
compared to the old classic editor, the block editor allows you to handle various media types in a consistent manner. This is most obvious when you embed a PDF file in WordPress.
you can use file blocks to embed various files, but in this case, we can use it to embed PDF. If you navigate to the article or page you want, you can search for file blocks, and (much like an image) you will notice a file uploader dialog box:
If you add the file here, it will appear as an inline element in a nice viewer:
you will also see the full URL path and download button for the file. You can change this setting in the dedicated block settings in the editor sidebar:
, in our opinion, is a better solution than embedding Google Drive, but it still provides an easy experience that you can better experience by using plug-ins. Let’s discuss this option next.
3. Use plug-ins to embed PDF files in WordPress
if you want to embed PDF files in WordPress on a regular basis, or if you want to provide a first-class reading experience, then plug-ins are your best choice. There are several options to choose from, and in fact, any option would be a good solution.
however, we like PDF Embedder because it has a lot of installations, a lot of positive reviews (so other users like this plug-in), and it is updated regularly. After
installs and activates the plug-in, go to the “Settings” & gt; “PDF Embedder” page in WordPress:
there is not much here, because the audience can use it right out of the box. However, you can change elements such as minimum and maximum sizes, certain toolbar specific settings, and so on:
to embed your PDF, simply add a PDF embedded block to your content, and then select your file from the uploader:
Please note, you can also view the blocking settings here and adjust them as needed. If you haven’t touched the global settings before, you may need to make some adjustments to better suit your content:
, however, this will provide you with a better viewer than Google Drive’s embedded or native WordPress options. In addition, you can upgrade to the advanced version of PDF Embedder for more functionality, better support, and so on. How
embeds readable and optimized PDF
in WordPress, just as you want to optimize images and videos, you also need to optimize PDF files. Here are some quick tips to help you provide great-looking small files and keep them rich:
- your typesetting is as important as the font on your site. We recommend that you stick to two fonts and set them to fit all eyes.
- you can optimize PDF as if it were an image. Sometimes the size of a PDF can be megabytes, so you want to make it as small as possible. ShortPixel has an excellent PDF compressor for image optimization.
- says that if you include images in PDF, make sure they also have the correct level of optimization. In general,
treats your PDF as an article or page on your site: optimize it for search and speed without worrying about interactivity. The file will render well and provide the same dynamics as the native content.
Summary
No matter what media you put on the WordPress website, you can use it (can withstand SVG). In terms of PDF, WordPress has an excellent native experience, which is probably what you need. However, if you want to have a more comprehensive experience when embedding PDF files in WordPress, there are other factors you can consider.
for example, if you host your files in Google Drive, you can “hard-code” embedded HTML into your content. This will provide a good viewer, but it is not flexible, and if you delete the file later, it may end with broken links and lost media. Instead, the plug-in will provide you with all the functionality you need. PDF Embedder is excellent, but there are other solutions. The task here is to choose the best for your needs and workflow.
