Website maintenance

Step-by-Step Guide to Embedding a PDF File in Your WordPress Webpage

Embedding PDF WordPress

Are you looking to embed a PDF in your WordPress post? Maybe you have a new product, and you wish to share its catalog with your readers, or an article that would throw more light on your blog post. Whatever the purpose or the content of your PDF file may be, embedding it in your WordPress page or post is a great way to share your content with your webpage’s visitors. You can choose to have them read, print, or download the file depending on how available you want to make it.

We would look at two easy and quick ways to upload PDF files to your WordPress web page or post. These methods are the free version of the PDF Embedder plugin and the option of no-plugins where the upload involves using Google Drive. These methods are quite easy to carry out, as you would see in the step-by-step illustration that would follow.

WordPress Support & Help Services

WordPress Maintenance Services

Embedding PDF files using WordPress Plugins

If you are a WordPress beginner and you want to embed PDF files on your page or post, this route is your best bet because it is an easy and quick option. The good thing also is that most of them are free. There are several available plugins to embed your PDF file; each option has some unique feature that it offers. Here are the available plugins for your use:

  • PDF Embedder’s free version: This plugin allows you to upload your PDF files and insert them straight into your website.
  • Embed PDF Viewer (free version): This one allows you to embed a PDF file in your media library or even from a third-party site through oEmbed
  • Google Drive Embedder(free version): This plugin lets you have access to your Google drive documents straight from your WordPress dashboard. Through this route, you can embed your PDF files directly into your WordPress page or post.
  • PDF Viewer for WordPress (premium version): This is a paid option because it comes with an array of remarkable features for your use. Some of these features include Google Analytics, advanced control over the display, and a strong admin panel amongst so many other great options.

Out of all these options stated above, the best we would recommend you to use is PDF Embedder. We advise you use it because not only is it a free plugin, it allows you to upload and embed your PDF files straight into any page or post on your WordPress site. Another great thing about it is that it uses JavaScript to embed, which allows you to customize the document’s appearance to suit your style.

Besides, another good thing about this plugin is that your server handles the JavaScript. Therefore, your computer is not exposed to any potential threat by a third-party server.

This is how PDF files would display on your webpage when you use the PDF Embedder:

PDF

PDF

As you can see, you can customize the appearance of your PDF file on your webpage.

Here is a step-by-step illustration on how to install the PDF Embedder plugin and use it

1st Step: Install the PDF Embedder Plugin on your Website

To do this, navigate Plugins on your WordPress admin dashboard click on it, and select Add New.

PDF

Once you get there, you search for PDF Embedder in the plugin search function. When you get to it, select the ‘Install Now’ button, then Activate. This step would install the PDF Embedder plugin on your site and get it ready for use.

PDF viewer Plugin

2nd Step: Configure the settings of your PDF Embedder plugin:

On your WordPress dashboard, Navigate Settings > PDF Embedder. This would lead you to the settings page of your PDF Embedder.

PDF

PDF

In PDF Embedder’s free version, there are limited options provided for you. These include:

  • Width and Height Adjustments: In the free version of PDF Embedder, you can set the width and height of your PDF file to your preference. If you do not have a specific width and height you want to work with, your embedded file would appear in its original size.
  • Toolbar Hover: While using this plugin, you have the option to either have the toolbar appear when a user hovers over the PDF file or be permanently visible.
  • Toolbar Location: You can also choose where to display your toolbar. It could be either at the bottom or top of your webpage. The toolbar also gives users room to either zoom out or zoom into the PDF file as well as navigate through the pages.

After you configure the settings to suit your preferences, always remember to save your changes by clicking the Save Changes button.

3rd Step: Upload and Insert your PDF

Open the web page or post where you wish to display the file. Navigate and select Add Media

PDF

PDF

When you access it, Navigate Upload File > Select Files. Select the PDF document from your computer’s library and upload it.

PDF

PDF

When you add the file to your WordPress Media library, choose your PDF from the uploaded items and click ‘Insert into Post.’

PDF

You would now see in your WordPress Post Editor, your PDF’s shortcode.

PDF

You can go ahead to publish your post. The front end of your WordPress website will display the PDF. Don’t forget to preview before publishing.

Embedding a PDF in WordPress through Google Drive

Google Drive is another method of embedding your PDF on your WordPress website. First of all, you are required to upload your PDF document to Google Drive then, using the iframe code, you can insert the file on your website. A PDF file embedded in your WordPress website through google drive would look like this when displayed:

Embedding a PDF in WordPress through Google Drive

Embedding a PDF in WordPress through Google Drive

Here is how to Embed your PDF on WordPress using Google Drive

1st Step: Upload your PDF to your Google Drive account if you have one. You can create one if you don’t. Navigate New > File Upload, then select the PDF from your computer to upload it.

PDF on WordPress

PDF on WordPress

2nd Step: Enable the PDF to be shareable

On the menu bar located at the top right corner, there are three dotted lines. Click on it and choose ‘open in a new window.’

PDF

When it opens, navigate the three-dotted lines and click Share. A pop-up would then appear. Select ‘Get Shareable Link’ to get your readers to view your PDF publicly.PDF

You can disable your file from being copied, downloaded, or printed. Select the Advanced options button and tick ‘Disable options to download, print, and copy for commenters and viewers.’ Then click Done.

HTML in WordPress

HTML in WordPress

3rd Step: Insert the HTML in WordPress

On Google Drive, select the three dots and click on ‘Embed Item.’ The pop-up will display an HTML code for you to copy.

HTML Code

HTML
Switch to WordPress, open the web page you want the PDF displayed, and change to text view. You can then paste the copied HTML code, preview and publish the post.

HTML

The two methods of embedding PDF documents in WordPress discussed here are equally good options. The choice is yours as to which appeals most to you. You can opt for any method depending on your style and how you want the PDF file to appear for your users or readers.

WordPress Support & Help Services

WordPress Maintenance Services

Related Posts

Leave a Reply