Is Your WordPress Blog Printer-Friendly?

Print CSS

As I completed yesterday’s post on Social Media ROI, I wanted to send a preview of it to Dotster CEO Clint Page. When I printed to a PDF, though, the page was a mess!

There are still many folks out there that like to print off copies of a website to share, reference later, or just file with some notes. I decided I wanted to make my blog printer-friendly. It was much easier than I thought it would be.

How to Display Your Print Version:

You’ll need to understand the basics of CSS to accomplish this. The most difficult part is using your browser’s developer console to test displaying, hiding, and adjusting the content so that you can write your CSS. In Safari, you’ll need to enable the developer tools, right-click your page, and select Inspect Content. That will show you the element and CSS associated.

Safari has a nice little option to display the print version of your page in the web inspector:

Safari - Print View in Web Inspector

How to Make Your WordPress Blog Printer-Friendly:

There are a couple different ways of specifying your styling for print. One is just to add a section in your current stylesheet that is specific to the media type of “print”.

@media print {
     header, 
     nav, 
     aside { 
         display: none; 
     }
     #primary { 
         width: 100% !important 
     }
     .hidden-print, 
     .google-auto-placed, 
     .widget_eu_cookie_law_widget { 
         display: none; 
     }
}

The other way is to add a specific style sheet to your child theme that specifies the print options. Here’s how:

  1. Upload an additional stylesheet to your theme directory called print.css.
  2. Add a reference to the new stylesheet in your functions.php file. You’ll want to ensure your print.css file is loaded after your parent and child stylesheet so that it’s styles are loaded last. I also placed a priority of 100 on this loading so that it loads after plugin Here’s what my reference looks like:

function theme_enqueue_styles() {
    global $wp_version;
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
    wp_enqueue_style( 'child-style-print', get_stylesheet_directory_uri() . '/print.css', array(), $wp_version, 'print' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' , 100);

Now you can customize the print.css file and modify all of the elements that you want hidden or displayed differently. In my site, for example, I hide all the navigation, headers, sidebars, and footers so that only the content I wish to display is printed.

My print.css file looks like this. Notice that I also added margins, a method that’s accepted by modern browsers:

header, 
nav, 
aside { 
    display: none; 
}
#primary { 
    width: 100% !important 
}
.hidden-print, 
.google-auto-placed, 
.widget_eu_cookie_law_widget { 
    display: none; 
}

How the Print View Looks

Here’s how my print view looks if printed from Google Chrome:

WordPress Print View

Advanced Print Styling

It’s important to note that not all browsers are created equal. You may want to test each browser to see how your page looks across them. Some even support some advanced page features to add content, set margins and page sizes, as well as a number of other elements. Smashing Magazine has a very detailed article on these advanced print options.

Here’s some page layout details that I incorporated to add a copyright mention in the bottom left, a page counter on the bottom right, and the document title on the top left of every page:

@page { 
    size: 5.5in 8.5in;
    margin: 0.5in; 
}
@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "©  " attr(data-date) " DK New Media, LLC. All Rights Reserved.";
    font-size: 9pt;
    color: #333;
  }

  @bottom-right { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }

  @top-right {
    content:  string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  }
}

2 Comments

  1. 1
  2. 2

This site uses Akismet to reduce spam. Learn how your comment data is processed.