This tutorial explains how to display specific images based on selection of checkbox fields.


Generally, users submit/upload files by selecting them from their computer. But what if you want to use a set of predefined images that already are hosted on the server. For example, if you have a set of emoticons on your server, you may want to add a checkbox field to the form that enables users to select which emoticons to display with their submitted post.

How to

First, set up your form to include a custom checkbox field. That will give you custom fields that are attached to the submitted post, for example:

Custom Field Key: usp-custom-option_1
Custom Field Val: option_1

So then in your theme file (in the WordPress Loop), you can use a template tag to check the values of the custom fields, and display a specific image for each. Here is some pseudo code to give you the basic idea:

$check_1 = get_post_meta(get_the_ID(), 'usp-custom-option_1', true);
$check_2 = get_post_meta(get_the_ID(), 'usp-custom-option_2', true);
$check_3 = get_post_meta(get_the_ID(), 'usp-custom-option_3', true);

if (!empty($check_1)) echo '<img src="/path/to/image-01.jpg" alt="">';
if (!empty($check_2)) echo '<img src="/path/to/image-02.jpg" alt="">';
if (!empty($check_3)) echo '<img src="/path/to/image-03.jpg" alt="">';

This code first uses get_post_meta() to get the values of the checkboxes. It then checks each value and displays a specific image for each one. If implementing this technique on your own site, remember to change the Custom Field Names (i.e., usp-custom-option_1, usp-custom-option_2, usp-custom-option_3) to match those that you actually are using.