How to Make Your WordPress Site Look Great in Print

Making your WordPress blog or site print-friendly is probably not the first thing on your to-do list… It wasn’t on mine either.

In today’s day and age we’re preconditioned to believe that no one ever prints out websites. That everyone is reading our content online, on laptops, desktop computers, iPhones, tablets, mobile phones, or all sorts of other things, but not the old-school way – on a piece of paper.

I’m not saying that thousands of people have started to read blogs on paper all of a sudden because it wouldn’t be true, but providing a print-ready version of your content is still a great idea. Considering the fact that it doesn’t actually require that much work to get done anyway.

Why make your blog print-friendly?

It simply makes your site look more professional, more usable, and more accessible.

Probably one of the most important rules of website development is not to make any assumptions about the way people will interact with your site.

That’s why we focus so much on making our sites to look good on different browsers, different screen resolutions, and different devices. But this actually goes a lot further.

Just to give you an example. Great designers know that some colors can’t be distinguished by color blind people. So they don’t use those colors to form some kind of contrast. Instead, they go with color schemes that are distinguishable by all people.

Preparing a print version is kind of a page from the same book. You just never know who will visit your site, and what will be important to that person. What if they want to use your post as a reference during a meeting or a presentation, or hang them over to their employees as training materials.

You just need to be ready for such a scenario taking place.

Isn’t your WordPress blog print-ready from the get-go?

I’m afraid not. If you don’t believe me just visit your blog right now, in your browser go to Print > Print Preview. I, for example, see something like this:

Not extremely bad, right … but the whole print actually takes eight (!) pages, even thought that whole post is only 900 words long.

The sidebar alone takes the last three pages. Who needs the sidebar on the print version, right?

There’s a really good chance that your site looks quite similarly, or that it at least shares some of the same problems.

However, WordPress is not to blame here. You shouldn’t blame your theme either. Actually, designing a theme that would look equally as good on a screen and on a piece of paper is impossible. There are always some compromises you have to make.

Of course, you can try to make some slight changes to your CSS file so it looks kind of good on computer screens and when printed out, but this will force you to give up on many cool elements you could use on your site if you didn’t care about print.

Actually, doing these slight changes to CSS files takes much more time then making your site really print-friendly. I know … I made this mistake in the past.

Slight changes are always tricky. When you change just one thing, another thing stops looking good. So you try to do something to fix that, only to find out that your site does no longer look good in IE, for example. And so on, and so on. This almost never ends.

Which brings me to the how-to part of the post…

There are two great ways of making your WordPress blog print-friendly:

1. Edit your CSS file or create a custom print.css file

CSS is what comes to mind right away if we’re talking anything related to the style of our sites, so it’s no surprise that it’s a good starting point when making our blogs print-friendly.

Two paths here, though. You can either edit your existing CSS file, and include some new styles associated with printing, or you can create a completely new CSS file – print.css.

To implement the former start with the HTML declaration in your theme’s main file. Search for something like this:

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

And change the last attribute to:

media=”screen, print”

Now, your main CSS will be used for creating print styles too.

Then you can edit the file and create some new styles. Start your declaration by using:

@media print {
/* your declarations */
}

Even though this tactic does its job, using a separate file (like print.css) is much more intuitive and easier to grasp.

Start by including a new declaration in your theme’s HTML, something like:

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

Then create your print.css file and start it with the “@media print“ declaration, again. Now you can begin creating your styles.

There are no restrictions here, and you can choose to include or exclude whatever you want from the print version of your site. However, keep the following guidelines in mind.

  • Use “display: none” for blocks that you want to remove from your print version. But remember to rearrange the rest of your layout so it doesn’t break down because of the missing blocks.
  • Use full width for your print version. Limiting the site’s width to 1000px looks good on a computer screen, but won’t work on a piece of paper. You should always let people print your content in full width.
  • If you want to control the printed font sizes then use points instead of pixels or “em.” Printers do a lot better job at understanding points than anything else.
  • Remove comments. In most cases, you don’t want to include comments on your print version. Especially if you get a lot of them … you don’t want your post to be printed on 2 pages followed by 8 pages of comments. Simply find the name or ID of the comments selector, and use “display: none” on it.

Finally, if you want an example of a nice print.css feel free to visit wordpress.org; the section of Styling for Print.

2. Get some cool plugins

Not surprisingly, the other approach of getting a print-friendly version of your content is to use some plugins.

There are three that I can recommend depending on what level of functionality (and complexity) you’re after.

The simplest solution is the WP-Print plugin. It’s actually the one I’m using on my blog.

It gives you a nice set of settings consisting of things like: printing comments, links, images, videos, and including a disclaimer info in the footer. On the user side it simply provides a print button. When a visitor clicks it they get presented with a nice looking print-ready version of the page they’ve been reading.

For example, here’s what the same page (the one I’ve mentioned earlier in this post) looks like as a printer-ready version:

Much better, right? Only the essential stuff is there, no clutter, no noise.

The second plugin is Print Friendly and PDF Button. This plugin is a bit bigger and offers some additional functionality. First of all, it displays a print-ready version in a lightbox manner. The visitor can choose if they want to print the page, save it as PDF or send it as email (or tweet about it).

The final plugin is PDF & Print Button Joliprint. The main idea is still the same – you get a print button to create a print-ready version of your pages or posts. However, this plugin uses an online service called Joliprint, which means that your content goes through joliprint.com before it can actually get printed out. Also, the plugin allows visitors to save content as PDF, save it to Google Docs, and share it on Twitter or Facebook.

In conclusion, if you don’t have a print-friendly theme then the easiest way for your would be to use WP-Print. However, if you need more customization you should probably create your own print.css file, which will give you full control over your design.

Is your WordPress site print-friendly? How did you get it to be print-friendly?

there are 3 comments added

  1. Gerardo 30th March 2012

    Un artículo muy útil. La verdad es que hasta ahora no lo había tenido en cuenta pero voy a seguir tu consejo, estoy muy de acuerdo con tu exposición.

  2. wordpress theme club 30th June 2012

    Hi, i think that i saw you visited my site so i came to “return the favor”.I'm trying to find things to enhance my website!I suppose its ok to use a few of your ideas!!

  3. Sau Hi 12th April 2013

    What should I remove to show pretty page for printing?

(optional field)

HTML tags are not allowed.

Reset fields

back to top