« Use a FeedBurner account to promote and deliver your WordPress blog’s RSS feed | Home | Spell with flickr generator makes your words look like ransom notes »
Use a print style sheet to control how your WordPress posts print
By braddock | May 12, 2008
Recently I tried to print off one of my posts for a friend to reference as she installed WordPress. Her printer churned and turned out 8 pages of useless junk. My header menu was scrolled down the side of the first page. My side bars ate up 4 more pages. The last 3 pages were a mix of my comment form, my footer, and the actual post in question. I used up the last of her paper too. It was a wee bit embarrassing.
I’ve noticed that some sites don’t print very well, but I never thought I could take steps to make sure mine was printer friendly. This is where a print style sheet comes in.
Your WordPress theme’s style sheet controls how all the different pieces of your blog look on screen. You can use a second style sheet to control how your site prints. Before I describe the particulars of my print style sheet you can get some general info on the WordPress.org Codex.
The first thing you have to do is tell the browser that’s viewing your site to look for a print style sheet. In your header look for:
<link rel=“stylesheet” href=“<?php bloginfo(’stylesheet_url’); ?>”
type=“text/css” media=“screen” />
and replace it with:
<link rel=“stylesheet” href=“<?php bloginfo(’stylesheet_url’); ?>”
type=“text/css” media=“screen, print” />
To tell your visitor’s browser you are using a separate print style sheet you’ll need to add this as well:
<link rel=“stylesheet” type=“text/css” media=“print”
href=“<?php bloginfo(’stylesheet_directory’); ?>/print.css” />
You could just put your print style settings in your blogs main stylesheet.css, but it’s nice to keep things neat with a separate file.
To make the print.css file just create a blank text file and name it print.css. Make sure when you save the file you set the save as type to all files. Now we need to tell our print.css file the things we do and don’t want printed from our site.
Here is the way my print.css file looks:
/* Print Style Sheet */
@media print {
body { background:white; color:black; margin:0 }
#header { display:block }
height: 100px;
font-size: 150%;
color:black; }
#sidebar { display:none }
#l_sidebar { display:none }
#r_sidebar { display:none }
dynamic_sidebar(1) { display:none }
dynamic_sidebar(2) { display:none }
* html #l_sidebar { display:none }
* html #r_sidebar { display:none }
#content{ margin-left:0;
float:none;
width:auto }
#comments { display:block }
#footer { display:none }
#commentform { display:none }
}
The display:none switch tells the browser what not to print, while display:block indicates an item that will be printed. As you can see I’ve added further controls to my header and post content to change how they will appear on the printed page.
I had to really work at getting my sidebars removed. I have a left and a right sidebar, and they are both widgetized. I couldn’t get them off the printed page until I found every way they were referred to in my theme’s style sheet.
This is how the posts on my site print now:
No more wasted paper, and I can encourage my readers to print out posts for later reference.
There is a lot more you can do to pretty up your print style sheet, but this is good enough for my purposes.
There are WordPress plugins that will handle how your site prints for you. Doing it yourself really isn’t difficult though. The fewer plugins the better in my opinion.
Related posts:
Topics: WordPress |
