Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I want to create a custom widget so the user can select 2 images from the media library via a dropdown box and display them in a sidebar.

So I need the widget to display 2 drop downs, which each show the TITLE of the images in the media library.

I then need to save the url of these two images to use in the front-end (labelled <?php $IMAGEVAR ?> in the widget function.

Here is my widget template ->

<?php
class Image_Picker extends WP_Widget
{
  function Image_Picker() {
    $widget_ops = array('classname' => 'Image_Picker', 'description' => 'Pick 2 images from media library');
    $this->WP_Widget('Image_Picker', 'Image Picker', $widget_ops);
  }

  function form() {
  //WIDGET BACK-END SETTINGS
    echo '<select name="link1">';
    echo '<option value="image1" selected>Image 1 Title</option>';
    echo '<option value="image2">Image 2 Title</option>';
    echo '<option value="image3">Image 3 Title</option>';
    echo '</select><br>';
    echo '<select name="link2">';
    echo '<option value="image1" selected>Image 1 Title</option>';
    echo '<option value="image2">Image 2 Title</option>';
    echo '<option value="image3">Image 3 Title</option>';
    echo '</select>';
  }

  function update() {
  //WIDGET SAVE FUNCTION
  }

  function widget() {
  //WIDGET FRONT-END VIEW
  ?>

    <!-- Display images -->
    <div class="sidebar-image"><img src="<?php $IMAGEVAR ?>" alt="" width="203" height="271" border="0"></div>
    <div class="sidebar-image"><img src="<?php $IMAGEVAR ?>" alt="" width="177" height="207" border="0"></div>

<?php
  }
}

// Add class for Random Posts Widget
add_action( 'widgets_init', create_function('', 'return register_widget("Image_Picker");') );

?>

I have been doing this as a meta box for posts, but I need to make a widget version and can't work out how to implement it. I have added in a front-end template to illustrate how it works as a widget, this template will show as a widget if you include it in your functions.php, but obviously it won't do anything...

Any help is greatly appreciated, cheers.

share|improve this question

1 Answer 1

up vote 3 down vote accepted

Try this code.

class Image_Picker extends WP_Widget
{
  function Image_Picker() {
    $widget_ops = array('classname' => 'Image_Picker', 'description' => 'Pick 2 images from media library');
    $this->WP_Widget('Image_Picker', 'Image Picker', $widget_ops);
  }

  function form($instance) {
      //WIDGET BACK-END SETTINGS
      $instance = wp_parse_args((array) $instance, array('link1' => '', 'link2' => ''));
      $link1 = $instance['link1'];
      $link2 = $instance['link2'];
      $images = new WP_Query( array( 'post_type' => 'attachment', 'post_status' => 'inherit', 'post_mime_type' => 'image' , 'posts_per_page' => -1 ) );
      if( $images->have_posts() ){ 
          $options = array();
          for( $i = 0; $i < 2; $i++ ) {
              $options[$i] = '';
              while( $images->have_posts() ) {
                  $images->the_post();
                  $img_src = wp_get_attachment_image_src(get_the_ID());
                  $the_link = ( $i == 0 ) ? $link1 : $link2;
                  $options[$i] .= '<option value="' . $img_src[0] . '" ' . selected( $the_link, $img_src[0], false ) . '>' . get_the_title() . '</option>';
              } 
         } ?>
      <select name="<?php echo $this->get_field_name( 'link1' ); ?>"><?php echo $options[0]; ?></select>
      <select name="<?php echo $this->get_field_name( 'link2' ); ?>"><?php echo $options[1]; ?></select><?php
      } else {
            echo 'There are no images in the media library. Click <a href="' . admin_url('/media-new.php') . '" title="Add Images">here</a> to add some images';
      }

  }

  function update($new_instance, $old_instance) {
      $instance = $old_instance;
      $instance['link1'] = $new_instance['link1'];
      $instance['link2'] = $new_instance['link2'];
      return $instance;
  }

  function widget($args, $instance) {
      $link1 = ( empty($instance['link1']) ) ? 0 : $instance['link1'];
      $link2 = ( empty($instance['link2']) ) ? 0 : $instance['link2']; ?>

      <!-- Display images --><?php 
      if( !( $link1 || $link2 ) ) {
          echo "Please configure this widget.";
      } else { 
          if($link1) { ?><div class="sidebar-image"><img src="<?php echo $link1; ?>" alt="" width="203" height="271" border="0"></div><?php }
          if($link1) { ?><div class="sidebar-image"><img src="<?php echo $link2; ?>" alt="" width="177" height="207" border="0"></div><?php }
      } 
  }
}

// Add class for Random Posts Widget
add_action( 'widgets_init', create_function('', 'return register_widget("Image_Picker");') );
share|improve this answer
    
That's pretty good, gives me a good foundation. Cheers! –  reekogi Nov 30 '11 at 16:58
    
Glad it helped you. :) –  Joshua Abenazer Nov 30 '11 at 17:11
    
Hello @JoshuaAbenazer is the image is selected by Media ? and it is support multi user site? I asked a question wordpress.stackexchange.com/questions/129675/… –  Ashok KS Jan 14 at 9:02

Your Answer

 
discard

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.