Frank Schulte-Ladbeck

By having a special stylesheet and a few lines of code, you can give your visitors to print a post.

Do you print a page off of a website to read later? Well, pages are typically saved in a folder when I want to read them later. However, I do print web pages all the time, including blog posts. When I began to consider the user experience on my home inspection site, I thought that some articles would be popular for printing. Moreover, since I have been reading works in behavioral sciences, I thought that maybe nudging a visitor who is sitting on the fence about my site, to go ahead and print a page. At the beginning of the post, I placed my RSS feed and print command. ( I have since added an email button).

Unfortunately, I ended up printing everything. Sidebar, Footer, and header came along for the ride. That would be a waste of paper for the user who printed, and leave a negative experience when I was trying to create a positive one. I thought that the solution lay within my javascript, so I researched it all. I even studied my php and HTML to find a solution. On various forums, I found statements with some code that would help me in my dilemma, leading me to the belief that I was on the right track. I tried their solutions, but none worked. I thought that I must be doing it wrong. Maybe there is a purely javascript solution, but there was a far simpler path by creating a new style sheet.

My attention for this site is to write for small business people who may have no experience with the internet, so let me translate some of what I said in the last paragraph. Javascript, php, HTML, and css (for the stylesheet) are all programming languages that work together to make your WordPress site function. To have a post print without any extra baggage is simple, once you realize what piece of code you need in which language and where it should be positioned. This post will take you through those steps.

First, you will need a stylesheet that will define what will be printed. If you look under the “Appearance” section in WordPress, you will find a stylesheet, probably called “stylesheet.css” under the Editor section. These are the set of codes that tell a browser, like Firefox, what your site looks like. Now we need to tell the browser what will be printed. This is done by adding a new stylesheet just for printing. We can call it “print.css”. Are you going to need to write code now? No. Download this css file for printing. Now you have a print.css that will handle your site.

Use a FTP client, like Filezilla or the one on your cpanel, to upload this file to your site. Go to your “public_html” file. Look for a file called “wp-content”. You will find a file there called “themes”. Find the name of the theme that you are using. Move a copy of the print.css file into that theme. So /public_html/wp-content/themes/theme name is the path.

Having this stylesheet is not enough; you need to tell the browser that it exists when a visitor comes to your site. To inform the browser, we link to the stylesheet in the header. Under the “Appearance” section in WordPress, you will find an Editor. This brings up a page with a window with code in it and a list of files that make up your theme. Pick the “header.php”. This contains the data that browsers need to display your site. Paste the following code above the </head> tag: <link rel="stylesheet" type="text/css" media="print"href="<?php bloginfo(‘stylesheet_directory’); ?>/print.css"/> . You could paste it just below the link to your other stylesheet. Once a visitor clicks the print command on their browser, only the blog title information and the post with comments will print.

What if you want to nudge your visitors to save your post? What if you have instructions for your product online? Sure anyone can print from their browser, but they may have to hunt for the print command, which may mean that they will not print the page. I placed an icon on the yourhoustonhomeinspector.com site at the beginning of the posts to encourage the idea that a user may want a post to read later. Choosing the top of the post came about, because a visitor may not have time to read now, so he could print the page. Other sites place the print command after the post. I have even seen sites that place the command in the middle of the post. You have to plan where you want it that makes sense to your site and goals. To tell the browser to print, we need a simple javascript code. To make enhance the user experience, I use an icon of a printer, instead of writing “print”. Here is the code when using a print icon:<a HREF="javascript:window.print(”)"><IMG SRC="URL location of the image/Printer.png" BORDER="0"></a>. If using the word “print”, replace the code in the middle parentheses with the word print.

You can find free icons on sites like smashingmagazine.com, or type in free icon sets in your favorite search engine. Look to see that they can be used for commercial use.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.