Theme Option select values

Question

I'm building a theme options panel and so far been successful, except with the "Select" type option. This is my code:

array( "name" => "Transition",
    "desc" => "Choose the type of transition.",
    "id" => $shortname."_transition",
    "type" => "select",
    "std"   => '1',
    "options" => array("0" => "None", "1" => "Fade", "2" => "Slide Top", "3" => "Slide Right"),

Now, my select code is this:

<select name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>">
<?php foreach ($value['options'] as $option) { ?><option <?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } elseif ($option == $value['std']) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?>

Now, when I pull the option into the theme, it outputs the option name (fade, Slide Top...etc) instead of the value (0, 1, 2, 3).

I'm guessing here that perhaps I'm missing the value="" from the /option> code? any help would be appreciated, thank you.

Edit: figured it out, edited the second code to this:

<?php foreach ($value['options'] as $key=>$option) { ?><option value="<?php echo $key; ?>" <?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } elseif ($option == $value['std']) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?></select>

Answer 1

There're several things to note:

• get_settings() is deprecated and get_option() should be used instead
• WordPress comes with a function named select() that takes three arguments: Saved value, looped value, echo

• You're better off saving your key, than the HTML capable "title" element in your options. It's much safer to save in the DB an easier to compare as the output doesn't change. See the comparison with $key, as I assume that you change the saved value to the actual value attribute. So instead of

  "0" => "None", "1" => "Fade", "2" => "Slide Top", "3" => "Slide Right"
  

  You'd set better keys:

  $effects = array(
       'none' => 'None'
      ,'fade' => 'Fade'
      ,'slide-top' => 'Slide Top'
      ,'slide-right' => 'Slide Right'
  );
  

The best you could do is taking the real values that your slider JavaScript function takes and take those as keys. This way you can simply echo them and are done.

Another advantage is, that you could make your values translatable without affecting functionality: __( 'Slide Right', 'your_textdomain' ).

Here's the actual loop:

$html = '';
foreach ( $value['options'] as $key => $option )
{
    $html .= sprintf(
         '<option value="%s">%s</option>'
        ,$key
        ,selected( get_option( $value['id'] ), $key, false )
        ,$option
    );
}
echo "<select>{$html}</select>";