How to Display PDF Files in WordPress

Watermark WordPress Files offers a simple way to preview PDF files embedded within pages or posts. So your visitors can view it directly on your site without leaving it, which will keep them stay on your site longer and might increase the conversion rate.

In this article, we will show you how to display PDF files in your WordPress content with Watermark WordPress Files plugin.

Requirement:

WordPress Editor

Classic Editor

Once activating our plugin, go to edit or create a new page and click on our PDF viewer button. It will bring up a popup where you select which PDF file to embed into the content.

Gutenberg Block

Step 1: Search and add our “Protected PDF” block into your content

Step 2: Click “Media Library” then choose your desired PDF file from your library or upload a new one. You can optionally protect file with Prevent Direct Access plugin to prevent users from downloading them.

Step 3 (optional): Under our Protected PDF block settings, you can change the PDF viewer’s width and height. Leave them empty for default values.

Shortcode

If you’re using a page builder plugin instead of WordPress default editor, you can use the following shortcode instead.

[pda_pdf_viewer id=2454 title="your-file-title"]

The “id” attribute is required and can be found when you hover on the filename.

You can optionally change the width and height of the viewer by adding some additional parameters to the shortcode as follows:

[pda_pdf_viewer id=2454 width="500" height="725"]

PDF Viewer

Once published, your PDF content will display under our Viewer as shown below.

This PDF Viewer provides some basic features:

  1. Use “Next” and “Previous” buttons (or Up and Down on your keyboard) to navigate across pages or scroll continuously between pages.
  2. Go directly to a specific page by typing page number.
  3. Customize PDF content size under view, including automatic zoom, actual size, fit page, full width plus the default zoom in and out.
  4. Get a specific link to your current page to share. Once clicking on the Bookmark button, copy the bookmark link displaying under the address bar.
  5. Rotate the PDF clockwise and counterclockwise.
  6. Download the PDF file. This button is hidden by default
  7. Find specific text or keywords the document content.

Display multiple viewers per page

Since Watermark version 1.5.0, you can display multiple viewers per page by adding watermark=true attribute to our [pda_pdf_viewer] shortcode.

Example Shortcode

[pda_pdf_viewer id="file-id" multiple="true"]

Please note that this feature does not work with PDF files hosted on S3 bucket.

Display watermark

You can add a text watermark over the PDF viewers to prevent them from being shared.

It’s important to note that the watermark only appears in the viewer. It won’t be shown in the PDF file if the downloading is permitted.

Example Shortcode

[pda_pdf_viewer id="file-id" multiple="true" watermark="true" watermark_text='Presented to %user_email% only']

Available Attributes

The following attributes are shown within the sample shortcode above.

  • watermark – Determine if the watermark is shown in PDF viewer
    • true: Show watermark
    • false: Not show watermark (default)
  • watermark_text – Set the text to be used as your watermark.
    • Default: Protected by Watermark WordPress Files
    • Don’t accept HTML tags
    • Use the following dynamic texts to dynamically display the details of the user who is viewing your PDF file
%user_id% replaced with user id
%username% replaced with username
%display_name% replaced with user’s display name
%user_firstname% replaced with user’s first name
%user_lastname% replaced with user’s last name
%user_nicename% replaced with user’s nickname
%user_email% replaced with user’s email
    With the non-logged-in users, the dynamic text will become empty.
  • watermark_font_size – Set the font size of your watermark text
    • Default: 30px
  • watermark_color – Set the color of your watermark text
    • Default: #000000
  • watermark_pos_x – Define the abscissa of your’s watermark position
    • Default: 50px
  • watermark_pos_y – Define the ordinate of your’s watermark position
    • Default: 50px
  • watermark_pos_unit – Set the unit of watermark_pos_x and watermark_pos_y attributes
    • px: pixels (default)
    • %: percentage
  • watermark_deg – Set number of degrees by which the watermark shall be rotated clockwise
    • Default: 0 deg
  • watermark_opacity – Specify the transparency of your watermark text
    • Default: 50

Secure PDF files

The following functions will be disabled by default to make it difficult for viewers to copy, share, or download your files.

  • Right-click or select text on the viewer
  • Inspect elements to get PDF file link
  • Download button on the toolbar

However, these minor tricks can’t prevent download tools such as IDM from downloading your files. To protect your files more effectively, you can consider applying a watermark to your files as well as storing them on a private S3 bucket.

Show download button

In the opposite case, if you want to enable downloading, go to the plugin’s settings page and turn the corresponding option on.

To display the download button out of the viewer, simply use the shortcode below.

[pda_pdf_download label="Download"]
Lasted updated on January 15, 2021