Custom media button creation with wp.media

All most every WordPress users will use media in their posts, pages and comments. So media files playing a vital role in our WordPress world. WordPress will provide you an option to add media files in to your post by default.

But in some cases this button won’t solve our problem. Especially when we are writing our own plugin. Our plugin might need a new button with custom functionalities.

Adding a new media button isn’t that much complex one. WordPress is providing a global javascript variable called wp.media.

Adding media button

First thing first. We need to add media button to the user screen using the media_buttons action.

function add_media_button() {
    echo '<button type="button" id="my_media_button" class="button">Insert Media</button>';
}
add_action( 'media_buttons', 'add_media_button' );

Above code will add a button to the editor screen like below.
Note that we have given our button an ID, which we will use in our javascript to invoke media pop model.

Including .js file

Now we have to include our new custom JS file into the browser window.

function include_js_file() {
    wp_enqueue_script( 'media_button', 'path/to/our/custom/media_button.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_media', 'include_js_file' );

The above code will include media_button.js file into the editor window.

Media pop

Now let’s begin our javascript magic to bring core WordPress media pop into the action. First we can create the closure to include our custom javascript and bind the click event to our media button.

jQuery( function( $ ) {
    $( document ).ready( function() {
        var media_frame = null;
        $('#my_media_button').click( function() {

        } );
    } );
} );

media_frame variable will hold our wp.media instance.

media_frame = wp.media({
                title: 'Insert a media',
                library: {type: 'image'},
                multiple: false,
                button: {text: 'Insert Media'}
            });

Now we have created our own wp.media instance and assigned it to media_frame. Our next move is to capture the events which will happen on this object.

media_frame.on('select', function() {
                var image = self.window.state().get('selection').first().toJSON();
                wp.media.editor.insert('[myawesomeshortcode id="' + image.id + '"]');
            });

The above piece of code will capture the image selection and include it’s ID into our shortcode.

Full View

jQuery( function( $ ) {
    $( document ).ready( function() {
        var media_frame = null;
        $('#my_media_button').click( function() {
           // If media_frame is already initialized with wp.media, then use that.
           if ( null !== media_frame ) {
               media_frame.open();
               return false;
           }
            
            // Create new wp.media instance.
            media_frame = wp.media({
                title: 'Insert a media',
                library: {type: 'image'},
                multiple: false,
                button: {text: 'Insert Media'}
            });

            // Capture the media pop section event.
            media_frame.on('select', function() {
                var image = self.window.state().get('selection').first().toJSON();
                wp.media.editor.insert('[myawesomeshortcode id="' + image.id + '"]');
            });

           media_frame.open();
           return false;
        } );
    } );
} );