It is a pleasure to announce, all pages in this site are now printer friendly.  Go ahead, print something.  I dare you.

You may be asking, how did you create a printer friendly page with your WordPress theme?  Quite easily actually.  And with minor tweaks, this tutorial may also be used for creating print-friendly pages for standard HTML pages as well.

Print-Friendly Pages with WordPress

Your first task will be to identify what appears when you attempt to print.  For best results, go File > Print Preview with Internet Explorer and Firefox.  You will relatively quickly find, lots of junk is placed on that printed page.  Your task will be to simply eliminate the things which doesn’t belong.  Let’s get to the basics here.  Only content shall be printed.  If we wanted to print the webpage ‘as-is’ we’d be using the traditional Screen Print instead, right?  For the typical user, the most important content is desired and is expected when printed.

Note: Before following this tutorial, please ensure you do not already have a CSS file for Printing.  You can determine this by looking through your Theme Files.  If there is a file labeled Print.CSS or the like, please skip steps 1 & 2.

First, we will need to log in to WordPress.  Log-in with your username and password and head over to Appearance. Select Editor from the Appearance button and this will take you to your HTML editor.  On the right-hand side of your screen, you are presented with your Theme Files.

1. Open your Header.php file

This file contains the Header information for your template.  We will only need the following line:

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

Let’s change that to reflect the following:

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

You see what we did there?  We simply told the referencing CSS link, in what ways the browser shall interpret the data depending on the media.  By adding media=”screen, print” tells the browser the style sheet will be used for screens and printing.

We have finished here, so simply press “Update File” at the bottom of the page.

2. Open Style.CSS

Now we have opened our main CSS file from the directory.  This contains the style guidelines and tells the browser how to interpret the page. Our first task will be to divide this file between the styles for Screen and Print.

At the top of this page add the following:

@media screen {

And like any good programmer, add a closing curly bracket } to the very bottom of the page.  The last few lines should look similar to this, blockquote representing your last style entry:

blockquote {
background-color: #999999;
font-family: “Courier New”, Courier, monospace;
padding-left: 6px;
color:#000000;
font-weight: bold;
}
}

Now we need to begin our Print guide.  Simply add the following after your final curly bracket.

/* Print Styles */
@media print {

}

You’ll notice we have added the comment “Print Styles”.  This simply assists in us finding the beginning of this style if later necessary.  We are now ready for configuring our print stylesheet.

3. Edit your stylesheet

We are now able to create our style rules for printed pages.  First, let us create a style for the main body.  Add the following between the curly brackets:

body {
color:black;
font: Georgia, serif;
}

Your page should now resemble the following:

/* Print Styles */
@media print {
body {
color:black;
font: Georgia, serif;
}

}

We have changed the body text to black and applied a Georgia or serifed font.  A serif font is chosen for readability on the printed page, in a similar way the sans-serif font applied to screen formats.

If you conduct a print preview at this point, you won’t notice much of a change.  There is still unnecessary items on the page as well as links appear in an underlined blue color.  Let’s get rid of the link formatting with this:

a:link {
color: black;
text-decoration: none;
}

a:visited {
color: black;
text-decoration: none;
}

This now turns both unvisited and visited links to black without any underlining.  While we’re at it, let’s take out the blue border color of any linked images:

img {
border: none;
}

With all that out of the way, we can now get rid of any extra junk.  The Firebug addon for Firefox helps us out immensely with this.  If you don’t have this powerful plug-in, you can find it at addons.mozilla.org. Go to your page with Firefox and click the Firebug icon.  This opens the plug in.  From here, click ‘inspect’ and as you hover around your page, you will find the classes and/or IDs appear in the application.  This makes things easier to identify.

I have hovered over the navigation menu and header of my page and Firebug reported the following:

<div class=”nav“>

</div>

<div class=”Header“>

Since these are classes, we will add the following to our stylesheet:

.nav, .Header {

}

I also want to get rid of the sidebar, so let’s throw that in too:

.nav, .Header, .sidebar1 {

}

Did you take note of capitalization?  Make sure you enter in your classes exactly as they are listed on the page.

We can now get rid of this stuff by entering display: none; between the curly brackets:

.nav, .Header, .sidebar1 {

display: none;

}

Yours may look longer than the example, that’s fine.  Here is a sample of my finished product:

/* Print Styles */
@media print {
body {
color:black;
font: Georgia, serif;
}

a:link {
color: black;
text-decoration: none;
}

a:visited {
color: black;
text-decoration: none;
}

img {
border: none;
}

.menu, .Header, .sidebar1, .addthis_container, .postmetadata, #respond, #commentform {
display: none;
}
}

Update your file and return to your page.  Hit ‘Shift’ as you refresh the page and select ‘File>Print Preview’. You should now begin seeing your page take form.

For further customization including creating page breaks, visit the W3C Schools CSS page.

Print Stylesheets for HTML based pages

By HTML pages, I mean pages not using any type of back-end engine such as WordPress or Joomla.

For these HTML pages, pull up your index.html page and locate where you are referencing the Stylesheet.  You’ll find this in the <head> section and it should resemble the following:

<link rel=”stylesheet” type=”text/css” href=”css/style.css” media=”screen” />

All we need to do, is add the following directly beneath the link mentioned above:

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

Since we have determined the page to be called ‘print.css’, create a new HTML page and name it ‘print.css’.  Make sure this file is in the appropriate directory (referenced from the link you created above), in this case: root/css/print.css.

Now, simply add your print styles as mentioned in step 3.  It will turn out fairly similar with the exception, you do not need to add:

@media print {

}

Your final print.css should resemble the following:

@charset “utf-8″;
/* CSS Document */

body {
font: Georgia, serif;
color: black;
}

a:link {
color: black;
text-decoration: none;
}

a:visited {
color: black;
text-decoration: none;
}

img {
border: none;
}

#header, #top-nav, #Image1, #Image3, #Image4 {
display: none;
}

You have just made your pages much more user-friendly.

Good Luck!