WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I use Wordpress Custom Fields to provide customers with various product color codes in a drop-down list, but now I would like to add the various color thumbnails for ease of selection...similar to how color is selected in this site: http://www.blackhairspray.com/outre-quick-weave-belinda-outreqsbel.html

Can anyone give me an idea of how to do this in wordpress please or point me to a relevant tut?

since googling has failed to provide the goods so i am eagerly holding my breathe for a SuperUser delivery :-)

share|improve this question

migrated from superuser.com Jun 16 '11 at 14:53

This question came from our site for computer enthusiasts and power users.

This looks the way to go codingforums.com/archive/index.php/t-180613.html give each image a unique name relative to its color and manufacturer or SKU etc and populate the form field by a js onclick event – MartinJJ Jun 16 '11 at 15:13

Store each custom field as a comma separated pair. Like this:

option_name, option_image_URL

Then we do this (within the loop)...

$options = array();
foreach( get_post_custom_keys( $post->ID ) as $key )
    $a = get_post_meta( $post->ID, $key, true )
    $a_array = explode( ',', $a );
    $options[] = $a_array[0] // first value of each array is the option, add it to another array
    echo '<img src="' . $a_array[1] . '" id="' . $a_array[0] . '"/>'; // display the image with the option name as the id attribute


Then loop through the options array:

<select name="your_option">
foreach( $options as $option )
   echo '<option id="' . $option . '" value="' . $option . '">' . $option . '</option>';

Each of the images should have an id attributes should have an ID attribute that's the same as one of the drop down options. You can then use some javascript to change the options around.

This javascript probably won't work, but it will get you started:

    var id = jQuery(this).attr('id');
    jQuery( 'option' ).removeAttr( 'selected' );
    jQuery( 'option #' + id ).attr( 'selected', 'selected');
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.