How to Create print.css for a printer Friendly Blog Template in Wordpress

Make your Blog Printer Friendly : Code and CSS for Printing a Webpage

It is a good practice to make your blog printer Friendly. Regular readers visiting your blog may wish to print some of your articles and it is advisable to use a separate stylesheet for print purposes. This article describes how to create a printer friendly blog by using a separate print.css file.

Step 1 : Identify the Unnecessary Elements

The first step involves identifying all the unnecessary elements in your blog’s theme. Typically following elements should be removed in the print stylesheet

1. Advertisements

2. Logo

3. Comment form

4. Subscription boxes and newsletters

5. Search boxes

6. Widgets and other unnecesary icons

7. Header image and footer.

8. Sidebar

The main idea is simple.You must allow only the article to print. Other unnecessary css div’s should be kept hidden from the print stylesheet.

To identify the unnecessary classes, Install firebug. It is a very useful Firefox add on for web-designers. Using this add-on, you can see the source code of a webpage along with CSS and the scripts. Press F12 to start Firebug and identify the unnecessary classes and id’s in your blog template.

Click “Inspect” and select elements by hovering the rectangle over different positions. The corresponding code is marked blue in the Firebug pane. Note down the all the ID’s and Div classes that you want to remove (e.g <div class=”sidebar”> or <div id=”navigation”>).

Step 2: Let’s Create the Print.CSS

After you have noted down all the unwanted ID’s and classes create your “print.css” file as explained below:

1. Open notepad and create a new file. Name it “print.css”.

2. Use the following code to exclude elements from the print template

#sidebar {display:none;}

This excludes everything between <div id=”sidebar”></div> from appearing in the print template. To exclude classes (e.g <div class=”menu”></div> use the following code :

.menu {display:none;}

Similarly find all the classes and ID’s and add the codes in print.css file.

Next include the following code :

body {font-family: arial,helvetica,sans; font-size: 13px; background:fff; color:000;}
a,a:visited,a:link {color:#000; text-decoration:none}

This defines the Styling of your article. It is recommended to use only Black and White colors as this will reduce print costs at the user’s end.

Step 3: Call the CSS from the header

When you are done creating the print.css file, upload it in your web server. Next, open header.php file from WordPress theme editor and include the following code between the <head> and </head> tags:

Step 4: Link The JavaScript “Print this Page” From Your theme header

Finally paste the following link in your html source code. WordPress users need to paste the file in “single.php” file.

<a rel=”nofollow” href=”javascript:print(document)” title”Print Article”>Print this page</a>

You can update the header.php file from WordPress theme editor. Select your current theme and then click the header.php file to edit it

Note: Do not copy the codes directly in any htnl editor (e.g MS-Frontpage).Copy to notepad first.

Test the print.css file

Don’t Forget to test the print.css file. You can use print preview from browser or use microsoft one note to get the feel how your printed article will look. But the best option is to print an article on paper.

Do You have any more ideas to make the print.css more better and user Friendly ? Please share your ideas with us.