WordPress 3.5 custom media upload for your theme options

Question

WordPress 3.5 has been released recently, I used the WordPress Media Upload system via Thickbox and window.send_to_editor for some options in my WordPress theme (backgrounds, logos etc...).

But as you know WordPress has integrated a new Media Manager, I wanted to use this new feature to upload images/files as custom fields. So I spent the morning trying to find a way to get the wished result.

I found with this solution, which can be useful for some of you. Thanks to give me your feedback on the code or any improvements you have in mind!

HTML Sample:

<a href="#" class="custom_media_upload">Upload</a>

<img class="custom_media_image" src="" />

<input class="custom_media_url" type="text" name="attachment_url" value="">

<input class="custom_media_id" type="text" name="attachment_id" value="">

jQuery Code:

$('.custom_media_upload').click(function() {

var send_attachment_bkp = wp.media.editor.send.attachment; wp.media.editor.send.attachment = function(props, attachment) { $('.custom_media_image').attr('src', attachment.url); $('.custom_media_url').val(attachment.url); $('.custom_media_id').val(attachment.id); wp.media.editor.send.attachment = send_attachment_bkp; 

} 

wp.media.editor.open();

return false; });

If you want to see every setting contained in the attachment variable you can do a console.log(attachment) or alert(attachment).

Answer 1

In the new version(3.5) do not forget to use wp_enqueue_media :-

If you want to use the old media upload box you can use the following code:-

if(function_exists( 'wp_enqueue_media' )){

wp_enqueue_media();

}else{

wp_enqueue_style('thickbox');

wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox');

}