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:

• How To: Creating a Print Button for Your WordPress Theme

If you ever visit our actual website, you’ve probably noticed the “Print This” button that we display below each post.  Depending on the type of website or blog you are running, having a button like this may be a good fit for your blog.  I’ve found it to be good to have this button available to readers for any type of website that offers tutorials, recipes, guides, or pretty much anything that might require a visitor to print something you’ve written.

If you think you’d like to offer your readers the option to print something on your blog, here is the code I use on my blogs (uses Javascript):

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

It prints the page you are on, so it is probably best to use it mostly on post and pages.  If you place it on the blog’s homepage, it will print the entire homepage, not just that post.