On one of my custom posts edit page I have a button that triggers the media popup onclick, with: wp.media.editor.open(); and while it brings up the media manager I'm not sure if that's the proper way to do it. Is it?

But real question is about something else. How do I attach event listeners to various events that media popup should trigger? Like open or close or is there any event for switched view?

2 Answers 2


You can use several event handlers.

frame.on('open',function() {
    // Do something

frame.on('close',function() {
    // Do something

frame.on('select',function() {
    // Do something

Where frame is a reference to wp.media()

frame = wp.media();

frame.on('select',function() {
    // Do something

Full example

Script en-queued with jQuery and media editor as dependencies.

function media_script_enqueue() {
   wp_enqueue_script( 'media-script', get_template_directory_uri() . '/js/media-script.js', array( 'jquery', 'media-editor' ), '', true );
add_action( 'wp_enqueue_scripts', 'media_script_enqueue' ); // Front-end
add_action( 'admin_enqueue_scripts', 'media_script_enqueue' ); // Back-end

Script contains:

;( function( $ ) {
    var frame = wp.media({
         multiple: true

    $(".media").on("click", function(e) {


    frame.on('open', function() {

    frame.on('close', function() {

    frame.on('select', function() {

        var selection = frame.state().get('selection');

        selection.each(function(attachment) {
} )( jQuery );

Window triggered by a button with a classname of media

<button class="media">Media</button>

Media javascript dependencies enqueued via function.

<?php wp_enqueue_media(array('post' => get_the_ID())); ?>
  • do you mind making it fuller example? Where does this code goes, when should it be used (after load event, or is there some other trigger)? Commented Dec 2, 2013 at 6:06
  • You would use the admin_enqueue_scripts action in your plugin or theme to enqueue your JavaScript files that create this functionality. The JavaScript given in Rob's example can be executed at the point where you open the media manager.
    – Bendoh
    Commented Dec 3, 2013 at 16:14

Last I checked the best documentation was the source code - see media-views.js, media-models.js here: http://phpxref.ftwr.co.uk/wordpress/nav.html?wp-includes/js/

Experimenting with the console can be helpful - It's mostly backbone objects, you can watch events triggered using something like this script I made some time ago - http://userscripts.org/scripts/show/161075

  • Can you provide an example of how one is supposed to invoke your script (for backbone.js dummies...)
    – jayarjo
    Commented Dec 3, 2013 at 8:06
  • The eventslog is helpful to use like eventslog('backboneobj',backboneobj,3) or similar.
    – NoBugs
    Commented Dec 4, 2013 at 4:05

Your Answer

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

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