How to make WordPress Print Friendly

Offering print friendly version of blog posts not only gives an extra feature but also helps your user to keep their loved article. By default, no WordPress theme offers such feature. This is due to conflicts with plugin and customizations. There is some 3rd party service which offers good features but that could not be solution for many.

Print Friendly WordPress with small plugin we build will do some simple magic. When user will hit Ctrl+P or any other way to take print the browser will automatically hide all unnecessary elements from prints and print previews e.g. header, sidebars, widgets and footers.

In this post we will add this cool feature to a Genesis Framework based site and a Standard WordPress theme i.e. Twenty Fourteen. Once you understand the approach you will able to customize it for any WordPress site. This will be fun for beginners and I am already here to help you.

Prerequisite: Basic knowledge of html and CSS is required.

What will we need?

We will need three things and I am pretty sure you already have first two.

  1. Google Chrome or Mozilla Firefox. Firebug extension could also be used if you are familiar with it.
  2. File compressor software like WinZip, WinRAR or anything which compress our files to zip.
  3. The starter plugin we have made. Download the zip file or fork it on GitHub.

Note: The plugin is not available on WordPress.org.

Let’s begin with some coding

Hey, I know you might not a web developer. But it will be easy and fun.

Uncompressed the starter plugin you just downloaded and un-compress it. The all we need to edit print.css. By default I have added some basic codes which work with Genesis Theme, Twenty Fourteen and many other untested themes.

While editing the file our goal will be to remove all elements which we don’t want to print. That should be sidebars, footer widgets, footer and sometimes header. Post Meta like author info, comment counts, category and tags also have no meaning for prints.

How to find html elements?

Use Ctrl+Shift+I on Chrome or Firefox to activate Developer Tools pane. After that find the element by hovering the code will highlight the element you have to find.

If you are not familiar with Chrome or Firefox extension tools read this articles:

How to edit print stylesheet?

To hide some element use display: none;

Suppose we want to hide header and footer div. If the div id is #header and for footer #footer the code will be something like:

#header,
#footer {
    display: none;
 }

If the header id is #site-header then you should use #site-header instead of #header.

Further, we might like adjust width and margin for paragraphs, quotes, list styles, tables. I have already added some codes for that which should work fine.

The important thing you should consider editing is line 168. You should change the URL to your site and any disclaimer or notice you want to add.

Important: The print.css file will highly depend upon your site structure and theme/plugins. This will be your home work to identify all the unwanted elements, divs and spans.

Tips: You should also use !important with your CSS.

Compress and upload

Once you are sure that you have made all necessary changes to the CSS file then you should save the file and zip the folder using any compressor. Here you should keep the file structure same as you have downloaded.

Now upload the plugin to your WordPress site and activate it.

Tip: You may also upload the sample plugin I made and then customize the css file using WordPress built-in plugin editor page. The choice is yours.

If you have any problem please consider leaving a comment below or tweet to @BlogSynthesis.