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 Make Your WordPress Blog Printer-Friendly:
- Upload an additional stylesheet to your theme directory. I found it easier to upload a blank file (print.css) and make edits through the WordPress theme editor as I discovered additional elements I wanted to hide or adjust.
- Add a reference to the new stylesheet in your header. I put it directly below my stylesheet. Here’s the line of code I added:
?php bloginfo('template_directory'); ?>/print.css" type="text/css" media="print" />
- Print a single post page to a PDF file. This will provide you with how your page prints in all it’s terrible glory. Headers, sidebars, widgets, videos, footers… they’ll all be there!
- Utilizing a tool like Firebug for Firefox, you can narrow down the div id’s and classes that you wish to hide from printing. Methodically go through your entire theme and modify each CSS element until you’re left with what you want!
- Add object, embed, and iframe tags with display:none since videos don’t help too much in a print view.
- Reverse the method by adding a div that is display:none in your theme’s CSS that provides a link to your post. At the bottom of each of our posts you’ll find a link/URL in our print view.Link: >a href=">?php the_permalink(); ?>">>?php the_permalink(); ?>>/a>>/div>
- As a last step, make adjustments to your CSS so that the page prints nicely, too. I’ve added an auto margin and 70% width so folks can print and write notes.
Here’s a video that explains the process of making WordPress Printer Friendly using CSS:
Download a Sponsored Marketing Whitepaper: