As we have seen previously, WordPress is a great Content Management System. So far we have only covered the text side of the equation. wp.media is the main media management part of this.

What is wp.media?

wp.media is a JavaScript API provided by WordPress that gives us access to WordPress’s built-in media manager. It offers an easy to use interface for handling media file within WordPress. It includes everything like selecting, uploading and embedding media content in a site. This API is built on top of the Backbone.js library which is also used in the WordPress admin interface.

Why Use wp.media?

• It is a built-in component and media library provides a familiar and consistent experience for users.
• wp.media allows us to handle all types of media files, from images to audio and video and offers full control over these.
• We can extend the media library functionality with custom filters, custom post types and taxonomies making it useful for complex scenarios.

Setting Up the Plugin Environment

Once we have a basic plugin set up we can enqueue the scripts.

// Enqueue scripts
function media_selector_plugin_enqueue_scripts() {
    wp_enqueue_media();
    wp_enqueue_script( 'media-selector-script', plugin_dir_url( __FILE__ ) . 'js/media-selector.js', array(), null, true );
}

• The wp_enqueue_media() function ensures the necessary media library scripts and styles are loaded.
• We hook our custom function into the admin_enqueue_scripts action to load the JavaScript file (media-selector.js).
  • $handle: Name of the script.
  • $src: Full URL of the script, or path of the script relative to the WordPress root directory.
  • $deps: An array of registered script handles this script depends on.
  • $ver: String specifying script version number.
  • $args: An array of additional script loading strategies.

document.addEventListener('DOMContentLoaded', function () {
    let mediaUploader;

    document.getElementById('media-selector-button').click(function(e) {
        e.preventDefault();

        // If the media uploader object exists, reopen the dialog
        if (mediaUploader) {
            mediaUploader.open();
            return;
        }

        // Create the media uploader
        mediaUploader = wp.media.frames.file_frame = wp.media({
            title: 'Select Media',
            button: {
                text: 'Use this media',
            },
            multiple: false  // Set to true for multiple media selection
        });

        // When a file is selected, run a callback
        mediaUploader.on('select', function() {
            var attachment = mediaUploader.state().get('selection').first().toJSON();
            console.log(attachment);
        });

        // Open the media uploader dialog
        mediaUploader.open();
    });
});

• When the user clicks the “Select Media” button the JS code triggers the wp.media modal.
• When the user selects a media we can retrieve information on it like URL and filename

Conclusion

Using wp.media in plugin development for media handling is a must with respect to anything to do with media files in WordPress. It provides a simple yet powerful way to integrate media without needing any custom development and needing to reinventing the wheel.