in this question i've found how to create a custom tab at the image uploader.

this is the code:

add_filter('media_upload_tabs', 'my_media_upload_tabs_filter');

function my_media_upload_tabs_filter($tabs) {
        $newtab = array('ell_insert_gmap_tab' => __('Google Map','insertgmap'));

        return array_merge($tabs,$newtab);

add_action('media_upload_ell_insert_gmap_tab', 'media_upload_ell_gmap_tab');

function media_upload_ell_gmap_tab() {
    return wp_iframe('media_upload_ell_gmap_form', $errors );

function media_upload_ell_gmap_form() {
    echo media_upload_header();
    <h2>HTML Form</h2>


Now i want to use that tab for image choosing function. so i modified the code inside the tab into this:

  <form enctype="multipart/form-data" method="post" action="">
            <h3 class="media-title">Choose Background:</h3>
            Alternatively, you can choose one of these background images:<br/>
            <img style="float:left; margin:15px; cursor:pointer" id="background-Green-stripes" src="<?php bloginfo('url'); ?>/wp-content/themes/mytheme/images/background-Green-stripes-thumb.jpg">
<a class="button choice_button" style="float:left; display:block" id="image 1">choose this</a>
            <img style="float:left; margin:15px; cursor:pointer" id="background-Pail-pink-squares.jpg" src="<?php bloginfo('url'); ?>/wp-content/themes/mytheme/images/background-Pail-pink-squares-thumb.jpg">
<a class="button choice_button" style="float:left; display:block" id="image 2">choose this</a>
            <img style="float:left; margin:15px; cursor:pointer" id="background-Purple-wall.jpg" src="<?php bloginfo('url'); ?>/wp-content/themes/mytheme/images/background-Purple-wall-thumb.jpg">
    <a class="button choice_button" style="float:left; display:block" id="image 3">choose this</a>

and tried to get the html from the "window.send_to_editor" but didn't knew how... can any body help? i'm lost here...

  • i found out that i need some how to produce the "insert to post" button... how should i do this? someone? Commented Mar 8, 2011 at 17:55
  • Not necessarily, take a look at the send to editor function at the top of wp-admin/js/media-upload.dev.js, can you not just call that? Or look at what that function does, and pull what you need from it..
    – t31os
    Commented Mar 8, 2011 at 18:42
  • I don't know how to use it with a new tab in the media-uploader... i don't know how to send information back to the "html" var inside send_to_editor with a simple button... Commented Mar 9, 2011 at 10:06
  • i also tried playing with the form action, like this: function media_upload_ell_gmap_form() { echo media_upload_header(); ?> <form enctype="multipart/form-data" method="post" action="http://www.mimi.me/wp-admin/media-upload.php?type=image&amp;tab=insert_choose_background&amp;post_id=0&amp;mysetting=myvalue"> <h3 class="media-title">Choose Background:</h3> <input name="send" id="send" class="button" value="Insert into Post" type="submit"> </form> <?php } but i got nothing... any one? Commented Mar 9, 2011 at 11:23

1 Answer 1


So i decided that for me, i can settle for changing an input field on the top.parent for it to be used with the native options. i used this for the function of the iframe tab:

function media_upload_choosebackground_form() {
    <h3 class="media-title">HTML Form</h3>
        <img src="http://www.mimi.me/wp-content/themes/mimi.me_regular_sites/images/background-Green-stripes-thumb.jpg" style="cursor:pointer; float:left; margin:10px 0 0 10px" id="greenstripes" title="Green Stripes" />
        <img src="http://www.mimi.me/wp-content/themes/mimi.me_regular_sites/images/background-Pail-pink-squares-thumb.jpg" style="cursor:pointer; float:left; margin:10px 0 0 10px" id="Pailpinksquares" title="Pail pink squares" />
        <img src="http://www.mimi.me/wp-content/themes/mimi.me_regular_sites/images/background-Purple-wall-thumb.jpg" style="cursor:pointer; float:left; margin:10px 0 0 10px" id="Purplewall" title="Purple wall" />

and this as the click event for every image:

jQuery('#Purplewall').click(function() {
        imgurl = "http://www.mimi.me/wp-content/themes/mimi.me_regular_sites/images/background-Purple-wall-thumb.jpg";
        $("#MoobBackgroundUpload", top.document).val(imgurl);
        $("#MoobBackgroundUploadButtonImg", top.document).attr('src', imgurl);

and what i've got is a second tab with an image picker, and that what i wanted in the first place. good for me!

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.