My Old Question:

I made a Theme with rotating banner, common thing. So I want a way for users to select images. I think instead of implementing my own upload, I think its better to allow users to use the Media Library, how do I do that?

The New One

So far, I have something like below


// init wordpress media upload stuff ...
if (is_admin() && isset($_GET['page']) && $_GET['page'] == 'elem_opts') {
  wp_register_script('elem_adm_js', get_bloginfo('template_directory') . '/js/admin.js', array('jquery', 'media-upload', 'thickbox'));


jQuery(document).ready(function($) {
    $('#elem_upload_logo').click(function() {
        tb_show('', 'media-upload.php?type=image&TB_iframe=true');
        return false;

    window.send_to_editor = function (html) {
        imgurl = $('img', html).attr('src');

The media library upload thickbox pops up, I can click select files, but when I try to upload them nothing happens. In Firebug I can see the following:

  • Use the search, several posts about this. – Wyck May 30 '11 at 3:51
  • @Wyck, hmm I tried searching, didnt get much. Some said use plugins, many told me how to list images from the media library. Mind providing some links? – JM at Work May 30 '11 at 5:33

Here are 3 links to get you started, your question should be more clear, do you want this to work like twentyten's header, using a custom theme options field, a category?

How to use media upload on theme option page?
How can I add an image upload field directly to a custom write panel?
Attaching media to custom posts without editor
Creating an Image-Centric Custom Post Type?

  • Ok great. I followed the 1st but I had the problem of "post_id is not defined". I found that I should be using "tb_show('', 'media-upload.php?post_id='+post_id+'&type=image&TB_iframe=true');" but since this is meant for tbe theme not a post, there isnt a post ID what do I do? – JM at Work May 31 '11 at 5:22
  • Please read the link supplied in that post.......which is webmaster-source.com/2010/01/08/… – Wyck May 31 '11 at 5:50
  • Ya, I followed the code there actually, + read in the comments of the post about the post_id thingy ... the poster wanted to add the post_id, I want to remove it ... or do I need a dummy id? – JM at Work May 31 '11 at 7:15
  • any help? @Wyck – JM at Work Jun 9 '11 at 7:08
  • I just updated my question. Do you have any inspiration/ideas? – JM at Work Jun 12 '11 at 6:45

1) I think you should change the JS file. The send_to_editor is the default WordPress handler that will insert image into the editor. In your code, you completely replaced it. That's not cool. You should backup it (I'm not sure if that can fix the errors, but at least it make your code run more properly):

Something in this code I'll explain below

jQuery(document).ready(function($) {
    $('#elem_upload_logo').click(function() {
        var backup = window.send_to_editor, // backup the original 'send_to_editor' function which adds images to the editor
            post_id = $(this).attr('rel');  // get post ID

        // now you can change the default behavior
        window.send_to_editor = function (html) {
            // check the returned HTML code and do something with it

            // restore the default behavior
            window.send_to_editor = backup;

        tb_show('', 'media-upload.php?type=image&TB_iframe=true&post_id=' + post_id);
        return false;

2) Another problem with your code is that the returned html might has no img tags. Actually, it depends on how users choose the way to link the image (they can link the image to the attachment page, the image file, or not link to anywhere). The code above works only when the image is linked to the image file.

You can test this situation by inserting image to the editor, changing the way image is linked, you'll see the actual returned html.

3) The last problem I found when viewing your errors is that you didn't declare the post ID. The thinkbox media uploader must have post ID.

To fix this, you can use a simple trick: in your PHP code that echos the #elem_upload_logo, set its rel="<?php echo $post->ID; ?>" and in your JS script, extract this attribute and pass it into the URL of the media uploader (as the code above).

  • The problem with the post_id is that the images are uploaded for use in a theme banner not a post. So there is not postid. Is it not possible to use the media library then? – JM at Work Jun 14 '11 at 4:52
  • I'm not sure, but you can try adding a fake post ID like 1. It doesn't harm your post, anyway. – Anh Tran Jun 15 '11 at 15:00
  • plus 1 for backing up the send_to_editor function. just fixed an issue for me! – helgatheviking Jul 4 '11 at 7:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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