Styling for Print

WordPress makes it easy to style your WordPress site with Themes , many of which are tested thoroughly on different computers and browsers before being released . These are designed for the screen. But what about having your WordPress site designed for print? Some people still like to print out web pages and read them at their leisure, so consider designing your WordPress site for print.

By default, when a user prints a WordPress web page that is not designed with printing in mind, the style sheet is stripped away and the page prints as if there is no style sheet. It tends to look like a long line of information beginning with your header, the content, then the long list that is your sidebar, then footer. Not very pretty.

To see what your WordPress site looks like for printing, print out a page or, from your browser's menu, choose Print > Print Preview. Not very pretty, is it? And fairly wasteful of paper having that long list of sidebar blogroll links printing out over two pages.

To make your site pretty to print, we need to focus on the architecture of the site, the structure that holds the content within each section. Luckily, WordPress Themes' modular file system tends to make this process much easier, since major structural areas are clearly designated.

The core structure for most WordPress sites is as follows, though the names may be different on your Theme.

#header
#content
#comments
#sidebar (or #menu)
#footer

You will find the styles for these sections in your style.css style sheet in your WordPress Theme folder.

How you change these sections in preparation for printing is up to you. You can still print the sidebar but not the footer, or include the footer but not the sidebar, change font styles and sizes, or even tell it to print images or not. We will give you some examples and the rest you can figure out on your own by experimenting.

Creating Print Styles

Styles associated with printing can be set in two different ways. If you want very simple changes to the site for easy printing, you can use the first method and add them directly to the style sheet. If you want to control the end result of your site when printed, it is best to keep these in their own print.css style sheet.

Note: Some WordPress Theme authors may have already thought ahead and included print styles for their Theme. Check the Theme folder for a print.css style sheet file and in the style.css for references to print before proceeding.

Styles for printing can be set within the style sheet itself. The browser must be "instructed" to look for the print styles in the style sheet, and they must be in their own section.

To instruct the browser to look for the print styles within the style sheet, change your style sheet link in the head section of your header.php template file from this:

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

to this, instructing the browser to look for print styles in the style sheet:

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

In your style sheet, usually at the very bottom, add the following to start your print styles:

/* Print Styles */
@media print {
body { background:white; color:black; margin:0 }
}

To create an independent style sheet featuring all of your print styles:

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

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

Within the Print Styles section on your style sheet or in your print style sheet, add your site's structure selectors (names) like this (yours may be different):

/* Print Style Sheet */
@media print {
body { background:white; color:black; margin:0 }
#header { }
#content { }
#comments { }
#sidebar { }
#footer { }
}

To include each section, simply add display:block to the selector's declarations or attributes.

#content { display:block }

To not include a section, so it will not print, add display:none to the selector's declarations.

#footer { display:none }

Using display:none, any element on your web page can disappear when printed. If you have advertising or other elements you do not want to appear when printed, then add the display:none to their selector under the print section.

Structural Changes

Just because you have set part of the structure of your site to "disappear" when printed does not mean that the structure moves around to accommodate it. Many Themes feature a corner of their content container anchored to a specific spot, like 150 pixels from the left of the screen. Even though the sidebar may be set to display:none, unless the positions and margins are changed in the content, it may bring with a 150 pixel gap on the left. You will also need to change the positioning of the content section to accommodate the loss of the sidebar.

Since, most users want to drop the sidebar and position the content so it stretches across the page in a comfortable reading layout, use this example:

#sidebar { display:none }
#content{ margin-left:0; 
     float:none; 
     width:auto }

This makes the sidebar disappear and instructs the browser to use whatever the margin settings are by default for the printer.

Printing Print Sizes

You can control the printed font sizes by using points instead of pixels or em as these related to information the printer can understand.

#header { height:75px; 
     font-size: 24pt; 
     color:black }
#content { margin-left:0; 
     float:none; 
     width:auto; 
     color:black; 
     font-size:12pt }

Printing Comments

In general, most people want to read the comments, but they certainly do not want to see the comment form when a page is printed. The comment form is for use on the screen and can take up most of a sheet of paper when printed.

Look inside your WordPress Theme's folder for the comments.php or comments-popup.php template files and open whichever one you use. Look through the template for the start of the comment form and find the ID selector or name. It might look like this:

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" 
method="post" >

The CSS ID for the form is commentform. To not display the comment form when printing, add this to the printing style section of your style sheet.

#commentform { display:none }

Page Breaks

While these do not work for every browser or printer, you can instruct them not to "break" your photographs or graphics in two pieces, or break apart blockquotes, or not to have a page break after a heading but to force it to break before the heading. This is not a perfect science, but if you are really particular about how your printed web page looks, you might want to use these.

h1, h2, h3, h4, h5, h6 { page-break-after:avoid; 
     page-break-inside:avoid }
img { page-break-inside:avoid; 
     page-break-after:avoid; }
blockquote, table, pre { page-break-inside:avoid }
ul, ol, dl  { page-break-before:avoid }

There are many aspects of your web page design you can control when printing, including the size, colors, and looks of links, headings, titles, author information, the post meta data, any part of your web page. Here is an example of one usage that you can use as a reference.

@media print {
body {background:white; 
     font-size:10pt; 
     margin:0 }
#sidebar { display:none }
#header { height:75px }
#content{ margin-left:0; 
     float:none; 
     width:auto }
.demo .red { color:black; 
     font-weight:bold }
#content a { font-weight:bold; 
     color:#000066; 
     text-decoration:underline }
#content{ margin-left:0; 
     float:none; 
     width:auto }
#footer, .ad { display:none }
h1, h2, h3, h4, h5, h6 { page-break-after:avoid; 
     page-break-inside:avoid }
h3 { margin-left:10px; 
     margin-bottom:0px; 
     padding-bottom:0px }
blockquote, table, pre { page-break-inside:avoid }
ul, ol, dl  { page-break-before:avoid }
img.centered { display: block; 
     margin-left: auto; 
     margin-right: auto; }
img.right { padding: 4px; 
     margin: 0 0 2px 7px; 
     display: inline; }
img.left { padding: 4px; 
     margin: 0 7px 2px 0; 
     display: inline; }
.right { float: right; }
.left { float: left }
img { page-break-inside:avoid; 
     page-break-after:avoid; }
}

If you have translated this article, or have a similar one on your blog, post a link here. Please mark fully translated articles with (t) and similar ones with (s).