Calling wp_enqueue_media() in a custom theme widget on WordPress 3.5.x cause js error

Question

I am writing a custom widget for my own WordPress theme.

From WordPress 3.5 there is a new Media Uploader instead of the old ThickBox.

My widget used to work fine on WordPress versions older than 3.5, but now the new media uploader prevent the old working behavior.

I added a check in the costructor for the presence of wp_enqueue_media function:

if( function_exists( 'wp_enqueue_media' ) ) {
    wp_enqueue_media();
}

but when this part of cose is executed javascript throw an error in the console stopping Js engine:

Uncaught TypeError: Cannot read property 'id' of undefined    load-scripts.php:69

I removed all the widget code and reduced it to bare bones... the error is caused by wp_enqueue_media() calls, but I cannot get my head around why and how to fix it.

I also read Wordpress 3.5 custom media upload for your theme options , but there is no mention to this issue

Can anyone point me in the right direction? Is there any documentation available for the the WordPress 3.5 Media Uploader?

Answer 1

It's too late for you now, but might be helpful for other people. I managed to make it work using

add_action( 'admin_enqueue_scripts', 'wp_enqueue_media' );

Hope it helps!

Answer 2

The problem you are experiencing is because you probably put your custom jquery in the header and you didn't registered wordpress jquery. If multiple jquery are defined you will get that error.

My sugestion is you should either remove your jquery script or remove the one from wordpress

function remove_jquery() {

wp_deregister_script('jquery');
//wp_register_script('jquery', ("//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"), false);

}

if(!is_admin()){add_action('init', 'remove_jquery');}

I suggest you use the jquery wordpress provides you, if not, the proper way to enqueue it is to deregister the default one an register your jquery. Just remove the comments from the remove_jquery function.

Also, the above code should go in functions.php

Cheers.

Answer 3

From codex [1], the function wp_enqueue_media( $args ) should be called from 'admin_equeue_scripts' action hook. or later.

Example:

function enqueue_media() {
    if( function_exists( 'wp_enqueue_media' ) ) {
        wp_enqueue_media();
    }
}

add_action('admin_enqueue_scripts', 'enqueue_media');

Hope it helped.

[1]. https://codex.wordpress.org/Function_Reference/wp_enqueue_media

Answer 4

To debug, you need to get the non-minified versions of the js sent to the browser. See the docs :

SCRIPT_DEBUG

SCRIPT_DEBUG is a related constant that will force WordPress to use the "dev" versions of core CSS and Javascript files rather than the minified versions that are normally loaded. This is useful when you are testing modifications to any built-in .js or .css files. Default is false.

define('SCRIPT_DEBUG', true);