back to the blog

Two weeks ago I was presented a new challenge: build a bingo card for Antiques Roadshow that randomly populated with icons on refresh and on-command (by a “refresh” button), make those icons clickable, indicate a win if five in a row are selected, and last but not least, allow the user to share if they do indeed win. The bingo card (Edit: as of 2019, this post has been removed) was released today, just in time for tonight’s episode.

This was the perfect opportunity to build a WordPress plugin. If done right, bingo could be played in multiple posts at the same time, instead of just played for a one-off event.

The plugin itself is fairly straightforward. Content administrators add two shortcodes to the post they hope to Bingo-fy. 24+ randomized images should be uploaded to that post (not including the image for the free space, winner images, a bingo header, or anything else). All additional images used should be uploaded to the media library but not attached to the post.

The first shortcode, [bingo_gallery], adds the images to a hidden div within the post. This will allow the shortcode [bingocard] to refer to said images to populate a table, as well as to a set freespace image, winner image, and header image, all of which are set on the Bingo Settings page. The actual order of these shortcodes within the post doesn’t matter.

At the moment, the plugin is built for three posts with Bingo cards but can be scaled up depending on the user’s knowledge of PHP. I hope in version 2.0 I can more easily add up to ten bingo cards in the back-end so that PHP/jQuery knowledge isn’t necessary for those wishing to add more bingo cards.

You can download the Bingo Card Plugin on GitHub.