I was thrown a curve ball this week when a new client asked that their site be print friendly. He said his clientele was older felt like they might print off his homepage which contains his phone number, hours, and a map. Of course I obliged, and found myself having a blast “blowing everything up” so it could fit on an 8×11 sheet of paper.
We will need to remove backgrounds, images, the navigation, and change the font from Pixels or EM to the print friendly “pt”.
Step 1: Create a new stylesheet called, “print.css” and upload it to /custom/
/*Reset Style*/
body.custom {
margin: 0;
padding: 0;
line-height: 1.4em;
word-spacing: 1px;
letter-spacing: 0.2px;
font: 12pt Arial, Helvetica, "Lucida Grande", serif;
color: #000;
background: none;
border: none;
}
a, a:hover {
color: #000;
font-weight: bold;
}
#logo, #logo a {
background: none;
font-size: 20pt;
font-weight: bold;
text-decoration: none;
margin: 0;
padding: 0;
}
#tagline h1 {
font-size: 16pt;
font-weight: bold;
}
h1, h1 a {
font-size: 16pt;
font-weight: bold;
}
h2, h2 a {
font-size: 14pt;
font-weight: bold;
}
h3, h3 a {
font-size: 12pt;
font-weight: bold;
}
h4, h4 a {
font-size: 10pt;
font-weight: bold;
}
/*Move Element*/
#content {
float: left;
}
#sidebars {
float: right;
}
/*Remove Element*/
.menu {
display:none;
}
#sidebars ul li {
list-style: none;
}
#multimedia_box {
display:none;
}
#footer {
background: none;
}
Step 2: Link up the Stylesheet using custom_functions.php
// Print Friendly CSS
function print_css() {
?>
<link rel="stylesheet" href="/wp-content/themes/thesis_16/custom/print.css" type="text/css" media="print" />
<?php }
add_action('wp_head','print_css');
Just FYI – If you need to create an Internet Explorer friendly print.css (and you probably will) then use instead the code below on custom_functions.php
// Print Friendly CSS
function print_css() {
?>
<!--[if IE]?>
<link rel="stylesheet" href="/wp-content/themes/thesis_16/custom/ie-print.css" type="text/css" media="print"?>
<![endif]--?>
<link rel="stylesheet" href="/wp-content/themes/thesis_16/custom/print.css" type="text/css" media="print" />
<?php }
add_action('wp_head','print_css');
Step 3: Check your work
Using any major browser: File –> Print Preview

OR
Using the Web Developer Toolbar for Firefox: CSS –> Display CSS By Media Type –> Print








{ 2 comments… read them below or add one }
Greg,
This is so so awesome! This is precisely what I was looking for…
Would this also work at post level or only at page level?
If I take all the tutorials from this site I'm pretty sure I'll manage to build a very nice site for myself with all the functions I need. If you'd only have the time to make a tutorial about getting all the forms and functions together for those people who don't have programming skills.
________________
Mathew Farney – Web Hosting