I was working on a WordPress theme some time ago and came to a scenario where I needed to add wordpress’ default media uploader to a widget. It’s very useful when you try to create a widgetized page template. Here I am going to show you how to add media uploader to a widget in WordPress.

First we need to enqueue our wordpress media library scripts and our own script and style for admin panel. We need the script to access the media uploader and stylesheet to modify some of the outcomes.

function my_admin_scripts(){
    wp_enqueue_media();
    wp_enqueue_style('my-style', get_template_directory() . '/inc/widgets/my_script.css');
    wp_enqueue_script('my-script', get_template_directory() . '/inc/widgets/my_script.js', array('jquery'), '', true);
}
add_action('admin_enqueue_scripts', 'my_admin_scripts');

After that we will need to register our widget. Here is the class to implement our widget.

class MyWidget extends WP_Widget{
    function __construct()
    {
        parent::__construct(
        'my-widget',
        __('My Widget', 'text-domain'),
        array(
           'description' => __('This is description', 'text-domain'),
           'classname' => 'my-class'
        ));
    }

    function widget($args, $instance)
    {
        // This function generates the output of the widget
    }

    function form($instance)
    {
        // This function takes all the inputs in admin panel widgets page
        // This is where we are going to implement the
    }

    function update($new_instance, $old_instance)
    {
        // This function will save the inputs of the widget.
    }
}

I haven’t added all the codes to the class yet. But we will go there eventually. Now we need to register the plugin.

include_once get_template_directory() . '/inc/widgets/my_widget.php';

function my_widgets_init(){
    register_widget('MyWidget');
}
add_action( 'widgets_init', 'my_widgets_init' );

This will add the widget in the widget menu in admin panel. But we have a long way to go still.

Now we will prepare the form for widget in the admin panel. Let’s add a button first to invoke the media uploader. Then we will add a hidden input field to store the source url of the selected image and a img tag to display preview of the selected image. We will do it in a function named form in our MyWidget Class. Here is what it looks like after we are done.

function form($instance)
 {
     // This function takes all the inputs in admin panel widgets page
     // This is where we are going to implement the input form for the widget.
     $image_src = ! empty($instance['my-image']) ? $instance['my-image'] : '';
     ?>
     <p>
         <label class="widefat" for="image-selector-button">Choose an image</label>
         <button class="my-image-selector-button">Choose Image</button>
         <input class="my-image-input" value="<?php echo $image_src; ?>" type="hidden" name="<?php echo esc_attr($this->get_field_name('my-image')); ?>">
         <?php if($image_src != ''): ?>
             <img class="my-image-preview" src="<?php echo esc_url($image_src); ?>" alt="">
         <?php endif; ?>
     </p>
 <?php
 }

This is all for now. We will get to the rest in our next part of the tutorial.

Here is the link to the part 2 of this tutorial:

Part 2