jQuery(document).ready(function($){ $('#header_logo_upload_button').click(function(e) { e.preventDefault(); var image = wp.media({ title: 'Upload Image', // mutiple: true if you want to upload multiple files at once multiple: false }).open() .on('select', function(e){ // This will return the selected image from the Media Uploader, the result is an object var uploaded_image = image.state().get('selection').first(); // We convert uploaded_image to a JSON object to make accessing it easier // Output to the console uploaded_image console.log(uploaded_image); var image_url = uploaded_image.toJSON().url; // Let's assign the url value to the input field $('#header_logo').val(image_url); }); }); $('#favicon_upload_btn').click(function(e) { e.preventDefault(); var image = wp.media({ title: 'Upload Image', // mutiple: true if you want to upload multiple files at once multiple: false }).open() .on('select', function(e){ // This will return the selected image from the Media Uploader, the result is an object var uploaded_image = image.state().get('selection').first(); // We convert uploaded_image to a JSON object to make accessing it easier // Output to the console uploaded_image console.log(uploaded_image); var image_url = uploaded_image.toJSON().url; // Let's assign the url value to the input field $('#favicon').val(image_url); }); }); $('#slide1_upload_btn').click(function(e) { e.preventDefault(); var image = wp.media({ title: 'Upload Image', // mutiple: true if you want to upload multiple files at once multiple: false }).open() .on('select', function(e){ // This will return the selected image from the Media Uploader, the result is an object var uploaded_image = image.state().get('selection').first(); // We convert uploaded_image to a JSON object to make accessing it easier // Output to the console uploaded_image console.log(uploaded_image); var image_url = uploaded_image.toJSON().url; // Let's assign the url value to the input field $('#slide1').val(image_url); }); }); $('#slide2_upload_btn').click(function(e) { e.preventDefault(); var image = wp.media({ title: 'Upload Image', // mutiple: true if you want to upload multiple files at once multiple: false }).open() .on('select', function(e){ // This will return the selected image from the Media Uploader, the result is an object var uploaded_image = image.state().get('selection').first(); // We convert uploaded_image to a JSON object to make accessing it easier // Output to the console uploaded_image console.log(uploaded_image); var image_url = uploaded_image.toJSON().url; // Let's assign the url value to the input field $('#slide2').val(image_url); }); }); $('#slide3_upload_btn').click(function(e) { e.preventDefault(); var image = wp.media({ title: 'Upload Image', // mutiple: true if you want to upload multiple files at once multiple: false }).open() .on('select', function(e){ // This will return the selected image from the Media Uploader, the result is an object var uploaded_image = image.state().get('selection').first(); // We convert uploaded_image to a JSON object to make accessing it easier // Output to the console uploaded_image console.log(uploaded_image); var image_url = uploaded_image.toJSON().url; // Let's assign the url value to the input field $('#slide3').val(image_url); }); }); $('#slide4_upload_btn').click(function(e) { e.preventDefault(); var image = wp.media({ title: 'Upload Image', // mutiple: true if you want to upload multiple files at once multiple: false }).open() .on('select', function(e){ // This will return the selected image from the Media Uploader, the result is an object var uploaded_image = image.state().get('selection').first(); // We convert uploaded_image to a JSON object to make accessing it easier // Output to the console uploaded_image console.log(uploaded_image); var image_url = uploaded_image.toJSON().url; // Let's assign the url value to the input field $('#slide4').val(image_url); }); }); $(document).on('click' , '.upload-button', function(e) { e.preventDefault(); var $this = $(this); var image = wp.media({ title: 'Upload Image', // mutiple: true if you want to upload multiple files at once multiple: false }).open() .on('select', function(e){ // This will return the selected image from the Media Uploader, the result is an object var uploaded_image = image.state().get('selection').first(); // We convert uploaded_image to a JSON object to make accessing it easier // Output to the console uploaded_image var image_url = uploaded_image.toJSON().url; // Let's assign the url value to the input field $this.prev('.upload').val(image_url); var img = "Remove"; $this.next('.screenshot').html(img); }); }); $(document).on('click' , '.remove-screenshot', function(e) { $(this).parent().prev().prev('.upload').val(''); $(this).parent().html(''); }); });