Upload Media in WordPress 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:

view sourceprint?

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.

view sourceprint?

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.

view sourceprint?

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:

view sourceprint?

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

Step 3

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

view sourceprint?

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.

view sourceprint?

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.
If you have any questions or comments please let me know below.