When I started looking for “Save this web page as PDF” solutions, I was underwhelmed. The end result of every service is miserable because, frankly, websites aren’t meant to be saved as PDFs. Their design serves a completely different function; they demand interaction, which you can’t do with a static document like a PDF. All of the interactive features that Adobe has worked into the PDF format are geared toward reusability of a design, like updating prices on a menu at a restaurant. Things like navigation menus and Twitter feeds have no place in them.
So, my solution for PDFs was to ignore them. This was working for me until a client needed a way to post legal research/analysis documents as PDFs. It was an absolute necessity that there be a downloadable version of the articles they were writing. There’s great value in having a local copy of a document that no one can change or decide to take down or is unavailable because you’re on a plane.
Preventing Redundancy
Even if PDFs and search engines played well with each other (I hear this is getting better, but why wait on technology people might employ?), you would still be required to enter the exact same information into a computer twice; once for the website and once for the PDF. This is redundant, and I have found a solution.
WordPress + Print.css + PHP + pdfmyurl.com
I created a print.css file for the website (with a little help from A List Apart), that removes everything except the main content formatted in a print-friendly fashion. Using the isset PHP function, I created a condition for seeing that style on the screen:
<?php if ((isset($_GET['print']))) { ?><!-- Checks for the 'print' variable --> <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/print.css" type="text/css" /><!-- Print stylesheet -->
<?php } else { ?><!-- Normal style settings -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /><!-- Page stylesheet -->
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/print.css" type="text/css" media="print" /><!-- Print stylesheet -->
<?php } ?>
If you add the “print” variable to the end of your URL, the page uses the print.css stylesheet instead of style.css. To create a link to this page in WordPress, change the link inside the loop from this:
<a href="<?php the_permalink(); ?>">
to this:
<a href="<?php the_permalink(); ?>?print">
Your link inside the loop should look like this now (if you’ve set your permalinks like I have):
http://www.yoursite.com/2010/03/14/myarticle/?print
Now we have the article content, lain out in a print stylesheet, and an automatically generating URL. All we have to do now is send that URL to pdfmyurl.com, and we’re done. They use a very simple URL-based API, which looks like this:
http://pdfmyurl.com/?url=http://www.yoursite.com/2010/03/14/myarticle/?print
To get your WordPress links to function this way, change your link from this:
<a href="<?php the_permalink(); ?>?print">
to this:
<a href="http://pdfmyurl.com/?url=<?php the_permalink(); ?>?print">
That’s it.