Question

I have this code below:

<?php function wp_copickpage()
{ color_option_update(); ?>

<form method="POST" action="">
    <?php if (get_option('custom_bg_color') != null ) {?> 
        <input type="text" id="color" name="color" value="<?php echo get_option('custom_bg_color'); ?>" /> <?php }  
    else { ?> 
        <input type="text" id="color" name="color" value="<?php echo get_option('custom_bg_color'); ?>" />
    <?php } ?>
    <p><input type="submit" name="search" value="Update Options" class="button" /></p>
</form>

<div id="colorpicker"></div>

<?php  echo('Color:'); echo get_option('custom_bg_color'); ?>

<link rel="stylesheet" type="text/css" href="<?php echo get_bloginfo('template_url');?>/farbtastic.css">
<script src="<?php echo get_bloginfo('template_url');?>/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('template_url');?>/farbtastic.js"></script>
<script type="text/javascript">  
    $(document).ready(function() {
        $('#colorpicker').farbtastic('#color');
    });
</script>

<?php }//end of function wp_copickpage

//save the selected color in a wordpress option
function color_option_update()
{ update_option('custom_bg_color', $_POST['color']);}
?>

Everything works fine, except when I refresh the page, the value of get_option(‘custom_bg_color’) is returning null.
However, if I press the update button, it returns the desired value. But if I reload the page, the value of get_option(‘custom_bg_color’) is back to null.

Is there something wrong with my update_option? What did I miss here?

Answer 1

It looks like you are calling

color_option_update()

every time the page is loaded, which means whenever you first load the page it is set as null until you update (since there is no $_POST[‘color’] variable, because nobody has submitted one on this page load).

Try this:

<?php function wp_copickpage()
{ 

//heres the changed part
if($_POST['color'] && $_POST['color'] != null) {
    color_option_update();
}
 ?>

<form method="POST" action="">
    <?php if (get_option('custom_bg_color') != null ) {?> 
        <input type="text" id="color" name="color" value="<?php echo get_option('custom_bg_color'); ?>" /> <?php }  
    else { ?> 
        <input type="text" id="color" name="color" value="<?php echo get_option('custom_bg_color'); ?>" />
    <?php } ?>
    <p><input type="submit" name="search" value="Update Options" class="button" /></p>
</form>

<div id="colorpicker"></div>

<?php  echo('Color:'); echo get_option('custom_bg_color'); ?>

<link rel="stylesheet" type="text/css" href="<?php echo get_bloginfo('template_url');?>/farbtastic.css">
<script src="<?php echo get_bloginfo('template_url');?>/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('template_url');?>/farbtastic.js"></script>
<script type="text/javascript">  
    $(document).ready(function() {
        $('#colorpicker').farbtastic('#color');
    });
</script>

<?php }//end of function wp_copickpage

//save the selected color in a wordpress option
function color_option_update()
{ update_option('custom_bg_color', $_POST['color']);}
?>

Edit: Going over my past answers, for future reference the better way to write this would have been to parameterize the color_option_update function rather than use post data directly. So

//save the selected color in a wordpress option
function color_option_update()
{ update_option('custom_bg_color', $_POST['color']);}

Becomes

//save the selected color in a wordpress option
function color_option_update($color)
{ update_option('custom_bg_color', $color);}

And then this

//heres the changed part
if($_POST['color'] && $_POST['color'] != null) {
    color_option_update();
}

becomes

//heres the changed part
if($_POST['color'] && $_POST['color'] != null) {
    color_option_update($_POST['color']);
}