How to Add QR Codes to Printed Web Pages

Published in: CSS - QR Codes - WordPress

When you print any web page, your web browser will automatically add the URL of the site in either the footer or the header area of all the printed pages. This is useful as anyone can easily know the source website from where that page was printed.

The problem is that web page URLs can be long and complex and people are likely to make errors typing them into the browser.

An alternative would be that you create a short URL (using or and append it all your printed pages. The other more convenient option is that you add a QR code to the printed copy that will link the printed page to the source web page with a quick scan.

QR Code on Printed Webpage A QR Code in the print copy of a web page

Add a QR Code to Printed Web Pages using CSS

You will be surprised to know how easy it is to add a QR code to any web page but before I share the implementation detail, let’s see a live example.

Open any article page (for example, this one) and press Ctrl+P (or Cmd+P on a Mac) to open the Print Preview dialog. Scroll to the last page and you will find a QR code that, upon scanning, would lead you to the source page. (If the QR Code missing, just open the Print Preview dialog again.)

If you are to implement something similar in your site, just add the following snippet to your website template.

<style type="text/css">
@media print {

We are basically adding a QR Code image after the <body> tag and since the CSS media type is set to “print,” the QR Code will only appear in the printed version of the page. The QR Code is generated dynamically using the Google Charts API and will vary based on the URL.

WordPress - To add QR Code support in WordPress print stylesheets, open the template file of your WordPress (like header.php or even index.php) and copy-paste the following code anywhere inside the <head> tag:

<?php if (is_single()) : ?>
 <style type="text/css">
    @media print {
      body:after { content:url (<?= the_permalink(); ?>)
<?php endif; ?>

Blogger - The equivalent code for classic Blogger templates would be something like this. If you are using the new XML based Blogger templates, you probably need to use data:blog.canonicalUrl (for the permalink) with the condition set as <b:if cond='data:blog.pageType == "item"'> since we are only displaying QR codes on individual post pages and not the archives.

<style type="text/css">
    @media print {
      body:after { content:url (<$BlogItemPermalinkURL$>)

Also see: Track Printed Web Pages with Google Analytics

📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: CSS - QR Codes - WordPress

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
Amit Agarwal

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube