Is there an easy way of adding the native image uploader from the 'Image' widget that comes with Wordpress to a custom widget?

The WP_Widget_Media_Image class.

I would have thought there would have been a way to call it in rather than having to code your own.

I tried searching for anything to give me an idea but it's ridiculous as all that comes up is plugins, plugins and more plugins.

It is exactly this I am trying to replicate basically:

Wordpress Image Widget Media Uploader

1 Answer 1


All you have to do is to load a couple of scripts, four, to be precise.

  1. Register your widget class first
  2. Load the media library
  3. Pass some variables to translate things properly (please see translation standards of WordPress for more info about this.)
  4. Add your own script on top to trigger the modal window and handle the file upload

First register your widget as a class, then drop in the scripts:


    // We register our widget 
    function wpse_register_my_custom_widget(){
    add_action('widgets_init', 'wpse_register_my_custom_widget');

    // in your plugin main file or functions.php when in a theme ..
    function wpse_load_media_library(){
        // Set $pagenow to global to check, where to load the scripts..
        global $pagenow;

        // make a variable for the path in case you don't have it
        $dir = plugins_url('/my-plugin-folder');

       // register your own script first
           // WP internal name (so called "handle") this is important as you need to relate to this name later on
            $dir . '/components/js/the-custom-image-upload-actions.js',

        // Now let's kick in our scripts
        if($pagenow === 'widgets.php'){

            // Load/enqueue the media library, this is what you didn't find and struggled with..

            // load your own script with the trigger of the modal

            // Then pass some variables to wordpress in order to translate things in Javascript
                // WP Handle/ID of the script to translate
                // random varname (array) which holds the strings
                    array(          // array with strings
                        'title' => __('Logo upload', 'textdomain'),
                        'button' => __('use this logo', 'textdomain'),
                        'multiple' => __('use these images', 'textdomain')

     add_action('admin_enqueque_scripts', 'wpse_load_media_library');

// My JS file with code
   // image Upload
       var single_image_frame;
       if ( single_image_frame ) {
        single_image_frame = wp.media.frames.single_image_frame = wp.media({
            title: scripttext.title,
            button: { text:  scripttext.button },
            library: { type: 'image' }
        single_image_frame.on('select', function(){
            var media_attachment = single_image_frame.state().get('selection').first().toJSON();
            // Adjust this to your needs, pops in the url to the img tag
            $('#custom-upload-logo').attr('src', media_attachment.url);

Since I don't know your markup, I did not write any example HTML of your widget. This took me about an hour to write so I hope you don't mind.

  • Really appreciate the time you've taken to post this example. Thanks. I've already come up with something similar now that provides a working image upload in a widget but I was trying to replicate the exact same as Wordpress has in their 'Image' widget - is this what your code above does or is also a custom uploader? (i.e. this - i.ibb.co/KFJySJm/wp-image-widget.png).
    – zigojacko
    May 19, 2020 at 9:21
  • 1
    That is just a matter of markup, you can style the button which triggers the modal that way. I did not fully go into the 100th detail in terms of styling. You would just need to add a button, (in your widget class > widget function) give it some border styling like, border: 2px dotted #ccc; and some radius: border-radius: 3px; Pling. Done ;) May 19, 2020 at 12:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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