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="http://cdn.gregrickaby.com/wp-content/themes/thesis_16/custom/print.css.gzip" 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="http://cdn.gregrickaby.com/wp-content/themes/thesis_16/custom/ie-print.css.gzip" type="text/css" media="print"?>
<![endif]--?>
<link rel="stylesheet" href="http://cdn.gregrickaby.com/wp-content/themes/thesis_16/custom/print.css.gzip" 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
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
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?
@Avinash: The code above will add the print.css style sheet header to every page on a Thesis site: Home, posts, archives, etc.
If you want to customize it for different pages, you can do it either via CSS, applying styles to elements found only on, say, the Category archives page; or, you can add an if statement to the print_css() function, e.g.:
if( is_page(‘about’) ) { // About page
// echo print style sheet specific to the About page
}
elseif( is_home() ) { // Blog front page
// echo Home page print style sheet
}
elseif( is_single() ) { // Blog posting pages
// echo print style sheet for posts
}
else {
// Default print style sheet
}
Unless your needs are _very_ unusual, you should be able to do everything you want in one style sheet, by adding multiple styles.
Rather than hard-coding the path to the print style sheet, I would recommend using one of the Thesis constants that are available, e.g.:
echo ”;
That way when you upgrade to Thesis 1.7 (or 2.0, etc.), you won’t need to edit your code. This is especially important for a feature like a print style sheet, which you won’t notice if it’s not working just by reloading your site.
Let’s try that again, with escaped code:
echo ‘<link rel=”stylesheet” href=”‘ . THESIS_CUSTOM_FOLDER . ‘/print.css” type=”text/css” media=”print” />’;
@ Alderete:
I couldn’t get this code to work for me (without the double brackets)…
[[
function print_css() {
?>
<?php }
add_action('wp_head','print_css');
]]
My code is getting stripped too… Let me try again…
function print_css() {
?>
echo '';
<?php }
add_action('wp_head','print_css');
Wow, isn’t this fun! I am not used to posting codes in comments here… Help! :-)
This is the code that is not working for me (without the styled curly quotes):
function print_css() {
?>
echo ‘’;
<?php }
add_action('wp_head','print_css');
I give up for now… But the code on the middle of this page worked for me (and it is future-proofed for new versions of Thesis):
http://aldosoft.com/blog/2009/11/applying-thesis-styles-in-print/