How to Embed Documents in WordPress using Shortcode

There are times when we want to display a document on our website, instead of just providing visitors with a download link to that file. From a visitor’s point of view, I consider it essential to have the ability to peek into the content of the documents before downloading them, just to make sure I’m downloading the right files. This is where the role of Document Viewers come into play, and many document sharing sites like SlideShare, Scribd etc. have their own custom document viewers, which allow us to view documents, presentations, spreadsheets etc. without even downloading them on our system.

This is what we’re seeking for, in WordPress. To embed a document in WordPress, a document viewer is the first and only major requirement, and Google provides us with one. Google Docs Viewer is free to use, and could be easily embedded into almost any site, using IFrames. In the following two-steps tutorial, we’re going to embed a PDF file by creating a new shortcode, and using it in a WordPress Post or a Page.

Step 1: Creating Shortcode

To create a new shortcode, navigate to Appearance >> Editor, and open your Theme Functions file (usually functions.php). Now, append the following code at the end of that file, and save it.

function loadviewer($attr, $url) {
return '<iframe src="http://docs.google.com/viewer?url='.$url.'&embedded=true" frameborder="0" style="width:'.$attr['width'].'; height:'.$attr['height'].';">Unable to load file. Make sure your browser support IFrames.</iframe>';
}

add_shortcode('doc_embed', 'loadviewer');

The above code creates a new shortcode [doc_embed] with 2 attributes – Width, and Height. Upon inserting the [doc_embed] shortcode, the loadviewer() function is called, with width and height of the document viewer passed as attributes. The function, in return, generates an IFrame loading the file, whose link is provided between the shortcode tags, using Google Docs Viewer.

Step 2: Using Shortcode

After saving the above code in your Theme Functions file, open the WordPress Post or Page, where you want to embed the file, and use the shortcode in the following manner.

[doc_embed width="600px" height="550px"]
http://exampledomain.com/link-to-your-file
[/doc_embed]

Make sure you specify the complete path (with proper file extension at the end) to the file between the shortcode tags, otherwise, it won’t load the file.

Now, save your Page or Post, and view it from the front-end. It should look similar to this.

Final Thoughts

As you may notice, it’s very simple to embed documents in WordPress. You just need to perform “Step 1” only once, and use shortcode every time you want to display a document on your site.

There are also numerous WordPress plugins available, which lets you do exactly the same thing. But as always, my personal advise is to avoid them whenever possible. However, if you’re uncomfortable editing your theme files, there’s a Google Document Embedder plugin, which I specifically want to point out. It also provides you with a few more configurable options, so you may want to check it out.