I actually read about this little feature a while back…like almost a year or so ago. I thought it was a neat feature, I just really had no use for it.

Recently though, I wanted to embed a PDF into a webpage and remembered seeing this article from last year. I immediately went out to create a simple, useful function to be able to use this in WordPress.

After jacking with the code for a bit, I ran it by Shat who always helps fix up my code. He tweaked it, and stripped out extraneous code that I had to make it easier to use. Thus, Shat and I present the Google Document Viewer functions hack.

Add this to your functions.php file and you’re in business to use the Google Document Viewer shortcode to display a PDF, PPT, or a TIFF file inline.

Functions Code

Title: Google Document Viewer in WordPress
Author: Travis Quinnelly & Justin Shattuck
AuthorURI: http://www.tquizzle.com

Usage: You can use this by adding this to your functions.php file in your WordPress theme directory and passing it variables.
	1. path to document (.ppt, .pdf, .tiff) * Mandatory
	2. iframe width in pixels
	3. iframe height in pixels
	4. any inline CSS styling elements you wish
function google_doc_viewer($atts, $content = null) {
      "width" => '600',
      "height" => '800',
      "path" => '',
      "style" => ''
   ), $atts));
   return '
<iframe style="'.$style.'" src="http://docs.google.com/viewer?url='.$path.'&embedded=true" frameborder="0" width="'.$width.'" height="'.$height.'"></iframe>';
add_shortcode("docview", "google_doc_viewer");


We’ve made it simple to use, just like all other shortcodes. And by simple, I mean simple! As you see above, the width, height, path, and style are all things to pass to the shortcode. The only one that’s obviously mandatory is the path. The function already sets some height/width settings and those are easily changed in your function. I like 600X800 so that’s what the default here is.

Simply type: [docview width=”yourvalue” height=”yourvalue” path=”pathtofile” style=”extrainlinestyle“]

Usage variables

  • width = enter specific width you’d like if it differs from the default values
  • height = enter specific height you’d like if it differs from the default values
  • path = enter full url path to document to render *mandatory
  • style = enter any extra inline styling you’d like added to the iframe html element


Here’s an example of my code in use with “The Anatomy of a Large-Scale Hypertextual Web Search Engine” by the now infamous Sergey Brin and Lawrence Page.


TQuizzle.com is my place to talk about whatever. I really don't post here much anymore what with all the other domains I own, but I'm putting it up on GitHub so that it can be seen for archive puposes.