Add a Media Button in Wordpress

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">

Share this

Related Posts

Previous
Next Post »