Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I have simplified the widget a little for this example, removing the for loop as I think you could just create new instances of the widget. This also allows the added benefit of sorting the items. I moved the js to another file as there's no need to repeat the code.</p> <p>The widget class</p> <pre><code>class Home_Rollover_Widget extends WP_Widget { public function __construct() { parent::__construct( 'home-rollover-widget', 'Home Rollover Widget', array( 'description' =&gt; 'Home rollover widget' ) ); } public function widget( $args, $instance ) { // basic output just for this example echo '&lt;a href="#"&gt; &lt;img src="'.esc_url($instance['image_uri']).'" /&gt; &lt;h4&gt;'.esc_html($instance['image_uri']).'&lt;/h4&gt; &lt;/a&gt;'; } public function form( $instance ) { // removed the for loop, you can create new instances of the widget instead ?&gt; &lt;p&gt; &lt;label for="&lt;?php echo $this-&gt;get_field_id('text'); ?&gt;"&gt;Text&lt;/label&gt;&lt;br /&gt; &lt;input type="text" name="&lt;?php echo $this-&gt;get_field_name('text'); ?&gt;" id="&lt;?php echo $this-&gt;get_field_id('text'); ?&gt;" value="&lt;?php echo $instance['text']; ?&gt;" class="widefat" /&gt; &lt;/p&gt; &lt;p&gt; &lt;label for="&lt;?php echo $this-&gt;get_field_id('image_uri'); ?&gt;"&gt;Image&lt;/label&gt;&lt;br /&gt; &lt;input type="text" class="img" name="&lt;?php echo $this-&gt;get_field_name('image_uri'); ?&gt;" id="&lt;?php echo $this-&gt;get_field_id('image_uri'); ?&gt;" value="&lt;?php echo $instance['image_uri']; ?&gt;" /&gt; &lt;input type="button" class="select-img" value="Select Image" /&gt; &lt;/p&gt; &lt;?php } } // end class // init the widget add_action( 'widgets_init', create_function('', 'return register_widget("Home_Rollover_Widget");') ); // queue up the necessary js function hrw_enqueue() { wp_enqueue_style('thickbox'); wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); // moved the js to an external file, you may want to change the path wp_enqueue_script('hrw', '/wp-content/plugins/home-rollover-widget/script.js', null, null, true); } add_action('admin_enqueue_scripts', 'hrw_enqueue'); </code></pre> <p>New js file: use the <code>.on()</code> method instead of <code>.click()</code> to attach the event handler.</p> <pre><code>var image_field; jQuery(function($){ $(document).on('click', 'input.select-img', function(evt){ image_field = $(this).siblings('.img'); tb_show('', 'media-upload.php?type=image&amp;amp;TB_iframe=true'); return false; }); window.send_to_editor = function(html) { imgurl = $('img', html).attr('src'); image_field.val(imgurl); tb_remove(); } }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload