Awhile ago I made a call out to the authors of Premium WordPress themes to start adding print stylesheets to all of their themes.   Some already do, but I believe in order to truly be premium quality, things like a print stylesheet and an author page should all be included.

While building a print stylesheet for a new blog I am setting up, I realized that I hadn’t written a post here explaining how to create a print stylesheet yet, so consider this to be that post.

What is a Print Stylesheet?

A print stylesheet is an alternate stylesheet that should only be used when someone attempts to print a page off of your blog.

How Does a Print Stylesheet Work?

A print stylesheet is a separate stylesheet that will override any designated style.css code when someone attempts to print a page off of your website.  If a print stylesheet is created correctly, people printing a webpage will not also print the unnecessary elements, such as the header, footer, and sidebars.

How do I Make a Print Stylesheet?

First thing you need to do create your print.css file. This can be done by taking a blank Notepad (or similar) file and naming it print.css.  You can also make a copy of your blog’s style.css file and rename it, then remove the code within the copy.

What Code Do I Put Into My Print Stylesheet?

Depending on your blogs theme, this step will either be pretty easy or incredibly difficult.  Basically, we don’t want things like your header or sidebars to appear in your print stylesheet, so you’ll want to setup your print stylesheet to remove these elements:

#header, #nav, #sidebar, #footer .noprint {display: none;}

Depending on your exact theme and how the div id’s are setup, what you put here will vary.  In other words, use the above as a guide, but customize it to match your theme.  You can also use this method to censor out images and other unwanted elements of your post pages (if applicable).  Also, if you have your contact information in your footer, you may want to leave the footer on your prints.

Next, you will want to expand your content section so that it looks decent when printed, instead of the content margins your standard style.css uses.  It will probably look something like the following:

#content {width: 100%; margin: 0; float: none;}

Now, to ensure that alternate colors are not picked up when printed, you’ll want to do something like the following to make sure it prints using black ink:

a:link, a:visited {color: #000000}

Because most people use white paper, this should make your printouts better looking.

How To Tell Your Theme to Use the Print Stylesheet

Once you’ve built and uploaded your print stylesheet, the next step is of course to tell your theme to use it when someone prints something!  This is probably the easiest step of all.  You’ll want to simply paste the following code into your themes header file (usually just below the standard style.css code):

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

So, there you go!  Hopefully if you’ve followed these steps, and uploaded your new print.css file to your WordPress blog’s theme, anything printed from your website will look much better.

Related Printing Posts:

Kyle Eslick is WordPress enthusiast who took his passion for WordPress to the next level in 2007 by launching WPHacks.com as a place to share hacks, tutorials, etc. Follow Kyle on Twitter @KyleEslick!

  1. Frank says:

    Here can you find a print.css for download. Easy to use for WordPress-Theme.

  2. Leland says:

    Awesome post! One thing I would change – is to put the print stylesheet in the theme directory – so you could call it like this:

    This way the print stylesheet doesn’t break if you’re using permalinks.

    Admin Edit: The code is not showing up; I am looking into fixing this. In the meantime, I have posted the code provided into the main post. Thanks Leland for your contribution!

  3. Kyle Eslick says:

    @ Frank – Thanks for the link! I think something like that is a good idea, but you will want to customize it to match your theme, as the div id’s will vary somewhat between themes.

    @ Leland – Thanks for the tip! I have updated the post to reflect the full URL.

  4. Dang. Another thing on my “list of things to do.” LOL

    Good post. Thanks – I’ll be doing this.

  5. axioblogger says:

    I have seen the print plugin. I think it can also do the job.

  6. Thanks for this post, its great, I just added a print sheet to my jobs blog.

    Thanks

  7. Antoine E Butler Sr says:

    Any print.css plugin or default style sheet, is doing your printed page an injustice. IMO. That said, a default print style sheet is 100 times better than none!

    We, as designers and developers have spent countless hours perfecting our online presence and that of our clients. Why should we take the easy route when it comes to printing. It’s not so much a question of how many people are actually going to print it, it’s “For the few who do, what will their impression be?”

    If anyone takes on their print.css with unique and stylish approach I invite you submit it to http://printFancy.com – a gallery for websites in print.

Trackbacks/Pingbacks »

  1. Guida: una impaginazione alternativa per stampare il blog says:
  2. 100+ Killer Wordpress Resources | Steffan Antonas’ Blog says: