QR codes have gained traction these days, as mobile devices like smartphones and tablets are gaining popularity. You must have seen QR codes with small black and white squares on various products that you buy from your grocery store, and on many websites.
These QR codes can be scanned by using a QR code scanner app on iPhone, Android, Windows Phone or on other platforms. In this tutorial, you’ll learn how to add unique QR codes to WordPress, automatically, without any need to manually generate it for each post.
Adding QR Code
To generate QR code for each WordPress posts, we can use the Google Chart API. Using Google’s API makes it really simple for anyone to add QR codes. All you need to do is to simply add the following code to your single.php file.
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=<?php the_permalink(); ?>" alt="QR code" />
Add this code where you want the QR code to appear. In most cases, you would like to add it at the end of the post, but it really depends on your needs so feel free to experiment with the placement of the QR code.
QR Code Parameters Explained
Let’s take a look at the parameters used in the above code.
https://chart.googleapis.com/chart? – This line calls the Google Chart API.
chs – Allows you to specify the image size in pixels, in the format width x height. For e.g. 150×150.
cht – Allows you to specify the type of image: QR means QR code.
&chl=<?php the_permalink(); ?> – Calls the permalink of that particular single post.
The above code will add a QR code of size 150px x 150px. You can change this size to anything that you prefer.
Those who’re running eCommerce sites on WordPress can also use this method to add QR code to each of their products. However, if you’re thinking to add just one QR code to the home page of your site, then you can use any online QR code generator to generate a QR code and then add it to the home page on the sidebar (using a text widget) or any other place that you prefer.
While you’re here, scan the above image with a QR code scanner app on your mobile device and see where it leads you to.