Wordpress & Web Development

How To Build a Custom Barcode Application With Pic2Shop Pro & WordPress

James Bruce 01-02-2013

barcode scanner applicationIf you’ve got a company database full of product data, connecting that data to a barcode system can be incredibly useful. Perhaps your warehouse workers need a quick way of looking up the product location, or maybe they need to quickly find out the purchase price for a full box and not by unit.


Whatever the situation, integrating barcode reading facilities can be an expensive and arduous task, but it doesn’t have to be. Today I’m going to show you how to use a $10 app and a custom database to pull product data onto your mobile device without expensive equipment.

This tutorial assumes a basic knowledge of PHP. I’ll also be bootstrapping the project with WordPress simply because I’ll then have a large sample set of data to work with from one of my own sites. In a real world scenario, connecting PHP to a custom database isn’t difficult.

You’ll also need a copy of Pic2Shop PRO Barcode scanner. This is available for iOS and Android for around $10. This app serves no other function that to scan something, and allow us to configure a URL to automatically receive and process that data.

Note: iCody is a similarly popular app and slightly cheaper, but only available on iOS. In the interests of making this as cross-compatible as possible, I chose pic2shop. The WordPress side would work just the same, but the URL format would need to be adjusted for other barcode apps.

Getting Started: The Data

The system I’ll be setting up today will scan the barcode from a physical boardgame, and fetch the relevant review from my iPad board games review site. The first step then is to simply scan the barcode numbers from a variety of board games and add the numbers as custom fields to the relevant reviews. In a real world scenario, you’d probably already have this data in your database from a Point of Sale system.


I’ll be ignoring the format and simply using the content of the barcode. In this case 0655132002387 for the game San Juan. As you can see, the app is pretty basic and unconfigured at this point, so scanning the code simply outputs the data on the screen.

barcode scanner application

Copy this into a custom field to populate our database:

barcode applications


Processing: The Web App

To process the data, create a new PHP page in the root directory and call it barcode.php. Let’s just test for now with this:

require_once(‘wp-blog-header.php’); // ensures we can use WordPress functions and db access

In the scanner app, configure the Lookup URL as: http://YOUR_SITE_URL.COM/barcode.php?code=CODE

You needn’t enable GPS locations. The CODE bit will be replaced with the actual code read by the barcode reader app. The output should be something like this:


barcode applications

Great, that should be working. The next step is to fetch a post associated with that meta ID, then fetch the user to it. Use the following code, which assumes the custom field you used was called “barcode”.

require_once('wp-blog-header.php'); // ensures we can use WordPress functions and db access
query_posts( array(
 'post_type' => 'post',
 'meta_key'=> 'barcode',
 'meta_value' => $_REQUEST['code'],
 'meta_compare' => '='
 ) ); // query for posts with specific meta value 
 if (have_posts()) :
 while (have_posts()) : the_post();
 $url = get_permalink() ;
 echo $_REQUEST['code'];
 echo $url;
 echo get_post_meta(get_the_ID(),'barcode',true);//wp_redirect($url ); exit;
 else :
 echo 'No entry for game '.$_REQUEST["code"].' exists yet';


That really couldn’t have been simpler. Here’s a quick demo of the app working. You can download the completed PHP file from here which includes the adjustments made in further work below.

Further Work: Automatic configuration

Typing this URL onto hundreds of devices for your workers is going to be rather laborious, so we can use the automatic configuration built into the app by simply getting them to visit a specific URL. The URL in my case is:


Adjust as neccessary, but note the slight change from the : character to %3A – the rest is simple to understand. In my case, I’ve made this link available to anyone who visits the barcode.php without specifying an actual barcode. They would simply visit the link in their browser, click the link, and it would launch the barcode app on their device if it’s been installed.

barcode scanner application

I hope you agree this was really quite easy. You don’t need expesnive portable scanners if you already have a mobile device with a camera, and integrating it into an existing database system is easy too with a little PHP.

Do you think you could make use of this in your small business? Let us know in the comments.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Amy
    November 14, 2016 at 5:06 pm

    Love this - thank you for the write up. I'm trying to use Pic2Shop Pro for a custom inventory management web application. I'm having one problem. My barcode is alpha-numeric and if I include a space it won't work. I've tried encoding it as a %20 and that won't work either. Any ideas? I'd like to keep the space as the result is tied to downstream applications.

  2. Ovidiu
    May 13, 2015 at 1:16 pm

    Any chance you can elaborate on how this can be extended, i.e. use Woocommerce and this tutorial to add inventory to the Woocommerce stock or to scan staff that is being dispatched so it gets subtracted from the Woocommerce stock?

  3. Dylan
    April 24, 2015 at 1:35 pm

    I used this with JavaScript callbacks to build a hospital equipment tracking application on Laravel 5 and it worked really well. The callback just dumps the barcode or QR code data into my field for inventory logging or lookup. Brilliant!

  4. Benoit
    June 24, 2013 at 7:50 am

    Thank you for the nice writeup!

    We have just added Javascript callbacks to pic2shop pro. That is an oft requested feature that lets the scanner insert the barcode content directly into a field. It can also be used for anything a Javascript function can do.

    Here is a simple demo that shows how to do it: http://demo.pic2shop.com/p2spro.php

  5. illegal3alien
    February 12, 2013 at 9:34 pm

    You can use the custom search function in Barcode Scanner [No Longer Available] for free, but you'll have to click custom search every time. If you'll only be using it occasionally, or want to mess around, this is a good free option.

    • James Bruce
      February 13, 2013 at 1:15 pm

      Great find, have some upvotes!