I’ve long been fascinated by QR Codes. I originally wrote about some of their less conventional uses back in 2007 and I was part of the team that put QR Codes on every badge at SXSW 2010.

If you’re not familiar with them, they’re a type of square barcode that’s most often used to hold a URL. You scan the QR Code with your mobile phone and Boom! you’re on a webpage, no hunt and pecking a tiny keyboard required. Which is mostly why I’m so annoyed at seeing them slapped haphazardly on people’s blogs.

Putting a QR Code on your website is like writing “You are here.” on a Post It note and then sticking it to your eyelid. It’s an accurate if decidedly unhelpful gesture.

However, having a QR Code on a printed page is great because you can always easily get back to the original document (to see if there are new comments, check out what else someone wrote, etc.).

Here’s how to accomplish showing a QR Code only on a printed webpage using Google’s Chart API and some print stylesheet declarations:

There are two separate CSS declaration blocks: one for “screen” and one for “print”. In the screen declaration we’re hiding the div containing the QR Code, and on the print we’re displaying it (and hiding a bunch of other items that don’t make sense on a printed page).

After that, place the code that actually puts the QR Code in the footer (or wherever you want), making sure that the container div’s id matches that used in the CSS.

The QR Code is created by passing the URL of the current page to the Google Charts API. Because this example is for a WordPress blog, we used the “the_permalink();” function to get the current page’s URL.

If you’re reading this online you shouldn’t see a QR Code anywhere, but printed you should find one at the bottom of the page.