Many WordPress theme designers choose to cut some corners with their creations. One of the more important things they skip over is print.css – the stylesheet that controls your blog’s appearance when you print it. There are several reasons why it is important to have a well-designed print.css.

First, it makes you look like you know what you are doing. It makes your site look professional and this is important. Second, you don’t annoy your readers by giving them an ineligible printout of your site. Finally, a well-designed print.css saves paper and is good for the environment. So with a good print.css everybody wins: you, your readers, and the Amazon rainforest.

Here’s what a printout of my site would look like without a print.css:

Not very pretty, eh?

There a few good spots online where you can get a good generic print.css for your WordPress site. The problem is that the printout will look nothing like your site. And many folks out there would like to see some of their blog’s cool design in the printouts. Unfortunately, many CSS designers get carried away and produce a style.css for your WordPress theme that’s many pages long. How can your make sense of it and how can you build a print.css out of it?

I have over twelve years of Web development experience and I designed my share of fancy sites for some very big customers. However, when it comes to designing my own site, I usually turn to someone else. What can I say, I am hard to please. So when I looked at the style.css of my newly-acquired WordPress theme, I was staring at the seven hundred-some lines of gibberish I had no desire to understand.

A WordPress theme consists of blocks: top menu, navigation menu, sidebar, header, etc. When printing you want to remove some of these elements while preserving the formatting of the rest of them. Being a lazy Unix sysadmin that I am, I wrote a short shell script to extract a list of all distinct elements from my style.css and output CSS syntax that would exclude all of them from the printout:

grep "#" style.css | sed 's/{/ /g' | awk '{print $1}' | grep -v ":#" | grep "#" | sed 's/,//g' | awk -F'#' '{print $2}' | sort | uniq | while read line
do
echo "#${line} {display:none;}" >> print.css
done

If you do this and try to print your blog, the printout will be almost blank. All you have to do now is to edit the last few lines of your print.css (the ones the script added) by commenting out elements that you do want to print. For example:

/*#centercol {display:none;}*/
#columns {display:none;}
#featuredpost {display:none;}
/*#footer {display:none;}*/
/*#header {display:none;}*/
#mpu_banner {display:none;}
#nav {display:none;}
#rss {display:none;}
#search {display:none;}
#sidebar {display:none;}
#submit {display:none;}
/*#top {display:none;}*/
#topmenu {display:none;}

The final step is to add a reference to your new print.css to the header.php file of your WordPress there. You should add the following code just below the line saying link rel=”stylesheet” type=”text/css”:

<link type="text/css" media="print" rel="stylesheet" href="/print.css" />

So now when I try to print my site, it looks something like this:

That’s much better than what would come off the printer before. You can still tweak a few things manually, but the script above should produce a decent result for just about any CSS design.