Adding WordPress 3.5 Media uploader to plugin / theme’s setting page

Many often developers require to provide a media uploader button in their theme’s or plugin’s setting page. The WordPress 3.5 media uploader (the one that was released with WordPress 3.5) is extremely simple to use and can be included in the admin pages with just a few lines of code.
So for the sake of this tutorial lets create a custom submenu page below the tools submenu page.

add_action('admin_menu', 'register_new_submenu_page');

function register_new_submenu_page() {
	add_submenu_page( 'tools.php', 'Media Uploader Tutorial', 'Media Uploader Tutorial', 'manage_options', 'media_uploader_tutorial', 'media_uploader_tutorial_callback' ); 
}
function media_uploader_tutorial_callback() {?>
	
	

All the codes shown in this tutorial will go in your active theme’s function.php file.
In your dashboard, you should see a ‘Media Uploader Tutorial’ page below the tools submenu page as shown below.
media-uploader-tutorial
Now, what we want is whenever any one clicks the upload button the WordPress media uploader should pop up.
Since this is our custom page (not the default WordPress ‘Post’ or ‘Page’ as would be the case if we were adding the media uploader in a metabox), so we will have to enqueue the ‘wp_media_enqueue’.

add_action( 'admin_enqueue_scripts', 'enqueue_media' );
function enqueue_media(){
	if($_REQUEST['page']=='media_uploader_tutorial')
	wp_enqueue_media();
}

Now the platform is set. To use the media uploader we just need to add the below jQuery code in the function media_uploader_tutorial_callback


And that’s it. If you click on the upload button now then you should see the media uploader.

Leave a Reply

Your email address will not be published. Required fields are marked *