Theme Playground

One detail often overlooked by WordPress theme creators and the bloggers who use them is the value of the print stylesheet. The importance of the screen stylesheet (the CSS included with every WordPress theme) is not even up for discussion: it’s necessary. I would like to see the print stylesheet go that direction as well.

What It Is

The print stylesheet tells the page how to render during a print job, the same way the screen stylesheet tells the page how to render for viewing on a screen. When viewing on a screen, certain things are needed and helpful: sidebars, a graphic interface, search forms, etc. But these are not quite as useful when they are printed; oftentimes they are useless.

By using a print stylesheet for our WordPress themes we can make the printout more attractive as well as more useful to the person printing a page of your site.

Do a quick check. Go to File, then Print Preview. How does it look? If it’s ugly (like mine was before a little bit ago) then take a look at the following steps.

Note: At the bottom of this article is a link to the complete print stylesheet that I currently use, fully commented for easy customization.

Step by Step Instructions for Creating a Print Stylesheet for WordPress

1. First, pull up Notepad (my “editor” of choice, use whichever you prefer) and save a blank file as print.css. You heard me, a blank file. Note: If you are using Notepad and are having trouble saving as a .css, be sure you have adjusted the Save as Type to All files. Then add the .css to the end of it yourself.
2. Next establish the connection to your server in whichever form you prefer. We want to be able to now drop this print.css file in your theme folder.
3. Well…drop your new print.css file in your theme folder.
4. Log in to your WordPress Dashboard and head to the Presentation tab. Under Theme Editor, you should now see a new file to edit. It’s called (better be anyway) print.css. Click on it, that’s what we want to edit.
5. File should be blank. I’ve found starting blank makes this process more useful, since we are going to start by cutting out everything we don’t want to print. So, first we’ll cut out things like the search bar, the sidebar, and the menu links.

   #searchform {

   display: none;

   }

   #sidebar {

   display: none;

   #header ul {

   display: none;

   }

   Fun, yes? I usually structure my code so that the menu is the only unordered list in the header div. If that doesn’t work for you, of course change it.

6. To preview your work, refresh a browser with your site in it and go to File, Print Preview. This will be the place to check each time you want to see how you’re doing. Right now it should have taken a big step in the right direction, but we’re not at all done yet.
7. Things like navigation on single post pages and the forms for comment submission really don’t have a place on the printed page. Use the following code to get rid of those.

   .navigation {

   display: none;

   }

   #respond, #commentform {

   display: none;

   }

   Note: Keep in mind that removing the form for comment submission will not remove the displaying of comments on each post.

8. Then we want to style the links and text that will be printing. I usually leave the font face to the default (Times New Roman) because serifs are easiest to read in print. We will also be referencing the font sizes as points, since we are styling for print and not for the screen. Here’s my code:

   a img {

   border: 0;

   }

   a {

   color: black;

   text-decoration: none;

   font-weight: 900;

   }

   h1 {

   text-decoration: underline;

   font-size: 18pt;

   }

   h2 {

   text-decoration: none;

   font-size: 16pt;

   }

   h3 {

   font-size: 14pt;

   }

   p {

   font-size: 12pt;

   line-height: 18pt;

   }

9. At this point we should have a pretty attractive printed page. But one more thing will really make it useful. Courtesy of A List Apart, the following code will print out the URL of your links right after the link text. This only works on up-to-date browsers, however. I’ve also included my touch that takes away this effect for the headlines and post metadata, since the font is already small and it would just look gross. Try it out:

   .post a:link:after, .post a:visited:after {

   content: ""attr(href)"";

   font-size: 80%;

   margin-left: 7px;

   }

   .postmetadata a:link:after, .postmetadata a:visited:after, .post h1 a:link:after, .post h1 a:visited:after {

   content: "";

   }

And there you have it. A beautiful print stylesheet for a WordPress blog or website. So far I’ve used it here at Theme Playground as well as my personal blog, and both have been very useful.

Download the following CSS file for the full text of my printed stylesheet. There are a few little tweaks I’ve put in here and there, just for the sake of fitting with my particular WordPress setup. Maybe these styles will work for you. There are also comments in all the right places, so it shouldn’t be tough to understand.

CSS Print Stylesheet for WordPress Websites

Resources

• The WordPress Codex on Styling for Print
• CSS Design: Going to Print on A List Apart
• All 37signals products have beautiful print styles