Display PDF using Thickbox in a WordPress plugin

The ILC-PDFBox plugin for WordPress will allow you to display a PDF document that you embed in the post writing area using Thickbox, the jQuery modal window. In this way you don’t have to open a separate page to display it, you can speed up loading times by loading it only if it’s going to be read and you don’t waste excessive bandwidth.

All you have to do in order to use it, is uploading and installing it like any other plugin. Then, in the post writing area, just upload your pdf using the “Add Media” button, the one with the asterisc, and insert the link to the file. That’s it. Publish your post and when you now click the link, a Thickbox displaying your pdf will be launched.

pb

There are a few options for the plugin, accesible from the menu Settings\PDFBox Options. Here you can set the width and height of the Thickbox and add a custom CSS style. In addition to the .thickbox class added to the anchor, a .pdfbox class is added, in case you want to stylize it differently.

Finally, here’s a demo of the plugin in action. The first link displays the pdf using Thickbox and the second one is a feature requested by one of the readers on the comments, a direct link to download the pdf file.

Launch PDF file.

Download PDF

So, without further ado, here’s the ILC-PDFBox plugin for WordPress, download it, play with it, and let me know what you think about it.

Download ILC-PDFBox

I’ve tested this using WordPress 2.9.2 and 2.8, so it should be fine.

Liked this? buy me a coffee so I can stay awake doing more things like this.

Spread the word, share this post
[del.icio.us] [Digg] [Facebook] [Google] [LinkedIn] [Reddit] [StumbleUpon] [Technorati] [Twitter] [Yahoo!] [Email]

Tags: , ,

Posted on Monday, December 21st, 2009 in WordPress, jQuery.

“Display PDF using Thickbox in a WordPress plugin” received 34 comments! Add yours.

  1. Michelle December 22nd, 2009

    really great article, thanks

  2. Christy December 22nd, 2009

    That’s a very cool feature! I might make the box a little larger, though, to prevent so much scrolling. Great info!

  3. PDF’s tonen via een Thickbox December 28th, 2009

    [...] De zoektocht bleek lastiger te zijn dan ik had gedacht, maar na even doorzetten kwam ik de plugin ILC-PDFBox – heerlijke naam ook – tegen die precies doet wat ik nodig had. Het gebruik van de [...]

  4. MateMedia January 19th, 2010

    This plugin doesn’t work on wp 2.9. All that happens is that the file dialog box pops up and a blank window appears, presumably where the PDF file should be.

  5. Elio February 1st, 2010

    I’ve tested it in WP 2.9 and 2.9.1
    Could you ellaborate on the issues you’re experiencing?
    Thanks

  6. justin February 18th, 2010

    It’d be cool if you could optionally include a link to download the file without opening the lightbox.

    would also be great to have options for formatting the displayed pdf, ie: no sidebar, etc.

  7. Elio February 18th, 2010

    Justin, you could add the option to download the original pdf by doing the following:

    1) open pdfbox.php in a text editor like SciTE
    2) search for </iframe></div>
    3) add this after the div
    <a href=”$3.$4″ rel=”nofollow”>Download PDF</a>
    Done, now you have a direct link to the pdf. You can see it on the example in the post, I’ve updated the plugin I’m using (not the download).

  8. Justin February 22nd, 2010

    Brilliant fix!
    thank you very much!!

    I do have one other question, should this work when you use more than one link to a pdf on a page? it seems what I’m finding is any other links just link to the first file in the list. Is this common?

  9. Elio February 22nd, 2010

    Ermm ¬¬ yeah, don’t know why I thought no one would be embedding more than one pdf in a post. My bad. I will fix this later and I’ll send it an email when it’s done.

  10. justin February 22nd, 2010

    Drat, Ok so I thought at first it worked fine but I’m noticing that somehow the $3 is giving me part of the web address twice. (eg: http://yoursite.com/%EF%BF%BDhttp://yoursite.com…etc)

    any idea why this would happen?

  11. justin February 22nd, 2010

    I’d like to add this plugin is the only one that does what you’re doing so elegantly so I thank you 100 times for having created and also for the direct support!

  12. Elio February 22nd, 2010

    Weird, that shouldn’t be happening. Could you post the exact url you’re attempting to use here?

  13. justin February 22nd, 2010

    sure, can I email you? the website is still in development…

  14. Elio February 22nd, 2010

    Thanks :D however, I should’ve used a shortcode to insert the pdf.
    Yes, you can email it, I’m sending you an email.

  15. Moss March 7th, 2010

    Your code Download PDF

    was not displaying correctly.

    You should change the quotation marks, so that they are like this:
    Download PDF

    I tested it and it works now… Thanks for this plugin.

  16. Moss March 7th, 2010

    Delete last post and make it plain txt so it displays properly…

  17. Matthaus March 21st, 2010

    I’m having the same issue MateMedia was having. I’ve embedded a PDF (multi-page) into a page, and when the thickbox loads. Just the thickbox frame and the close button appear. No content is loaded with it.
    The thickbox on this site also doesn’t work, but it loads a page sized empty box inside the thickbox where the pdf should probably go.
    It seems like every time I load one of the thickboxes a new download of the pdf being served is initiated. I’m not sure if that’s due to the plugin or due to my browser settings.

  18. Elio March 21st, 2010

    Matthaus, could you please give me an online link where you are using it? I cansee the pdf in this page correctly so I’m very interested about any issues that you might be running into.

  19. keyhole saw April 17th, 2010

    good and nice to code

  20. Ross May 11th, 2010

    Can’t get this to work on this site or on mine? It brings up a download box and a blank white box, but no pdf in it. Any ideas?

  21. Rany May 17th, 2010

    Love the plugin. Thanks. Did you ever come up with a fix to address multiple .pdfs on a page and loading only the first file? I could really really use it if you did.

  22. Elio May 17th, 2010

    Rany, I guess this could be done using jQuery, but I don’t really have the time to update the plugin right now. You remove them maybe just by using removeClass() on the pdf you don’t want to launch.

  23. Rany May 17th, 2010

    Thanks for such a quick response! Unfortunately, for me I hear you speaking a foreign language. I researched your suggestion a bit and am lost at the insertion point. My problem isn’t necessarily with multiple pdfs in one post, it’s when it list the posts in the archive pages. You can see here http://www.operationlookout.org/Missing_Kids/Directory/ — Any suggestions?

  24. Elio May 18th, 2010

    Humm I see. Try using the following jQuery code

    $j(document).ready(
    function() {
    $j(‘.post:not(:first) .pdfbox’).removeClass(‘pdfbox’).removeClass(‘thickbox’);
    });

    I’m assuming that each of your posts is wrapped with a .post class. If that’s not the
    case just replace the .post class with your own class. This code will remove .thickbox and .pdfbox classes from every link but the first one.

  25. Rany May 19th, 2010

    Assuming I placed the suggested code correctly and entered the proper post class, the only thing that seemed affected by it was the “X” in the upper corner shrank to a grey 3px wide box.

  26. Rany May 20th, 2010

    Elio, I know you said you didn’t have much time to work on this and as much as I wish this could be a quick fix, I don’t think it will be. Until you can come up with an update, I’m gonna have to go old school with it. Thanks for taking the time to try to help me out. As a little gratitude for your generosity, please check your PayPal account. I look forward to making a larger donation once an update has been made..hint hint :)

  27. Elio May 20th, 2010

    Thank you very much!! I really appreciate it :D
    Now that I look at the code I wrote I notice that I typed “$j” instead of “jQuery”. The thing is that I tested this on a local site I was working and I was using an alias to avoid typing “jQuery” all the time. Try changing “$j” to “jQuery” and let’s see what happens. I hope it works :) and thank you very much again!

  28. Rany May 20th, 2010

    You are more than welcome. I wish it could have been more. I tried the adjustment and it was the same outcome. If it’s working on your side, I must be doing something wrong on mine.

  29. Justin May 20th, 2010

    Rany,
    Just so you know, your site is still showing the same pdf in all of your links! I wish Elio had time to fix the multiple pdf’s on one page issue!

  30. Rany May 21st, 2010

    Thanks Justin. I know. That’s why I’ve been communicating back and forth with Elio. I’m hoping an update will happen soon. I hate the old school look. This plugin makes dealing with pdfs so much more streamline and modern.

  31. Tierra June 6th, 2010

    Hi, I’m having the same problem as Matthaus and Ross. The second the page loads, an empty white box pops up and a file begins to download. When I close the thickbox, it launches another download. Ideas?

  32. Gera July 6th, 2010

    Buenísimo el Codigo lo voy a usar para esta pagina http://www.publicistasenred.es/

    Gracias

  33. Elio July 8th, 2010

    Estupendo Gera! I’m glad it’s useful to you.

    Tierra, maybe your server is not serving the pdf files correctly?

  34. Brad August 23rd, 2010

    I have the same error as Tierra, Matthaus and Ross. It seems to only be in IE on a PC. Can anyone confirm?

Leave a comment