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”:
This will create a link with the name of the PDF file as the anchor text. You can modify it if needed.
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”.
From the post editor, insert a PDF file from the media library. The plugin will make a shortcode appear instead of the regular link:
Preview the post to see the PDF document embedded in the WordPress post:
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:
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”.
You can modify the global height and width parameters – along with a bunch of other stuff:
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.
This is a guest post by Stéphane Brault. Stéphane is a programmer and sysadmin with over 20 years of experience. He specializes in Linux server management and PHP development. He is the owner of WebHostingHero.com, a website providing free tools and tutorials for webmasters.