How to link to a PDF in WordPress

How to link to a PDF in WordPress

From time to time, you might need to include different types of content in your posts. In WordPress, it's easy to insert images. However, the insertion of PDF documents is impossible natively. You can link to a PDF file at best, but you cannot display it in your posts.
In this tutorial, I will show you two different ways to insert PDF documents into WordPress posts.


1. Linking to a PDF document from the media library

If you don’t need to display a PDF file, you can use the Media Library. From the post editor, click the “Add Media” button. Upload the PDF file as you would do for an image and click “Insert into post”:

Upload PDF to WordPress

This will create a link with the name of the PDF file as the anchor text. You can modify it if needed.

WordPress - Link to PDF From Media Library

Clicking this link will make your browser open or save the PDF document.
This might be a good enough solution for the occasional PDF file, but if you need to display the content of PDF files within your posts, you’ll need a plugin.

2. Embedding PDF documents into your content

From the WordPress dashboard, go to “Plugins > Add New”. Type “pdf embedder” in the keyword search. Click on “Install Now” and then on “Activate”.

PDF Embedder Plugin for WordPress

From the post editor, insert a PDF file from the media library. The plugin will make a shortcode appear instead of the regular link:

PDF Embedder Shortcode

Preview the post to see the PDF document embedded in the WordPress post:

WordPress PDF Document Viewer

The use of Javascript over Adobe Flash eliminates compatibility issues. The embedded PDF viewer displays a nice toolbar with a page navigator. The premium version of the plugin allows you to customize it if needed.
By default, the viewer width is set to 100%. You can adjust it by appending this to the shortcode:

width="500"

Replace the value with whatever width you want. The shortcode should look something like this:

PDF Viewer Width

You can use the following parameters to customize the toolbar:

  • toolbar = top|bottom
  • toolbarfixed = on|off

If you wish to control the viewer width for mobile devices, you will need the premium version.

Customizing the PDF embedder plugin

To avoid setting the viewer options through the shortcode, you can set these globally. From the WordPress dashboard, go to “Settings > PDF Embedder”.

WordPress PDF Embedder Settings

You can modify the global height and width parameters – along with a bunch of other stuff:

PDF Embedder Viewer Settings

You can change the location of the toolbar, the height of the PDF, and determining how the toolbar appears. You can change these on a case by case basis using shortcodes by referring to the documentation.

Using the PDF Embedder Plugin With a CDN

If you are using a CDN (Content Delivery Network), you will need to do some tweaking. For security reasons, web servers prevent browsers from displaying content from a different source than the website. If you need to embed PDF files hosted on a CDN, you will need to make these changes:
Add this code to the “.htaccess” file located at the root of your website:

<FilesMatch ".pdf">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Clear the CDN’s cache and check that the PDF viewer is working. If you are hosting the PDF documents on Amazon S3 or Cloudfront, read the documentation here.

Conclusion

The paid version of the plugin provides additional options such as PDF protection. This allows you to prevent visitors from downloading or printing the original PDF document. Other features include the ability to scroll PDFs continuous scroll and full-screen mode.

But if you can do without the bells and whistles, the base PDF Embedder plugin is a great tool. It’s easy to use and gets the job done.