Upload Media in WordPress Meta Boxes

Posted by & filed under Developing for WordPress, How To's, Inter, Meta Boxes.

Recently I was working on updating the Pro Photo theme and wanted to find a good solution for uploading media through a meta box. Previously, users had to click the little camera/music icon to upload images and we were getting a lot of support from people wondering how to add images. So basically, I am going to show you how we created an upload media button through meta boxes.

Step 1

First you will obviously need to create a metabox if you currently don’t have one. If you don’t have any meta boxes you can read our ultimate guide to meta boxes or on the codex.

Step 2

Secondly, there will be a callback in the add_meta_box function that you will need to locate. In my example, I am going to use an example callback function of media_uploader_box. Now that we have our callback function, lets begin to add some content and data to it.

We begin with a base function:

<?php function media_uploader_box(): global $post; ?>

<?php endif; ?>

Next if you want, you can add some css styling to your function. I will add a background color of #ccc.

<?php function media_uploader_box(): global $post; ?>

<style> .media-upload h2 { font-weight: bold; } </style>

<?php endif; ?>

Now it is time to add the necessary jQuery to call the media uploader popup.

<?php function media_uploader_box(): global $post; ?>

<style> .media-upload h2 { font-weight: bold; } </style>

<script>
( function( $ ) {

   $(document).ready(

       function()
       {
             $('#upload_image_button').click(
                 function()
                 {
                     tb_show('', 'media-upload.php?post_id=<?php  echo $post->ID; ?>&type=image&amp;TB_iframe=true');
                     return false;
                 }
             );
       }
   );

} ) ( jQuery );
</script>

<?php endif; ?>

There are some points to make note of in this example. First, notice that we are attaching the click function to the upload_image_button ID. So when that ID is clicked, it will call this jQuery. Next, if you look at the URL structure being used in the popup we are using the post_id. What this will do is attach the media unique to this post. In our case we wanted to upload images inside of a custom post type and only have those images be registered with those posts.

Note: If you are looking to just add a general media uploader which is not post specific then replace line 15 above with the following:

tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');

Step 3

Third, we now need to create our html for the meta box and for our button.

<?php function media_uploader_box(): global $post; ?>

<style> .media-upload h2 { font-weight: bold; } </style>

<script>
( function( $ ) {

   $(document).ready(

       function()
       {
             $('#upload_image_button').click(
                 function()
                 {
                     tb_show('', 'media-upload.php?post_id=<?php  echo $post->ID; ?>&type=image&amp;TB_iframe=true');
                     return false;
                 }
             );
       }
   );

} ) ( jQuery );
</script>

<div class="media-upload">
    <h2>Upload Media</h2>
    <table>
       <tr valign="top">
          <td><input id="upload_image_button" type="button" value="Upload Media"></td>
       </tr>
    </table>
</div>

<?php endif; ?>

All that is going on here is that we are adding a title and table with a button. Simple stuff.

Step 4

The last step in the process is to make sure and include our necessary scripts to make the popup work. We are going to enqueue the given admin scripts from the core.

<?php function media_uploader_box(): global $post; ?>

<style> .media-upload h2 { font-weight: bold; } </style>

<script>
( function( $ ) {

   $(document).ready(

       function()
       {
             $('#upload_image_button').click(
                 function()
                 {
                     tb_show('', 'media-upload.php?post_id=<?php  echo $post->ID; ?>&type=image&amp;TB_iframe=true');
                     return false;
                 }
             );
       }
   );

} ) ( jQuery );
</script>

<div class="media-upload">
    <h2>Upload Media</h2>
    <table>
       <tr valign="top">
          <td><input id="upload_image_button" type="button" value="Upload Media"></td>
       </tr>
    </table>
</div>

<?php endif; ?>

function admin_scripts()
{
   wp_enqueue_script('media-upload');
   wp_enqueue_script('thickbox');
}

function admin_styles()
{
   wp_enqueue_style('thickbox');
}

add_action('admin_print_scripts', 'admin_scripts');
add_action('admin_print_styles', 'admin_styles');

?>

Thats it! Now if you are like most people and are looking to just quickly copy and paste the above code and expect it to work you might be sorely disappointed. The main point to reiterate is that you must name this function the same as your callback when you are adding the meta box. Again, if you are not sure what this means take a look at the add_meta_box function and how the callback works.

If you have any questions or comments please let me know below.

Tags: , , ,

Brady Nord

I am the co-founder of Mojoness Inc. and a handful of other good times. I thoroughly enjoy most things with my wife, friends and WordPress.

29 Responses

  1. Steffy March 29, 2012 at 4:21 pm

    maybe you could add some screen shot to see how this render on the meta box, or a demo page, that would be so usefull

    thank you in advance

    Reply
  2. Imad May 2, 2012 at 6:52 pm

    Thanks for this tuto, i hope that you add also how to put the link of the uploaded pic in the current form.

    Reply
  3. Ben June 27, 2012 at 11:16 pm

    Ahem.. am I missing something or is:

    nowhere near a valid php construct… ?

    function … endif; what is that even meant to mean?

    Reply
    • Ben June 27, 2012 at 11:17 pm

      Hmm… can’t post code apparently.. was referring to the media_uploader_box function declaration..

  4. Pablo Molina April 5, 2013 at 7:28 am

    Hello… very interesting your post… but, you know how print the image url in the textbox of meta box?
    I need to know how to insert the image URL selected.
    Greetings
    P.

    Reply
  5. fhyirswt April 10, 2013 at 3:41 am

    ptsp [url=http://www.itosweb.com/linksoflondonshop.html]Children Eyeglasses[/url] [url=http://www.itosweb.com/tiffanyandcouk.html]Children Eyewear[/url] zdmh
    [url=http://www.itosweb.com/linksoflondonshop.html]Optical Frames[/url] [url=http://www.itosweb.com/tiffanyandcouk.html]Children Eyewear[/url] ivet

    kqte
    eohv
    lkql [url=http://www.itosweb.com/linksoflondonshop.html][/url] [url=http://www.itosweb.com/tiffanyandcouk.html][/url]

    Reply
  6. xtvljduq April 10, 2013 at 3:43 am

    esej [url=http://www.uresujiraybanhoshii.com/]ray ban メガネ[/url][url=http://www.jyouhinnraybansyoppu.com/]ray ban [/url][url=http://www.annkaraybandaininki.com/]ray ban [/url][url=http://www.ryuukouraybanuresuji.com/]ray ban 眼鏡[/url][url=http://www.daininkibagkakuyasu.com/]mcm リュック[/url] nrsc
    [url=http://www.uresujiraybanhoshii.com/]ray ban 眼鏡[/url][url=http://www.jyouhinnraybansyoppu.com/]ray ban 眼鏡[/url][url=http://www.annkaraybandaininki.com/]ray ban サングラス[/url][url=http://www.ryuukouraybanuresuji.com/]ray ban [/url][url=http://www.daininkibagkakuyasu.com/]mcm リュック[/url] xhxb
    [url=http://www.uresujiraybanhoshii.com/]ray ban サングラス[/url][url=http://www.jyouhinnraybansyoppu.com/]ray ban メガネ[/url][url=http://www.annkaraybandaininki.com/]ray ban メガネ[/url][url=http://www.ryuukouraybanuresuji.com/]ray ban メガネ[/url][url=http://www.daininkibagkakuyasu.com/]mcm リュック[/url] xqbh
    [url=http://www.uresujiraybanhoshii.com/]ray ban [/url][url=http://www.jyouhinnraybansyoppu.com/]ray ban メガネ[/url][url=http://www.annkaraybandaininki.com/]ray ban サングラス[/url][url=http://www.ryuukouraybanuresuji.com/]ray ban サングラス[/url][url=http://www.daininkibagkakuyasu.com/]mcm バッグ[/url] funr
    [url=http://www.uresujiraybanhoshii.com/]ray ban サングラス[/url][url=http://www.jyouhinnraybansyoppu.com/]ray ban メガネ[/url][url=http://www.annkaraybandaininki.com/]ray ban 眼鏡[/url][url=http://www.ryuukouraybanuresuji.com/]ray ban メガネ[/url][url=http://www.daininkibagkakuyasu.com/]mcm[/url] wwxh

    uibp
    dvmf [url=http://www.uresujiraybanhoshii.com/]ray ban 格安[/url][url=http://www.jyouhinnraybansyoppu.com/]ray ban 眼鏡 店舗[/url][url=http://www.annkaraybandaininki.com/]ray ban 眼鏡 新作[/url][url=http://www.ryuukouraybanuresuji.com/]レイバン 2013[/url][url=http://www.daininkibagkakuyasu.com/]mcm バッグ 格安[/url] egoo
    [url=http://www.uresujiraybanhoshii.com/]ray ban 店舗[/url][url=http://www.jyouhinnraybansyoppu.com/]ray ban 眼鏡 店舗[/url][url=http://www.annkaraybandaininki.com/]ray ban 眼鏡 格安[/url][url=http://www.ryuukouraybanuresuji.com/]レイバン 2013[/url][url=http://www.daininkibagkakuyasu.com/]mcm バッグ 通販[/url] gjta
    [url=http://www.uresujiraybanhoshii.com/]ray ban 店舗[/url][url=http://www.jyouhinnraybansyoppu.com/]ray ban 眼鏡 2013[/url][url=http://www.annkaraybandaininki.com/]ray ban 眼鏡 激安[/url][url=http://www.ryuukouraybanuresuji.com/]レイバン 2013[/url][url=http://www.daininkibagkakuyasu.com/]mcm バッグ 通販[/url] dzqo
    [url=http://www.uresujiraybanhoshii.com/]ray ban 店舗[/url][url=http://www.jyouhinnraybansyoppu.com/]ray ban 眼鏡 店舗[/url][url=http://www.annkaraybandaininki.com/]ray ban 眼鏡 格安[/url][url=http://www.ryuukouraybanuresuji.com/]レイバン 2013[/url][url=http://www.daininkibagkakuyasu.com/]mcm バッグ 通販[/url] vlxb

    ojiq [url=http://www.uresujiraybanhoshii.com/][/url][url=http://www.jyouhinnraybansyoppu.com/][/url][url=http://www.annkaraybandaininki.com/][/url][url=http://www.ryuukouraybanuresuji.com/][/url][url=http://www.daininkibagkakuyasu.com/][/url]

    Reply
  7. hedywvny April 10, 2013 at 3:54 am

    ruwn [url=http://www.agrimed.net/rayban.html]レイバン メガネ[/url] [url=http://ralphlaurenannka.webnode.jp/]ラルフローレン 通販[/url] [url=http://www.gudrunvonmaltzan.com/coach.html]コーチ アウトレット[/url] [url=http://www.demira.org/coachseru.html]コーチ[/url] [url=http://www.chamberware.com/guccisafu.html]グッチ 財布[/url] kvbw
    [url=http://www.agrimed.net/rayban.html]レイバン [/url] [url=http://ralphlaurenannka.webnode.jp/]ラルフローレン 店舗[/url] [url=http://www.gudrunvonmaltzan.com/coach.html]コーチ バッグ[/url] [url=http://www.demira.org/coachseru.html]コーチ 財布[/url] [url=http://www.chamberware.com/guccisafu.html]グッチ 財布[/url] bcar
    [url=http://www.agrimed.net/rayban.html]レイバン 眼鏡[/url] [url=http://ralphlaurenannka.webnode.jp/]ラルフローレン 通販[/url] [url=http://www.gudrunvonmaltzan.com/coach.html]コーチ 財布[/url] [url=http://www.demira.org/coachseru.html]コーチ 財布[/url] [url=http://www.chamberware.com/guccisafu.html]グッチ[/url] qwzf
    [url=http://www.agrimed.net/rayban.html]レイバン [/url] [url=http://ralphlaurenannka.webnode.jp/]ラルフローレン 通販[/url] [url=http://www.gudrunvonmaltzan.com/coach.html]コーチ 財布[/url] [url=http://www.demira.org/coachseru.html]コーチ バッグ[/url] [url=http://www.chamberware.com/guccisafu.html]グッチ[/url] exdx
    [url=http://www.agrimed.net/rayban.html]レイバン メガネ[/url] [url=http://ralphlaurenannka.webnode.jp/]ラルフローレン 通販[/url] [url=http://www.gudrunvonmaltzan.com/coach.html]コーチ[/url] [url=http://www.demira.org/coachseru.html]コーチ アウトレット[/url] [url=http://www.chamberware.com/guccisafu.html]グッチ[/url] bjfa

    gqjk
    wtaf
    oygq [url=http://www.agrimed.net/rayban.html][/url] [url=http://ralphlaurenannka.webnode.jp/][/url] [url=http://www.gudrunvonmaltzan.com/coach.html][/url] [url=http://www.demira.org/coachseru.html][/url] [url=http://www.chamberware.com/guccisafu.html][/url]

    Reply
  8. bmjxxacu April 10, 2013 at 4:06 am

    sjif [url=http://www.choubibaggukireii.com/]トリーバーチ 靴[/url][url=http://www.baghanbaichuu.com/]tory burch 財布[/url][url=http://www.gekiyasubaggunosekai.com/]tory burch 店舗[/url][url=http://www.nesagebaggudaininki.com/]ポールスミス 財布[/url][url=http://www.chiipubagkawaii.com/]ポールスミス 財布[/url] swha
    [url=http://www.choubibaggukireii.com/]トリーバーチ 店舗[/url][url=http://www.baghanbaichuu.com/]tory burch[/url][url=http://www.gekiyasubaggunosekai.com/]tory burch 財布[/url][url=http://www.nesagebaggudaininki.com/]ポールスミス 財布[/url][url=http://www.chiipubagkawaii.com/]ポールスミス[/url] ctmn
    [url=http://www.choubibaggukireii.com/]トリーバーチ[/url][url=http://www.baghanbaichuu.com/]tory burch 靴[/url][url=http://www.gekiyasubaggunosekai.com/]tory burch[/url][url=http://www.nesagebaggudaininki.com/]ポールスミス[/url][url=http://www.chiipubagkawaii.com/]ポールスミス[/url] igze
    [url=http://www.choubibaggukireii.com/]トリーバーチ[/url][url=http://www.baghanbaichuu.com/]tory burch 財布[/url][url=http://www.gekiyasubaggunosekai.com/]tory burch バッグ [/url][url=http://www.nesagebaggudaininki.com/]ポールスミス[/url][url=http://www.chiipubagkawaii.com/]paul smith 財布[/url] mnoa
    [url=http://www.choubibaggukireii.com/]トリーバーチ 財布[/url][url=http://www.baghanbaichuu.com/]tory burch 店舗[/url][url=http://www.gekiyasubaggunosekai.com/]tory burch 財布[/url][url=http://www.nesagebaggudaininki.com/]ポールスミス[/url][url=http://www.chiipubagkawaii.com/]ポールスミス 財布[/url] rccl

    vhxu
    bele [url=http://www.choubibaggukireii.com/]トリーバーチ 靴 新作[/url][url=http://www.baghanbaichuu.com/]tory burch バッグ 店舗[/url][url=http://www.gekiyasubaggunosekai.com/]tory burch バッグ 激安[/url][url=http://www.nesagebaggudaininki.com/]paul smith バッグ アウトレット[/url][url=http://www.chiipubagkawaii.com/]paul smith バッグ メンズ[/url] goyv
    [url=http://www.choubibaggukireii.com/]トリーバーチ 靴 格安[/url][url=http://www.baghanbaichuu.com/]tory burch バッグ アウトレット[/url][url=http://www.gekiyasubaggunosekai.com/]tory burch バッグ 激安[/url][url=http://www.nesagebaggudaininki.com/]paul smith バッグ 2013[/url][url=http://www.chiipubagkawaii.com/]paul smith バッグ レディース[/url] tczt
    [url=http://www.choubibaggukireii.com/]トリーバーチ 靴 激安[/url][url=http://www.baghanbaichuu.com/]tory burch バッグ アウトレット[/url][url=http://www.gekiyasubaggunosekai.com/]tory burch バッグ 激安[/url][url=http://www.nesagebaggudaininki.com/]paul smith 2013[/url][url=http://www.chiipubagkawaii.com/]paul smith バッグ 格安[/url] rjgb
    [url=http://www.choubibaggukireii.com/]トリーバーチ 靴 通販[/url][url=http://www.baghanbaichuu.com/]tory burch バッグ 2013[/url][url=http://www.gekiyasubaggunosekai.com/]tory burch バッグ 格安[/url][url=http://www.nesagebaggudaininki.com/]paul smith バッグ 2013[/url][url=http://www.chiipubagkawaii.com/]paul smith バッグ 格安[/url] ffyw

    lgup [url=http://www.choubibaggukireii.com/][/url][url=http://www.baghanbaichuu.com/][/url][url=http://www.gekiyasubaggunosekai.com/][/url][url=http://www.nesagebaggudaininki.com/][/url][url=http://www.chiipubagkawaii.com/][/url]

    Reply
  9. Leebaz May 22, 2013 at 10:13 am

    Hey,
    Is there a way to have an in-line image upload, without the media uploader pop up? I want users to simply upload an image as quickly and easily as possible, and many of them are confused by the media uploader pop up, even though I have disabled most of the fields.
    Thanks

    Reply
  10. anou January 21, 2014 at 10:37 am

    here’s the code for inserting in a field the URL of the image:
    `
    ( function( $ ) {
    $(document).ready(function() {

    $(‘.removeImageBtn’).click(function() {
    $(this).closest(‘p’).prev(‘.awdMetaImage’).html(”);
    $(this).prev().prev().val(”);
    return false;
    });

    $(‘#image_upload_button’).click(function() {
    inputField = $(this).prev(‘.metaValueField’);
    tb_show(”, ‘media-upload.php?TB_iframe=true’);
    window.send_to_editor = function(html) { console.log(html);
    url = $(html).attr(‘src’);
    inputField.val(url);
    inputField.closest(‘p’).prev(‘.awdMetaImage’).html(‘URL: ‘+ url + ”);
    tb_remove();
    };
    return false;
    });
    });
    })( jQuery );

    `

    Reply
  11. Beneditk September 29, 2014 at 1:44 pm

    Very nice tutorial!
    I inserted the meta box in my new plugin for testing.
    It worked very good after some little changes…
    But when I upload e.g.. 10 images to my post (custom post type), how can I get the data of these images (id, url, title, description, alt-text)?

    Reply
  12. Miles October 17, 2014 at 5:46 pm

    Great tutorial, I was looking for some way to create an image uploader in a meta box, but other tutorials I found out there made things to complicated and added in a bunch of unnecessary code that made it tough to muck through for my use. Any tips on if I wanted to add 3 uploaders and use each uploaded image separately in my templates?

    Reply
  13. symptoms bacterial infection October 26, 2014 at 9:14 am

    Get rid of Dimply skin Through Natural Therapeutic massage

    Certainly, there are just a few girls that never have problems with cellulite and thus there are plenty of “miracle guaranteed treatments” available
    on the market that aid in eliminating your dimply skin. Yet each and every lady
    that has used that has learned that these kinds of anti-cellulite cures possess
    no effect. The most effective method to eliminate your lumpy skin may be the oldest strategy inside the
    book! By means of a precise anti-cellulite massage therapy, it will be easy to effectively eliminate
    cellulite from the upper thighs, hip and legs as well as bottoms.

    Reply

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>