QR codes: Why they matter and how to add them to your site

The adoption of native QR code scanning on mobile devices, and the need for touchless communication and transactions, has breathed new life into an oft-ignored technology. Now is an excellent time to consider adding QR codes to web pages, and here’s how to do it.

QR code flow

QR codes were invented in 1994 by DENSO WAVE, and the idea for them is credited to Masahiro Hara, who led the development of the “quick response” code. Hara’s inspiration for the creation of QR codes came from his love of strategy board games.

I used to play go on my lunch break. One day, while arranging the black and white pieces on the grid, it hit me that it represented a straightforward way of conveying information. It was a eureka moment.

The Little-Known Story of the Birth of the QR Code via Nippon

Unlike barcodes, which use lines to encode a linear row of numeric digits, Hara used blocks to encode complex information within a small scannable space. For example, QR codes can contain more than a Universal Product Code (UPC). They can also include sentences or contact details while remaining the same size as a typical UPC.

To help gain mass adoption and to turn QR codes into a standard, DENSO WAVE opened up the patents for anyone to use. At first, QR codes had the most utility for products. However, as mobile phones turned into smartphones with cameras, QR codes became useful in other ways.

By 2012, several years after the iPhone was invented, QR code usage experienced significant growth in Europe, and it became commonplace to use smartphones to scan QR codes for retrieving information. QR codes also became ubiquitous in Japan. Meanwhile, QR code usage in the United States waned.

For several years, Android and iPhone users had to find and download a special app to read QR codes. That proved to be too much friction for mass adoption. By 2016, most Android-based smartphones gained native support for QR codes. Then, in late 2017, iOS 11 added QR code scanning to its native camera app.

After 2017, QR codes began to gain momentum again, but it ultimately took a pandemic to make QR codes become mainstream. In an effort to create a touchless dining experience, restaurants turned to digital menus. In 2020 it became common for restaurants to stop providing physical menus, and to instead provide QR codes to view the menu digitally.

Some restaurants, like True Food Kitchen, digitized the entire experience. Using a QR code, patrons could view the menu, order food, and also pay for the meal on their smartphone. QR codes can now be found just about everywhere, and the friction to using them has been removed because of native smartphone support.

Adding QR codes to web pages on WordPress

Over a decade ago I added QR codes to a handful of sites because I thought they were going to be widely used. I saw how useful they could be for articles that were printed or saved as PDFs. People could quickly scan the code with their smartphone and view the article on their device without having to type a long URL.

I removed the QR codes after about a year because interest in them all but disappeared. However, now that QR codes have finally become mainstream, I started adding them back to my sites.

If you use WordPress, the easiest way to add QR codes to your web pages is to use a reputable plugin like Kaya QR Code Generator. But if you’re like me, and you don’t want to add another plugin to your WordPress instance, there’s another way to do it. This method also works for platforms other than WordPress. The only requirements are a web server that supports PHP and the GD graphics library. Fortunately, most hosting providers like Pair and WP Engine already support it.

Download the open source QRcode software

I use the same code I used over a decade ago, except it’s an updated version with security fixes. The author, Swetake, is a Japanese software engineer, and their code is aptly named, QRcode. It’s the simplest solution I’ve found for easily and automatically creating QR codes for web pages. You will want to download version 0.50j or later.

Copy the code to the server

This is optional, but I recommend renaming the folder from qr_img0.50j to something more semantic, like qrcode. Then, upload the folder and its contents to your site. The folder can technically go anywhere that PHP scripts can be executed, but I prefer to put it inside my custom theme. For Coywolf Pro it’s /wp-content/themes/coywolf/qrcode/.

The PHP script works by appending it with the details you want in the QR code. For example, if this is the path to the script:

Then you would append it with the parameter ?d= and enter the details for the QR code like this:

The URL will output the following QR code:

QR code example

And when the QR code is scanned by a smartphone’s camera, it will display the text, “QR codes are fun.”

QR codes are fun

Adding the dynamic QR code image to WordPress

The purpose of adding QR codes to web pages is to make it easy for someone to scan a printed page with their smartphone so they can visit and read it on their device. Instead of creating a QR code with text, like the previous example, we will create one with the page’s URL.

The QR code can go wherever you want on your WordPress site. For example, if you only want QR codes on posts, then you can add it to the single.php template. I prefer the QR code to be the last object on the page, and since I’m fine with it being on every page of the site, I added it to the footer.php template right before the closing </body> tag.

This is the code I added to the footer.php template:

When the code runs on the page, the HTML source looks like this:

Additionally, since I don’t want the QR code to appear on screens, I reference the qrcode class in the CSS and set it to display:none;. That will make the QR code invisible on browsers. And to make it visible when the page is printed or saved as a PDF, I added the print media query and set the qrcode class to be visible and center-aligned.

The result is the QR code is hidden when pages are viewed on screens, and it appears when the page is printed.

QR code in print view

Don’t lazy load the QR code image

I recommend not adding loading="lazy" to the QR code image, because it won’t print in Chrome or Safari unless the users scrolls down the entire page and loads all of the images first. It also won’t print, regardless of scrolling, if you hide it for screens using CSS.

Block bots from crawling and indexing the QR code images

There are a couple of reasons why you should consider blocking bots from crawling and indexing the QR codes.

  1. There is no practical use for having the QR codes indexed and shown in Google Images results.
  2. Since the full URL of the page is appended to the image link, monitoring tools like Ahrefs will report double-slash errors.

To block bots, add the following line to your robots.txt file, and replace the path to the qrcode folder with the path used by your site.

Disallow: /wp-content/themes/coywolf/qrcode/

Add a Cloudflare Firewall Rule to disable hotlinking

As simple as this QR code creation method may be, it does have a major downside. The link that creates the image could be used by anyone to create an unlimited number of unique QR codes. Not only could this be abused, it could also be a potential distributed denial of service (DDoS) attack vector. Fortunately, there’s an easy fix for that using Cloudflare’s Firewall rules.

Go to the Cloudflare Dashboard, select your site, and then navigate to the Firewall Rules page. Click on the Create a Firewall rule button and then name the rule. I named mine “Block QR code hotlinking”.

You can manually build the rule with the following settings:

  1. Choose URI Full for the Field, contains for the Operator, enter the path to the qrcode folder for the Value, and select And.
  2. Choose Referer for the Field, does not contain for the Operator, and enter your site’s domain for the value.
  3. Make the action be Block.

Alternatively, you can click on the Edit Expression link, copy and paste the expression below, and change the path and domain to match your settings.

The rule should look similar to this screenshot:

Cloudflare Hotlink rule

Finally, save and deploy the rule. You can test the rule by making sure the image still renders on your site, linking to the image from a different domain, and pasting a direct link to the image in the browser. Linking to an image from another domain should break the image, and visiting the image directly in the browser should return a Cloudflare “Access denied” page.

Cloudflare Access Denied page

If you want to see the QR code in action, print or save this article to PDF. It should appear on the last page.

Related Articles

Jon is the founder of Coywolf and the EIC and the primary author reporting for Coywolf News. He is an industry veteran with over 25 years of digital marketing and internet technologies experience. Follow @henshaw