Image Upload Button in WordPress admin area

Step 1. Prepare jQuery code
Step 2. Enqueue your jQuery scripts into wp-admin
Step 3. PHP function
Example 1. Using Meta Boxes
Example 2. Create an option page with the Upload button
Example 3. Much more simple solution with my plugin

Sometimes it is required to create a simple and intuitive graphic interface for the clients that allows to upload images or another files for posts or in website settings without problems.

For me it is enough if the website settings has a text input field where I can place the image URL. But it is not enough for the regular user. It is even not professional — that’s what I think.

In this post I will show you how to create a beautiful, simple and customizable media uploader for your website.

Before we begin: Upload Button Demonstration

As an example I use the website of one of my clients, with his permission of course.

And here is how the button looks like. Clean and really simple.

Upload Image button in WordPress admin area

If you click on the Upload image button, WordPress media uploader popup window will appear. In this window you can choose one of the previous uploaded images or upload a new one.

Some customization options:

you can change the title of the media library popup ( Insert image ) and the label of the button ( Use this image ),
you can also configure in the code easily if you want to attach the uploaded image to the current post or not,
multimple image selection is allowed as well but it requires some additional code.

If the image is selected, you can click on it to choose another one or remove it by clicking Remove image link.

And below is my instruction.

3 easy steps of Creating the Upload Image Button on your Own Website

Step 1. jQuery code

If you do not know much about jQuery, create an empty .js file in your current WordPress theme folder and place the following code there. Otherwise you can even skip the second step.

jQuery(function($){
	/*
	 * Select/Upload image(s) event
	 */
	$('body').on('click', '.misha_upload_image_button', function(e){
		e.preventDefault();
 
    		var button = $(this),
    		    custom_uploader = wp.media({
			title: 'Insert image',
			library : {
				// uncomment the next line if you want to attach image to the current post
				// uploadedTo : wp.media.view.settings.post.id, 
				type : 'image'
			},
			button: {
				text: 'Use this image' // button label text
			},
			multiple: false // for multiple image selection set to true
		}).on('select', function() { // it also has "open" and "close" events 
			var attachment = custom_uploader.state().get('selection').first().toJSON();
			$(button).removeClass('button').html('<img class="true_pre_image" src="' + attachment.url + '" style="max-width:95%;display:block;" />').next().val(attachment.id).next().show();
			/* if you sen multiple to true, here is some code for getting the image IDs
			var attachments = frame.state().get('selection'),
			    attachment_ids = new Array(),
			    i = 0;
			attachments.each(function(attachment) {
 				attachment_ids[i] = attachment['id'];
				console.log( attachment );
				i++;
			});
			*/
		})
		.open();
	});
 
	/*
	 * Remove image event
	 */
	$('body').on('click', '.misha_remove_image_button', function(){
		$(this).hide().prev().val('').prev().addClass('button').html('Upload image');
		return false;
	});
 
});

Step 2. Enqueue scripts into admin area using wp_enqueue_script() and wp_enqueue_media()

We need this piece of code to add our jQuery script to WordPress admin area. Insert it to your current theme functions.php file.

function misha_include_myuploadscript() {
	/*
	 * I recommend to add additional conditions just to not to load the scipts on each page
	 * like:
	 * if ( !in_array('post-new.php','post.php') ) return;
	 */
	if ( ! did_action( 'wp_enqueue_media' ) ) {
		wp_enqueue_media();
	}
 
 	wp_enqueue_script( 'myuploadscript', get_stylesheet_directory_uri() . '/customscript.js', array('jquery'), null, false );
}
 
add_action( 'admin_enqueue_scripts', 'misha_include_myuploadscript' );

Step 3. Ready-to-use PHP function

Insert this function to functions.php file as well.

/*
 * @param string $name Name of option or name of post custom field.
 * @param string $value Optional Attachment ID
 * @return string HTML of the Upload Button
 */
function misha_image_uploader_field( $name, $value = '') {
	$image = ' button">Upload image';
	$image_size = 'full'; // it would be better to use thumbnail size here (150x150 or so)
	$display = 'none'; // display state ot the "Remove image" button
 
	if( $image_attributes = wp_get_attachment_image_src( $value, $image_size ) ) {
 
		// $image_attributes[0] - image URL
		// $image_attributes[1] - image width
		// $image_attributes[2] - image height
 
		$image = '"><img src="' . $image_attributes[0] . '" style="max-width:95%;display:block;" />';
		$display = 'inline-block';
 
	} 
 
	return '
	<div>
		<a href="#" class="misha_upload_image_button' . $image . '</a>
		<input type="hidden" name="' . $name . '" id="' . $name . '" value="' . $value . '" />
		<a href="#" class="misha_remove_image_button" style="display:inline-block;display:' . $display . '">Remove image</a>
	</div>';
}

That’s it. Now we can use the button in our post meta boxes or option pages. If this code doesn’t seems simple for you, please look at this ready solution.

Example 1. Media Uploader in Post Meta Boxes

Yes, yes, yes, this code is also for your functions.php file.

/*
 * Add a meta box
 */
add_action( 'admin_menu', 'misha_meta_box_add' );
 
function misha_meta_box_add() {
	add_meta_box('mishadiv', // meta box ID
		'More settings', // meta box title
		'misha_print_box', // callback function that prints the meta box HTML 
		'post', // post type where to add it
		'normal', // priority
		'high' ); // position
}
 
/*
 * Meta Box HTML
 */
function misha_print_box( $post ) {
	$meta_key = 'second_featured_img';
	echo misha_image_uploader_field( $meta_key, get_post_meta($post->ID, $meta_key, true) );
}
 
/*
 * Save Meta Box data
 */
add_action('save_post', 'misha_save');
 
function misha_save( $post_id ) {
	if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) 
		return $post_id;
 
	$meta_key = 'second_featured_img';
 
	update_post_meta( $post_id, $meta_key, $_POST[$meta_key] );
 
	// if you would like to attach the uploaded image to this post, uncomment the line:
	// wp_update_post( array( 'ID' => $_POST[$meta_key], 'post_parent' => $post_id ) );
 
	return $post_id;
}

Example 2. Media Uploader in Options Pages

Code for functions.php:

add_action('admin_menu', 'misha_add_options_page');
 
function misha_add_options_page() {
	$page_slug = 'uplsettings';
	$option_name = 'header_img';
 
	if ( isset( $_GET['page'] ) && $_GET['page'] == $page_slug ) {
		if ( isset( $_REQUEST['action'] ) && 'save' == $_REQUEST['action'] ) {
			update_option( $option_name, $_REQUEST[ $option_name ] );
			header('Location: '. site_url() .'/wp-admin/options-general.php?page=' . $page_slug . '&saved=true');
			die;
		}
	}
	add_submenu_page('options-general.php','More settings','More settings (title)', 'edit_posts', $page_slug, 'misha_print_options_page');
}
 
function misha_print_options_page() {
 
	$option_name = 'header_img';
 
	if ( isset( $_REQUEST['saved'] ) ){
		echo '<div class="updated"><p>Saved.</p></div>';
	}
	echo '<div class="wrap"><form method="post">'
	. misha_image_uploader_field( $option_name, get_option( $option_name ) )
	. '<p class="submit">
		<input name="save" type="submit" class="button-primary" value="Save changes" />
		<input type="hidden" name="action" value="save" />
		</p></form></div>';
}

Example 3. Much more simple solution with my plugin

First of all you have to download this plugin and install it on your WordPress website.

In Meta Box

Look how simple it is to add an upload button to post meta boxes (code for functions.php):

new trueMetaBox( array(
		'id'	=>	'misha', // metabox ID, this is also used as custom field prefix
		'name'	=>	'Metabox with the image upload button', // title
		'post_type'	=> array('page'), // post types here
		'priority'	=> 'high', // low | high | default
		'capability'=>	'edit_posts', // capabilities the user should have to edit this metabox
		'args'	=>	array(
 
			array(
				'id'		=> 'img',
				'label'		=> 'Image',
				'description'	=> 'The upload button description should be here.',
				'type'		=> 'image'
			)
 
		)
	)
);

The result:

Upload Image Meta Box in WordPress using my plugin

In Options Page

And this is how to add an Upload button to Settings > General.

new trueOptionspage( array(
	'slug'		=> 'general',
	'sections' 	=> array(
 		array(
			'id'	=> 'default',
			'fields'=> array(
				array(
					'id'		=> 'img1',
					'label'		=> 'Custom image in setting',
					'description'	=> 'Your custom description is here.',
					'type'		=> 'image'
				)
 			)
		) 
	)
));

Image Upload Button in WordPress general settings.

If you have a question, please leave it in comments.

Comments — 56

← Next comments

Roberto

Hello Misha, thanks for your answer.
You’re using your scripts to manage the image gallery of a site of a real estate agency. I have two questions to ask yourself:
you can after you upload the images to manage them in administration, one by one? Now it is only seen her picture and I have no chance to toglierne or add, then if I click on “remove image” takes it from me by the administration but not from the site
In the plugin there are other features?

Thank you.
- Misha
  
  Hello,
  
  Hmm, strange… I’m not sure that there is a plugin but you can contact me and I will help you.
Roberto

Hi, it’s possible upload multiple image and save an array in a metadata field, like the most popular real estate site?
- Misha
  
  Hi,
  first of all – uncomment line 19 in JS code :)

Comments are closed

Customizable Media Uploader in WordPress admin area