Adding a Print Stylesheet to Your WordPress Blog

by Cheryl Johnson

Real Estate Broker, Investor

Author website

I have a Dead Tree Addiction.  Somehow words seem clearer and truer, and their cadence more lovely when I read them on a printed page, rather than a computer screen.

So, when I read a well written blog post, one that addresses an important issue, one that speaks clearly to me,  my first inclination is to hit “PRINT”.  And all rational reasoning to the contrary, sometimes that urge to PRINT just simply cannot be denied.

Unfortunately many WordPress theme designers neglect to include a print stylesheet in their theme files, and the resultant printer output often contains an endless jumble of sidebar images and unusable navigation link text.

If you’d like to make it easy for your readers to print your posts, add a print stylesheet.  Here’s how:

In a plain text editor (Windows Notepad works just fine) create a new file named print.css

Paste this CSS code into your print.css file

#nav {display: none; }

#sidebar {display: none; }

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

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

That’s it, that’s all.  The code is saying: “Don’t display the navigation bar, don’t display the sidebar, don’t print the links in fancy colors, and fill the entire width of the page with the post content”.

Save the print.css file, and upload it to your WordPress blog host.  Place it in the individual theme’s folder; the most likely path would be something like mysite.com/wordpress/wp-content/themes/mytheme.

Now at the WordPress dashboard, go Design -> Theme Editor -> and in the Theme Files – Templates column, click on header.php to open the file.

Paste the code below into your header.php file, right below all the other lines that start with link rel=”stylesheet”

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

Make sure it is above the line that reads </head>. Click Update File.  This little piece of code is telling the system that if it receives a “print” command, to apply the print stylesheet instead of the “media” styleheet.

To test, click Visit Site, click File -> Print Preview

Notice that I did not remove the Footer.  If you’d like all printouts to include your contact information, the footer can be a handy place to insert it.

Open the footer.php file, and you will probably see a line that reads <div id=”footer”> or <p id=”footer”>  Right below that line insert something like :

<p>SUSIE Q. AGENT AT MY REAL ESTATE BROKERAGE, INC., 0000 MAIN STREET, LOS ANGELES, CA 90000 — 323.000.0000</p>

You may need to experiment a bit with the placement, but now in addition to appearing on screen, at the bottom of your blog pages, your contact info will appear, as part of the footer, each time someone prints one of your posts.  Why let the theme’s designer get all the glory?  🙂