Adding a Print Style Sheet

A recent poster to the WordPress Support Forum asked if there was an easy way for visitors to print her blog posts. Although there are a number of plugins that can achieve this there is no need for them as all browsers come with the ability to print pages. The key is to print the post itself and exclude all of the other stuff such as sidebars etc.

Previously I showed you how to style individual posts and Pages by incorporating different stylesheets. Well the same can be accomplished here. We create a new style sheet called print.css which is uploaded to your theme's folder and called in header.php. We use the attribute display:none to hide what we don't want to see on the printed version.

For instance, my sidebars are defined as midCol and tertCol. In my print style sheet I deal with them like this ...

#midCol, #tertCol {display:none;}

Once you have created your new print style sheet and uploaded it to your theme's folder you simply call it in header.php. Look for the existing call to the regular style sheet and below it add,

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

You can test it by using your browser's print preview feature on this very post.

In case you're wondering, here is the print style sheet I created for this theme,

/*
Print Style Sheet
*/
@media print {
body {background:white;font-size:10pt;margin:0;}
#comments_wrapper, #midCol, #tertCol, #searchWrap, #elseWhere, #imgLinks, #authorBlurb, #more_reading, #categories, #bttm, #footer, .comments, ul.nav, .navigation, .previous, .next, .clear, .flat, .whitespace, .date, .data, .post h4 {display:none;}
.right {float:right;}
.left {float:left;}
#masthead h1 {margin: 0px 0px 0px 0px;text-align:center;}
#masthead h1 a {text-decoration:none;}
#content a {font-weight:bold;color:#000066;text-decoration:underline;}
#content{ margin-left:0;float:none;width:auto;}
h1, h2, h3, h4, h5, h6 {page-break-after:avoid;page-break-inside:avoid;}
blockquote {page-break-inside:avoid;}
ul, ol  {page-break-before:avoid;}
img.centered {display:block;margin-left:auto;margin-right:auto;}
img.right {padding:4px;margin: 0 0 2px 7px;display:inline;}
img.left {padding:4px;margin: 0 7px 2px 0;display:inline;}
 }

PS: If you want to add a "print this" link to individual posts to make it easy for your visitors simply add the following somewhere to single.php ...

<a href="javascript:window.print()">Print This!</a>

Futher reading:

http://codex.wordpress.org/Styling_for_Print