How to Easily Display PDF Files in WordPress

Posted on Updated on

The power of WordPress lies in its tremendous flexibility. It can cater to a wide variety of websites with different types of media. This is accomplished through its powerful plug-in architecture. For example, if you want to display PDF files on your blog, there are multiple ways to do so. If you search on the web, you will see a few people suggest built in options for achieving these using the <embed> tag. Unfortunately, I haven’t had success using it with the latest WordPress installations, so I needed to use another solution. Other plugins require you to choose a new media type in the visual editor, but with WordPress 3.5, the media selection screen has changed and some of them don’t work too well anymore. To easily display PDF files in WordPress, we’re going to use the Google Doc Embedder plugin.

Displaying PDF Files

After downloading and installing the plug-in, start a new post with the visual editor. At the top formatting bar, you should see a new icon. When you hover over it, it says “Google Doc Embedder” as shown in the screenshot below.

 Embed icon

Using this plug-in will create a short code in your post that will specify the properties of the PDF file. You can add PDF files in two ways – either using a filename, or a complete URL. If you’re just going to use the filename, you have to make sure that the “base URL” is already set in the options for the plug-in. We’ll look at that later. For now, upload the PDF file you want to display either to your WordPress installation, or a CDN and, or any other publicly available URL. Click the icon and enter the URL in the box provided. Other options include the ability to include the download link for the PDF file. We will see later that you can create many profiles for different PDF documents that regulate its security.

The options in this screen allow you to override any default settings in your profile. In its simplest form, the plug-in creates a short code called [gview] with just one parameter – the filename as shown in the screenshot above. Here is what the final output looks like when you preview or publish your post.


As you can see, it’s quite an elegant display with basic toolbar options on top. You can zoom in and zoom out, change the page number, and choose to open the file separately in Google Docs.

Settings and Options

Under the “Settings” tab in the dashboard, you can set the options for viewing the PDF. You can go with the standard view with the regular toolbar options, or choose the “Enhanced” viewer instead. There are some pretty cool options here including the ability to display a mobile toolbar, remove the toolbar altogether, or choose the icons you want to show the user. You can customize it to fit in with the theme of your site by selecting the background color as well as the page border. For more detailed styling, you can include a CSS file targeting the above portions too.


If you’re showing stuff that you generally don’t want people to freely access, you can also prevent people from selecting content for copying and pasting. Like I said, it all depends on what your requirements are.

For different types of uploads, you can create “profiles” with varying security options ranging from extremely lax to tightly locked down. If you have a document heavy site, you can use this to minimize load on your backend since the entire file is loaded via JavaScript. Best of all, no code is included on pages that don’t show any document. The Google Doc Embedder plugin is one of the most versatile and full featured tools you can use to easily display and embed content on your website.

One Reply to “How to Easily Display PDF Files in WordPress”!

  • “If you’re just going to use the filename, you have to make sure that the “base URL” is already set in the options for the plug-in. We’ll look at that later.”

    …..Did you post this followup?

Leave a Reply

Your email address will not be published. Required fields are marked *