Adding our media button is the first and easiest part. As with customising many things in WordPress, we will use actions to put our button in the right place.
<?php
wp_enqueue_script('jquery');
// This will enqueue the Media Uploader script
wp_enqueue_media();
if ( ! isset( $_REQUEST['settings-updated'] ) )
$_REQUEST['settings-updated'] = false;
?>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#upload-btn').click(function(e) {
e.preventDefault();
var image = wp.media({
title: 'Upload Image',
multiple: false
}).open()
.on('select', function(e){
var uploaded_image = image.state().get('selection').first();
console.log(uploaded_image);
var image_url = uploaded_image.toJSON().url;
$('#image_url').val(image_url);
});
});
});
</script>
<input type="text" name="wp_calc_options[logo_image]" value="" id="image_url" class="regular-text">
<input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">