This post will go through the process of showing you how to create an upload media button by using WordPress meta boxes.

1. Create a meta box

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

2. Add a callback

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');

3. Create html for meta box and button

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.

4. Include scripts to make popup work

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');

?>

That’s 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 us know below.

Pin It on Pinterest