Print Stylesheets

(This tutorial is specifically for the Thesis theme , but can be adapted to work with any Wordpress theme).
For a lot of websites, the browser isn't the only medium through which the site will be viewed. If your visitors will be printing out your posts or pages (like my cooking client Harvest Eating ), it's essential to add a print stylesheet.

For everyone else, it's just a good practice to have your site look well printed. Luckily, it's pretty easy.

The custom.css file you use to design your Thesis site only defines styles for the web, so when you print those are already gone. The main thing we'll use the print stylesheet for is hiding things we don't want showing up, like the menu and sidebars.

Create the Print Stylesheet

Go into /themes/custom and create print.css.

Now you can start writing your print-specific styles. For everything you want hidden, add it to {display: none;}.  Here's the print stylesheet I used for Harvest Eating:

.custom #submenu, .custom #header .left, .custom #header .right, .custom #header .menu, .custom #sharethis_0, .custom #print, .custom #tweetmeme_button, .custom .video, .custom #idc-container, .custom .prev_next, .custom #sidebars, .custom #footer-recipes, .custom #footer {display:none;}
.custom #print-logo {float: right;}

See this post by A List Apart for some great print stylesheet tips.

Add the Print Stylesheet to Thesis

Once your print stylesheet is done, stick this in custom_functions.php to add it to the site.

/* Print Stylesheet */
function print_stylesheet() {
echo '<link type="text/css" media="print" href="' . THESIS_CUSTOM_FOLDER . '/print.css" rel="stylesheet" />';
}
add_action('wp_head', 'print_stylesheet');


Print Logo

You'll also notice I have a #print-logo at the bottom of my print stylesheet. We wanted the Harvest Eating logo to show up on any recipes that were printed out, but we didn't want to use up the customer's color ink on it. So I created a black-and-white version of the logo, added it to the top of the header, and hid it using the custom.css stylesheet. So when the page is printed (and so the custom.css stylesheet isn't being used), it shows up.

In custom_functions.php:

/* Logo at top on printed page */
function print_logo() { ?>
<div id="print-logo"><img src="<?php bloginfo('template_url');?>/custom/images/logo-bw.jpg" /></div>
<?php }
add_action('thesis_hook_before_header','print_logo');


In custom.css

.custom #print-logo {display: none;}