Creating a Printer Friendly StyleSheet in WordPress

A few days ago Daniel from DailyBlogTips recommended the WP-Print plugin for creating printer-friendly content. I commented that a better technique would be to create a printer-friendly stylesheet. I then realized that I never got around to creating a printer-friendly stylesheet for this site (shame on me, I know).

There’s already some good tutorials out there, but I thought I’d share how I created the printer-friendly stylesheet for this site, which uses WordPress.

A printer-friendly stylesheet will enable your readers to print out your blog with ease with you dictating how the document is to look printed out.

First Step – Create a “print.css” File

The first thing I did was create a file called “print.css” and I placed it in my WordPress Themes directory. I’ll explain the code I used in the stylesheet file in a minute.

Second Step – Add the Style Reference to Your “header.php” File

After you have created the “print.css” file and placed it in your WordPress Themes directory, you will need to open up “header.php” and add in some code.

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

What I did here was add in a link tag before the end of the “head” tag.

The following attributes are explained below:

• rel="stylesheet" – The relationship of the file referenced to the document calling it is stylesheet.
• href="<?php bloginfo('template_url'); ?>/print.css" – The web path to the stylesheet. In this case I have it pointing to the theme directory.
• type="text/css" – The MIME type of the document referenced.
• media="print" – Which media the stylesheet should be applied to. In this case it is “print” since we only want the stylesheet to show up when printing the document.

One thing to note here is that the other references to styles need to have media="screen" (or something similar) in order for this to work.

Third Step – Edit the StyleSheet

The technique I use when editing the “print.css” is to decide what I did not want to show. I didn’t want to show the sidebar, footer, social media icons, and other “fluff” used solely for presentation.

I looked at my theme in my Firefox browser and used FireBug to inspect which elements I wanted to hide.

After selecting my elements, here is the CSS I used to hide the appropriate elements:

#header p a, #menu, #search, .navigation, #sidebar, #footer, .copyright, .comment-author, #navigation, #social, #comments-block2{ display: none; }

As you can see from the above code, I used display: none to hide the elements I didn’t want to show on a printed page.

Fourth Step – Admire the Results

The results of a printer-friendly stylesheet is to control what the reader sees when the document is printed out. Here is how RA Project turned out:

RAProject Printed Out

If you are interested, here is a PDF of the full results.

Conclusion

A printer-friendly stylesheet enables your readers to print out a site with ease without all of the necessary design fluff included. It’s not very difficult to do, so I recommend creating one if you haven’t already.

If you have any questions about this technique, please let me know and I’ll be happy to answer them. Thanks for reading.

Other RA Project Articles

• The Lost Comment (6)
• Seven Simple Ways To Show Your Readers That You’re Available (6)
• New Guest Contributor – Isabella (1)
• The Power of Introduction (5)
• RSS Day! Yay! (5)

If you like this article, please consider signing up for RA Project Daily Updates via email or directly to the RA Project RSS Feed http://feeds.feedburner.com/RAproject. Thank you!