Walker News

How To Add QR Code Of Each Post Page In WordPress?

Is there a trick or WordPress plugin to create and display QR Code of each post page in WordPress? Well, I have just get this done with the trick of Google Chart API, instead of using yet another WordPress plugin for such a simple feature!

As you can see, there is a QR Code displayed on the left side of post title, in each posts published on WalkerNews.net. None of these QR Code is same, as each of them is encoded with permalink / URL of the page where it appears, on the fly by Google Chart API while the page is loading!

Having said this, your mobile phone can take a snap of the 2D barcode and open the referenced post page in web browser automatically, if the QR Code reader installed in the mobile phone able to decode it asap.
Well, I have to admit that the displayed image of QR Code is too small to decode efficiently. In additional, probably not all mobile phone QR code decoders are capable to read QR Code version higher than 4 (thus, some posts with lengthy URL might not able be decoded by some QR Code readers in current market).

The trick to create and display QR Code of each post automatically in WordPress

NOTE, this trick requires you to make change in at least one WordPress template file. If you are not comfortable with editing HTML-PHP source code, better to get a similar WordPress QR Code plugin to achieve the same effect (but probably incur certain cost of performance).

1) Browse to your WordPress theme directory and look for the template file that responsible for displaying post page. In my case, this is single.php.

2) Open the template file and add this simple HTML-PHP code before the post title tag (change the 60×60 as well as the width and height value if you expect a different image size):
<img style="float:left;margin:0px 7px 0px 0px;" src="http://chart.apis.google.com/chart?cht=qr&chs=60x60&chl=<?php the_permalink() ?>" alt="" width="60" height="60"/>

That is all you have to do for displaying QR Code of each post in WordPress. The trick will work until the Google Chart API cease to allow public access in such a simple way.

Custom Search

  1. Walker 09-04-10@02:20

    I have just remove the code that calls Google Chart API to display the said QR code for posts in here.

2017  •  Privacy Policy