Creating Printable Post Pages in WordPress

Some time ago I created a post titled How to Create Printable Web Pages where I talk about using two CSS style sheets for a web site: 1 for the screen display and one for printing. I used the two style sheets when Technically Easy was on Blogger, but since then I never created a print-only CSS style sheet.

Since this blog is comprised of many tutorials and how-to guides, I decided I should provide the ability for a visitor to print a post without the sidebar, navigation bar and RSS subscription area taking up space on the printed page. As I thought about it, I figured I could provide a more flexible solution than just creating a print-only style sheet, so this post will explain how I manage to create a printable version of each post.

Setting Up a Printable Post Page

While you can simply create a second CSS file and set the media property to “print”, it will only take effect when a visitor previews the printed page or prints the page. I wanted to create a link that will display a printer-friendly page in a browser window.

There are a few steps involved in doing this, and you will need edit a few files, but the code isn’t complex or difficult. To create printable post pages in WordPress, use the following steps:

1. First, you will need to create a print-only CSS style sheet. This style sheet will be used by the printable post pages, so ensure you hide everything you don’t want to display on the printed page. How to Create Printable Web Pages provides brief explanations of how to hide specific elements. Save this CSS style sheet as print-style.css in your theme directory.
2. We will now create a function that will determine if the displayed page is a printable page. Open up the functions.php file that is located in your theme directory, and add the following lines of code:
   <?php
   function is_printversion()
   {
     if ($_REQUEST["disp"] == 'print') {
       return true;
     } else {
       return false;
     }
   }
   ?>
3. Save and close the functions.php file.
4. Next, open the header.php file and add the following lines:
   <?php if (is_printversion()) { ?>
     <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/print-style.css" type="text/css"/>
   <?php } else { ?>
     <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
   <?php }?>
5. Save and close the header.php file.
6. The final file to edit is the single.php file to display a link to the printable post page. Include the following code anywhere in the post you wish to display the link:
   <a href="<?php the_permalink() ?>?disp=print" rel="nofollow" title="Printable version of <?php the_title_attribute(); ?>">Printable Version</a>
7. Save and close the single.php file.

Now that you have edited the above files, lets look at how the printable post page is generated.

How it All Works

The link in the post page includes the full URL to the current post with the addition of the disp parameter. This parameter is set to print in the link. This link is basically a request for the same post page (itself), but with the new disp parameter also being passed back to the server.

When the post page is processed, the header.php file is executed to create the header portion of the page. Within the header PHP file, we included a call to the new function we created in functions.php called is_printversion. This function simply checks the value of the disp parameter, and if the parameter value is print, then the function returns true.

Back in the header PHP file, if true is returned by the function, then the print-only CSS style sheet is written to the post page, and you will see the version that can be printed. If the function returns false, then the normal style sheet is written.

You do, however, have to be careful with duplicate content and search engines. You will notice that I did include the nofollow attribute in the link, but you may want to take other precautions. You could edit your robots.txt file to prevent search engines from indexing your printable versions, or include meta tags in the header.php file.

I include the meta tags in the header.php file to only index the regular post pages. The meta tags in my header.php file looks like:

The above meta tags will index regular post pages, the home page, and single pages, but not the printable post pages or any other page, such as archives and categories, on Technically Easy. I explain the above lines in the post Preventing Duplicate Content in Search Engines With WordPress

By using the above code you can now provide printable post pages to your visitors with minor changes to the files in your theme.