dannyman.toldme.com

HOWTO: Add Print Stylesheet to WordPress

I wanted to print an article from my web site, but the printing was ugly. I had previously tried to fix up my printing by adding some @media print stuff to my stylesheet, but I found it wasn’t working. Since I have free time, I spent a bunch of it thrashing my head against the wall trying to figure out what’s up researching the correct approach. Finally, I found a wordpress.org article: “Styling for Print”.

To specify a “print” stylesheet for WordPress:

Step One: Edit your theme’s header.php and change this:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

To this:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, print" />

This is actually the one part of the puzzle I was missing. What it does is tell the User Agent to apply the stylesheet when displaying on screen, and also when printing.

Step Two: Add a @media print section to your stylesheet.

For me, this means setting display: none; on structural elements that I don’t want to print. I came up with:

@media print {
    DIV#sidebar { display: none; }
    .comments { display: none; }
    .credit { display: none; }
    .noPrint { display: none; }
}

That turns off the sidebar, the comments, the “credit” footer at the very bottom of the screen, and anything marked by class="noPrint".

Step Three: Add class="noPrint" where needed.

<p style="noPrint">This paragraph would be displayed on a screen, but not in a printout.</p>

This is how I turned off the menus within the top header. I kept the top-most banner intact because my web site has the same name as the URL, which is nice to have in case someone were to stumble across a printout one day and track me down online.

You may have to wrap some things in DIV or SPAN enclosures. The trickiest thing for me was to disable Google AdSense. Adding class="noPrint" to the SCRIPT tags didn’t work: I had mark the parent element.

Step Four: Test!

Visit the web browsers you have access to and “Print Preview” on a variety of pages: some pages have elements that others don’t, and some web browsers are goofier than others. You’ll want to go through and tweak things . . .

That is all there is to it, really.