How to Make Your WordPress Site Print Friendly

Just goes through 100’s of websites powered by WordPress. All of them have different structure and styles. Thus WordPress themes are always designed for better user experience. Have you ever printed any such kind of WordPress posts? May not looks that much great because of sidebars, navbars, footer widgets, ads etc. Which means you need to include different style sheets for making your WordPress print friendly.

Making a print friendly theme is not a rocket science. You can easily create a print friendly version of your WordPress theme. But most of us didn’t spend 15 minutes for such a simple tweak.

Most bloggers(Me too)didn’t give much importance for such simple things. I am not compelling you to create a print friendly style sheets. But remember one thing. Small things may do great wonders. So never forget to enhance your blog with small and simple tips.

Print Friendly WordPress theme How to Make Your WordPress Site Print Friendly

Image Credit: Flikkr

Print Friendly WordPress theme

Before going furthermore please try to take a print out of your WordPress blog. Enabled special buttons for taking print out? Just check with it or take a print preview in your browser. Most probably your print should look exactly like your current theme. If you are having bigger dimensions (Width: above 900px) printed version (A4)should looks ugly and unreadable.  But it looks pretty descent if you taken off  that sidebars.  Ads and footer widgets may also looks ugly.  So taken off unnecessary parts of your blog. After doing all this stuffs our print sheet should look like a handwritten version of pages.

There are some simple methods for enhancing your theme. You can either use plugins or you can create your own print friendly style sheets. In my opinion it is always better to create separate  style sheets for print media.

Basics for Creating Print Style Sheets

Creating a Print Style Sheet

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

  1. Create a text file called print.css with elements.
body { background:white; color:black; margin:0 }
  1. Save it to your WordPress Theme folder.
  2. Type (or paste) in the following to get the print styles started and save the file:

4. Add this code snippets into head section of your header.php template file:

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

or you can simply put <link rel=”stylesheet” href=”http://domain.com/wp-content/themes/themename/print.css” media=”print”>

Understanding Your Theme

You have to include some important style sheet elements
body,#header, #content, #comments,#sidebar,#footer
The structure for most WordPress sites is as follows. before writing any code, make sure your theme following these elements.Now start writing your code. Remember we already included black and white typography for entire print sheets. Now you have to define other elements.
Excluding sidebar and footer elements.
#sidebar,#footer{display:none}
Here it is the example for print style sheets that I am using in this example.

body {background: #fff none !important; color: #000;}
#wrapper {clear: both !important; display: block !important; float: none !important;position: relative !important;}
#header {border-bottom: 2pt solid #000;padding-bottom: 18pt;}
.entry-content {font-size: 14pt;line-height: 1.6em;}
.entry-title {font-size: 21pt;}
#branding img,#respond,.comment-edit-link,.edit-link,.navigation,.page-link,.widget-area,.entry-header,.rdfa-breadcrumb,.sharing,.tags,#rp-sm,#author-info, #copyright-container,#sidebar-container,#about-us,#footer-container,#below-logo-container,#goog1,#goog2 {display: none !important;}
#container, #header,#footer {margin: 0;width: 100%;}
#content,.one-column #content {margin: 24pt 0 0;width: 100%; }
#site-info,#site-generator { float: none;width: auto;}
img#wpstats {display: none;}
#site-generator a {margin: 0;padding: 0;}
#main {display: inline; }
.home .sticky {border: none;}

Save this file and check your print preview. Need further improvement? make a deep look in your theme to enhance print style. You can also use Google chrome inspect element feature or Firefox firebug add-on.

Reference: WordPress Codex

Share this

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>