How to Make Your Theme Printer-Friendly Without Plugins

If you consistently provide good content on your blog, there is a high chance that some of your readers will print out your articles for future reference. The problem is, while your blog might look nice in the browser, it could be in a mess when you print it out. While there are several plugins that can format your site to printer-friendly layout, they can add extra overhead to your system and mess up your permalink structure (some plugins add a "/print" behind your URL). Here's a little trick to make your site printer friendly, without using any plugin.

Note: This tutorial assumes you have CSS coding knowledge

1. Create a new stylesheet and name it print.css. Format the stylesheet to your desired print layout. Save this stylesheet to your theme folder. (See below for some tips on creating print stylesheet)

2. Open the header.php file in your theme folder with a text editor. At the top, look out for a line like this:

[php]<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />[/php]

Add an extra line below it:

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

Save the print.css and header.php files back to the server. Now go to your site in your browser. Go to "File -> Print -> Print Preview". You should see your new printer-friendly stylesheet in action.

Some tips on formatting your print stylesheet

You can, of course, create your own print stylesheet, but here are some tricks that you might be interested to know:

Set the background

At the beginning at the print stylesheet, insert the following:

[css]/* Print Style Sheet */
@media print {
body { background:white; color:black; margin:0 }
}[/css]

Hide unwanted regions

For those regions that you don't want it to appear, you can use the code display:none; to hide it. For example, we don't want the navigation menu and the sidebar to appear in the print layout and the main content should take up the full width:

[css]#menu,#sidebar{display:none;}
#content{width:100%;}[/css]

Force a page break

To force a page break, say for the comment section, you can use the code below:

[css]#comment{page-break-before:always;}[/css]

Display URL

On a printed document, the user cannot click on the link. It is good to replace the link with the URL, so that the user can know that is a link and go to that page.

[css]/* Show URL */
a:link, a:visited {background: transparent; color:#333; text-decoration:none;}
a:link[href^="http://"]:after, a[href^="http://"]:visited:after {content: " (" attr(href) ") "; font-size: 11px;}
a[href^="http://"] {color:#000;}[/css]

Reference from Onextrapixel