Using WordPress Media uploader in admin theme options

While WordPress have its very cool media uploader why should we use our own code to make process lengthy to add media files into WordPress? If you are writing a WordPress theme or WordPress plugin and you want to put an image uploader in it where you have already created WordPress options what you have to do for that?

WordPress provide its all functionality on its API for that you have to do just few things really. 🙂 Here i am talking about WordPress templates means i am assuming you are writing WordPress theme and you already have created WordPress admin option panel where now you need an image uploader let’s say for logo.

Create a new directory name it /js/ inside your WordPress theme directory now create a new JS file with name theme_options.js or anything you need and save inside your /js folder. You have to add the following code in theme_options.js file.

jQuery(document).ready(function($){
	var custom_uploader;

	$('#upload_image_button').click(function(e) {
		e.preventDefault();
		//If the uploader object has already been created, reopen the dialog
	if (custom_uploader) {
		custom_uploader.open();
		return;
	}
	
	//Extend the wp.media object
	custom_uploader = wp.media.frames.file_frame = wp.media({
		title: 'Choose Image',
		button: {
			text: 'Choose Image'
	},
		multiple: false
	});
	
	//When a file is selected, grab the URL and set it as the text field's value
	custom_uploader.on('select', function() {
		attachment = custom_uploader.state().get('selection').first().toJSON();
		$('#upload_image').val(attachment.url);
	});

		//Open the uploader dialog
		custom_uploader.open();
	});
});

Now you have created a JS file which have Jquery functions. Remember in your admin options panel WordPress already have inserted jQuery so you don’t need to put up that.

add_action('admin_enqueue_scripts', 'uploader_javaScript');

function uploader_javaScript() {
	if (isset($_GET['page']) && $_GET['page'] == 'admin_options.php') {
		wp_enqueue_media();
		wp_register_script('theme_options', bloginfo('template_directory').'/wp-content/themes/yourtheme/js/my-admin.js', array('jquery'));
		wp_enqueue_script('theme_options');
	}
}

The above code is responsible to activate WordPress media uploader and insert uploaded file destination in text field. To make it working you have to include this file into WordPress head how you can do that. I am writing a function which will add that file only if when user is on admin_options.php file and this uploaded will accessible there. Let’s say you are writing your admin options of WordPress in functions.php or admin_options.php I am going to use admin_options.php as file name where i have my code of theme options. Now you can add the following code before start of your theme options. in admin_options.php file

Now finally you can add the following code inside your admin options Form that will work as you expect if you have done everything right.

<input id="upload_image" type="text" size="36" name="my_image" value="" />
<input id="upload_image_button" class="button" type="button" value="Upload Image" />

Once done you can save image value to database options by its field name which is my_image and you can name it anything and you can use as many as uploaders in one page of theme options.