I’m attempting to create a custom WordPress Widget, that has a dropdown select and text input field. Everything works, however when I go back to the widget (for example to edit) the select dropdown always displays the top result instead of my selection.
// New Text and Icon Widget
class Image_Picker extends WP_Widget {
/** constructor -- name this the same as the class above */
function Image_Picker() {
parent::WP_Widget(false, $name = 'Homepage Column Text and Icon Select');
}
function form($instance) {
//WIDGET BACK-END SETTINGS
$message = $instance['message'];
$posttype = $instance['posttype'];
// $posttype = esc_attr($instance['posttype']); ?>
<br /><br />
<label>Choose an icon:</label>
<select id="<?php echo $this->get_field_id('posttype'); ?>" name="<?php echo $this->get_field_name('posttype'); ?>" class="widefat" style="width:100%;">
<option <?php selected( $instance['posttype'], 'Briefcase Icon'); ?> value="briefcase">Briefcase Icon</option>
<option <?php selected( $instance['posttype'], 'Chat Icon'); ?> value="chat">Chat Icon</option>
<option <?php selected( $instance['posttype'], 'Document Icon'); ?> value="document">Document Icon</option>
<option <?php selected( $instance['posttype'], 'Firstaid Icon'); ?> value="firstaid">Firstaid Icon</option>
<option <?php selected( $instance['posttype'], 'Form Icon'); ?> value="form">Form Icon</option>
<option <?php selected( $instance['posttype'], 'Graph Icon'); ?> value="graph">Graph Icon</option>
<option <?php selected( $instance['posttype'], 'Healthcare Icon'); ?> value="healthcare">Healthcare Icon</option>
<option <?php selected( $instance['posttype'], 'Heart Icon'); ?> value="heart">Heart Icon</option>
<option <?php selected( $instance['posttype'], 'Image Icon'); ?> value="image">Image Icon</option>
<option <?php selected( $instance['posttype'], 'Leaves Icon'); ?> value="leaves">Leaves Icon</option>
<option <?php selected( $instance['posttype'], 'Mail Icon'); ?> value="mail">Mail Icon</option>
<option <?php selected( $instance['posttype'], 'Mobile Icon'); ?> value="mobile">Mobile Icon</option>
<option <?php selected( $instance['posttype'], 'People Icon'); ?> value="people">People Icon</option>
<option <?php selected( $instance['posttype'], 'Screen Icon'); ?> value="screen">Screen Icon</option>
<option <?php selected( $instance['posttype'], 'Stats icon'); ?> value="stats">Stats icon</option>
<option <?php selected( $instance['posttype'], 'Video Icon'); ?> value="video">Video Icon</option>
</select>
<br /><br />
<label for="<?php echo $this->get_field_id('message'); ?>"><?php _e('Text:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('message'); ?>" name="<?php echo $this->get_field_name('message'); ?>" type="text" value="<?php echo $message; ?>" />
<br /><br />
<?php
}
function update($new_instance, $old_instance) {
global $posttypes;
$instance['message'] = strip_tags($new_instance['message']);
$instance['posttype'] = $new_instance['posttype'];
return $instance;
}
function widget($args, $instance) {
extract( $args );
$message = $instance['message'];
$posttype = $instance['posttype'];
echo ' <li class="item_content clearfix"><a class="features_image" href="#" title="">
<img src="';
echo bloginfo('template_url');
echo '/assets/images/features_large/';
echo $posttype;
echo '.png" alt="" />
</a> <div class="text">';
echo '' . $message . '<div class="item_footer clearfix">
<a title="Read more" href="about.html" class="more">Read more →</a>
</div></div></li>';
}
}
// Add class for Random Posts Widget
add_action( 'widgets_init', create_function('', 'return register_widget("Image_Picker");') );
Any help is very much appreciated.
You have not used value in
selected()
function, You need to use value as shown in the below codeSimilarly change the value for other options as well. It is working fine on my wordpress installation!
Assuming your widget tracks which item has been selected, you need to dynamically add this attribute to the < option > tag:
Here is a full example (based off of your code):