Formatting Printed Pages With CSS – WordPress Tutorial

I am frequently amazed about the number of popular technology and information blogs that do not properly format posts for printing. Here is a simple method for formatting printed pages using cascading style sheets (CSS) that eliminates all the unnecessary clutter on printed blog pages.

A properly formatted printed page is particularly important due to the increased use of blog software as a content management system (CMS). It is disturbing to see 2 or 3 pages of menu items, advertising, other links and images prior to actual content that you are trying to print.

With a WorPress blog, all of the screen formatting is controlled by a CSS file called style.css, which is found in your selected theme directory. With CSS, you can separate the formatting for screen display from printed output by simply using a separate style sheet that defines the way you want the printed output to look. There are a few plugins that do this, but the feature really should be built into a theme. Most of the plugins require that a user click on an icon or link in order to format the printed output. The method we are going to use here will work regardless of the print method used.

You should know something about CSS and editing PHP scripts in order to customize the printed output to meet your needs. If you design or customize WordPress themes, this will be easy to implement. If you have never done any editing before, be aware that you should always use a plain text editor for editing scripts. Never use Word or a word processor for editing scripts because they inject embedded characters that can cause problems. If you do not have a script editor, Microsoft’s Notepad works well.

First, we need to create a separate CSS file called print.css. Just cut and paste the following stylesheet rules and name the file print.css. This file will need to be copied to your theme directory.

html 
{
width: 100%;
}

body 
{
background: white;
text-align: left;
color: black;
font-size: 10pt !important;
line-height: 110%;
border: 0;
border-top: 0;
margin: 0;
padding: 0; 
font-family: arial, helvetica, sans-serif;
width: 7in;
}

a:link, a:visited 
{
color: black;
background: transparent;
font-size: 10pt !important;
font-weight: normal;
text-decoration: none;
}

h1, h2, h3, h4	
{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 14pt !important;
font-weight: bold;
margin-bottom: 5pt;
}

.alignleft 
{
float: left;
padding: 4pt;
margin: 0 7pt 2pt 0;
display: inline;
}

.alignright 
{
float: right;
padding: 4pt;
margin: 0 0 2pt 7pt;
display: inline;
}

#content 
{
width: auto;
margin: 0;
padding: 20pt;
border: 0;
border-top: 0;
float: none !important;
color: black;
background: transparent none;
}

#footer 
{
text-align: center;
font-family: arial, helvetica, sans-serif;
font-size: 9pt;
}

.nopr, div#sidebar *, div#footer a
{
display: none;
}

#page	
{
width: 7in;
border: 0;
border-top: 0;
padding: 0;
margin: 0 0 0 25pt;
background: white;
background-image: none;
color: black;
}
	

Notice that we are using points (pt) instead of pixels (px) to define sizes for the stylesheet elements. You do not necessarily need to do that. You can use pixels if you want to. There is a difference between points and pixels. Pixels are screen media elements, while points are traditionally used to define printed media. A point is defined as 1/72 of an inch, while a pixel is a discrete dot on a screen display. If you convert points to pixels, you will have to adjust the sizes. The width of the page has also been defined in inches to prevent the common problem where the print runs off the side of the page and is unreadable.

The second part of this project requires that you add a link to the new print.css stylesheet in the header.php file found in the theme directory. Remember to open and edit this file with a pure text editor.

Look for the line that starts out as “<link rel=”stylesheet” ” and place the following line just after it. The new code should be on one line.


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

You may have noticed that the first CSS link ends with media=”screen”, while the second line that you just added ends with media=”print”. That is how a browser determines which stylesheet to use. Using this method, you can also see what the printed output will look like using the Print Preview browser feature.

Pay particular attention to the following CSS rule:


.nopr, div#sidebar *, div#footer a
{
display: none;
}

Setting the display as “none” will hide the elements that you do not want to print. In this case, we are eliminating the entire sidebar division (using the wildcard *) with all of the links that tend to mess up printed output, and any links in the footer. We have also created a class called “nopr”, which basically means “no print”. You can add that class to any element on a page. Like all CSS elements, it must appear in the HTML sent to the user’s browser and will not work in any PHP code that is processed on a server.

We typically add the nopr class to any advertising or other page elements that we do not want to see displayed on a printed page. You can also manipulate and rearrange any divisions or any other block elements on a page to produce printed output that looks more professional.