Make your WordPress blog printer-friendly without plugins
After using the Print Friendly and PDF Button plugin for a recent WordPress re-theme, I discovered one major flaw: embedded Google ads.
Most clients will reject third-party ads on their site. Otherwise, the plugin runs smoothly. Although I didn’t like the print popup box’s green color (which isn’t quickly changed in settings), I considered removing the ads legitimately with the plugin’s ad-removal fee ($4 a month).
I also tried some other print friendly plugins, but liked them even less.
Luckily, WordPress has this great “how to” codex for setting up your own printer-friendly styling via CSS. It walks you through it pretty nicely, although I noticed some repetitive code in their final example of printer-friendly CSS.
Depending on the WordPress theme you are using, the code you need could end up quite different than this, but here’s what I ended up using for PageLines’ WhiteHousePro3 theme:
/* Print Style Sheet */
@media print {
body {background:white;
font-size:10pt;
margin:0 }
#header { height:75px;
font-size: 24pt;
color:black }
#content { margin-left:0;
float:none;
width:auto;
color:black;
font-size:12pt }
#maincontent a { font-weight:normal;
color:black;
text-decoration:underline }
#contentcontainer { display:block }
#contentborder { display:block }
#comments { display:none }
#commentform { display:none }
#sidebar { display:none }
.post-footer { display:none }
#footer { display:none }
#widgets{ display:none }
#wrapper { display:block }
#nav { display:none }
#subnav { display:none }
#header { display:none }
#grandchildnav { display:none }
#overview { display:none }
#searchform { display:none }
#sidesearch { display:none }
#morefoot { display:none }
#searchsubmit{ display:none }
#welcome { display:none }
#fcolumns_container { display:none }
#subfoot { display:none }
#cred { display:none }
#calendar-wrap { display:none }
#wp-calendar { display:none }
#caption { display:none }
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 }
img { display:none }
.right { float: right; }
.left { float: left }
margin: 0 7px 2px 0;
display: inline; }
img { display:none }
}
I opted to remove the images from printing in the above example.
Leave a Reply