Making a custom print page layout for WordPress blogs

You can make a custom page layout that is called only when the person wants to print the page or print preview it.

Note: Some WordPress themes have a print.css stylesheet already created, so look for that in the theme directory first.

You must call the print stylesheet in the case of the browser being told to print the page. Do this by adding this to the <head> of your header.php:

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

This is an example of a stylesheet for printing taken from the WordPress codex at:

http://codex.wordpress.org/Styling_for_Print

This example has been modified to hide Flash on the printout among other things:

--BEGINprint.css stylesheet--
/* t added created print stylesheet from scratch for this theme */
/* print style sheet is here */

@media print {
body {background:white;
     font-size:10pt;
     margin:0 }

/* t added to hide flash on printout      */
/* t added for custom flash style */
.flash{
    text-align: center;
    display: none;
}

#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; }
}
--END print.css stylesheet--

Leave a comment