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:

001 <?php function media_uploader_box(): global $post; ?>
002
003 <?php endif; ?>

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

001 <?php function media_uploader_box(): global $post; ?>
002
003 <style> .media-upload h2 { font-weight: bold; } </style>
004
005 <?php endif; ?>

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

001 <?php function media_uploader_box(): global $post; ?>
002
003 <style> .media-upload h2 { font-weight: bold; } </style>
004
005 <script>
006 ( function( $ ) {
007
008    $(document).ready(
009
010        function()
011        {
012              $('#upload_image_button').click(
013                  function()
014                  {
015                      tb_show('', 'media-upload.php?post_id=<?php  echo $post->ID; ?>&type=image&amp;TB_iframe=true');
016                      return false;
017                  }
018              );
019        }
020    );
021
022 } ) ( jQuery );
023 </script>
024
025 <?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:

001 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.

001 <?php function media_uploader_box(): global $post; ?>
002
003 <style> .media-upload h2 { font-weight: bold; } </style>
004
005 <script>
006 ( function( $ ) {
007
008    $(document).ready(
009
010        function()
011        {
012              $('#upload_image_button').click(
013                  function()
014                  {
015                      tb_show('', 'media-upload.php?post_id=<?php  echo $post->ID; ?>&type=image&amp;TB_iframe=true');
016                      return false;
017                  }
018              );
019        }
020    );
021
022 } ) ( jQuery );
023 </script>
024
025 <div class="media-upload">
026     <h2>Upload Media</h2>
027     <table>
028        <tr valign="top">
029           <td><input id="upload_image_button" type="button" value="Upload Media"></td>
030        </tr>
031     </table>
032 </div>
033
034 <?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.

001 <?php function media_uploader_box(): global $post; ?>
002
003 <style> .media-upload h2 { font-weight: bold; } </style>
004
005 <script>
006 ( function( $ ) {
007
008    $(document).ready(
009
010        function()
011        {
012              $('#upload_image_button').click(
013                  function()
014                  {
015                      tb_show('', 'media-upload.php?post_id=<?php  echo $post->ID; ?>&type=image&amp;TB_iframe=true');
016                      return false;
017                  }
018              );
019        }
020    );
021
022 } ) ( jQuery );
023 </script>
024
025 <div class="media-upload">
026     <h2>Upload Media</h2>
027     <table>
028        <tr valign="top">
029           <td><input id="upload_image_button" type="button" value="Upload Media"></td>
030        </tr>
031     </table>
032 </div>
033
034 <?php endif; ?>
035
036 function admin_scripts()
037 {
038    wp_enqueue_script('media-upload');
039    wp_enqueue_script('thickbox');
040 }
041
042 function admin_styles()
043 {
044    wp_enqueue_style('thickbox');
045 }
046
047 add_action('admin_print_scripts', 'admin_scripts');
048 add_action('admin_print_styles', 'admin_styles');
049
050 ?>

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.