WordPress media uploaded theme options

4 comments

1. It is possible to use the built in WordPress Media Upload in your theme functions. I’ve incorporated it successfully into many themes, and in a variety of different uses.

   Below is a simple version (I’ve got another version that supports multiple image upload fields in a single page).

   In a javascript file (save as media_upload.js in your theme directory):

   var formfield, tbframe_interval;
   jQuery(document).ready(function() {
       // Bind the click to your upload image button
       jQuery('.upload_image_button').click(function() {
               // Which gets the name of the input field
               formfield = '.image_input';
               tb_show('', 'media-upload.php?post_id=0&type=image&TB_iframe=1');
               // Set an interval to change the button text from Insert Into Post
               tbframe_interval = setInterval(function() {
                   jQuery('#TB_iframeContent').contents().find('.savesend .button').val('Use This Image');
                   }, 2000);
               return false;
       });
       // Bind event to the focus of the input field to trigger the media upload
       jQuery('.image_input').focus(function() {
           jQuery('.upload_image_button').trigger("click");
       });
       // Bind click event to the delete button if it is already displayed
       jQuery("#preview_image .delete").click(function() {removeImage();});
       // Get original send to editor because we are about to override it
       window.original_send_to_editor = window.send_to_editor;
       // Custom function to override where media upload sends data
       window.send_to_editor = function(html) {
           // If formfield set, means we're using our custom function
           if (formfield) {
                   // Have to add tags around html in order to be sure finds img src
                   imgurl = jQuery('img','<p>' + html + '</p>').attr('src');
                   // Send the img url to the input field
                   jQuery(formfield).val(imgurl);
                   // Remove the media upload box
                   tb_remove();
                   // Call our function to display image
                   renderImage(imgurl);
                   // Clear the formfield
                   formfield = "";
                   // Clear the interval that changes the button name
                   clearInterval(tbframe_interval);
               // If not, use the original function
               } else {
                   window.original_send_to_editor(html);
               }
         }
   });
   
   // function to load the image url into the correct input box
   function renderImage(img) {
       // Load the image into the div we set up to display it
       // Also throws in a delete button to remove the image
       jQuery("#preview_image").html('<img src="' + img + '" alt="" /><a class="delete" title="Remove Image" href="javascript:void(0);">X</a>');
       // Bind the click to the delete in order to remove the image
       jQuery("#preview_image .delete").click(function() {removeImage();});
   }
   
   // Function we call when the delete button is clicked
   function removeImage() {
       jQuery("#preview_image").html('');
       jQuery('.image_input').val('');
   }
   

   In your theme’s functions.php file, you have to enqueue the necessary scripts (including the one above) by creating a function and using the WP hooks to call the function on admin int:

   function my_theme_media_script_load() {
       // Load the necessary WP scripts
       wp_enqueue_script('media-upload'); 
       wp_enqueue_script('thickbox'); 
       // Register our custom script
       wp_register_script('my-custom-media-upload', get_bloginfo("template_url") .
           '/javascript/media_upload.js', array('jquery','media-upload','thickbox')); 
       // Load our custom script
       wp_enqueue_script('my-custom-media-upload'); 
       // Load the WP style for the media upload thickbox
       wp_enqueue_style('thickbox');
   }
   
   add_action ('admin_init', 'my_theme_media_script_load');
   

   And finally, where you want the media upload input fields and preview to appear, use the following html:

   <?php 
       // Provide your own code to load the image url into the variable $image
       // Then prepare a couple of variables for displaying the image and delete in the html
       $preview = ($image) ? '<img src="' . $image . '" alt="" />' : '';
       $delete_button = ($image) ? '<a class="delete" href="javascript:void(0);" title="Remove Image"><img src="' . get_bloginfo("template_url") . '/images/delete.png" alt="X" /></a>' : '';
   ?>
   <div class="media">
       <label for="acg_user_photo">Image:</label>
       <input type="text" class="image_input" id="image_input" name="image_upload" value="<?php echo $image; ?>" />
       <input type="button" class="upload_image_button" name="image_button"  value="Upload" />
       <div class="preview" id="preview_image">
           <?php echo $delete_button; ?>
           <p id="preview"><?php echo $preview; ?></p>
       </div>
   </div>
   

   It’s up to you to provide the css to style it up to look good.

   Also please note that this should only ever be done on the admin side. You cannot trust the average visitor to upload anything to your site.

   Log in to Reply

2. I found a way to pass the url from the WP Media Uploader to a text box, then saved the id information from the text field. The input fields:

   <input class="uploading" id="<?php echo $value['id']; ?>_btn" type="button" name="<?php echo $value['id']; ?>" value="Upload File" />
   <input class="set_item_text" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="text" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" />
   

   And for my jQuery:

   jQuery(document).ready(function($) {
   
   $( 'input.uploading' ).click(function() {
       formfield = jQuery(this).attr('name');
       tb_show('', 'media-upload.php?type=image&TB_iframe=true');
       return false;
   });
   
   window.send_to_editor = function(html) {
       imgurl = jQuery('img',html).attr('src');
       jQuery('#'+formfield).val(imgurl);
       tb_remove();
   }
   
   });
   

   The name field from the Button is the same as the ID from the Text box – links the two and passes the information easily. The rest is standard in the functions.php to enable your scripting

   function mytheme_add_style() {
       $file_dir=get_bloginfo('template_directory');
       wp_enqueue_script("functionsJS", $file_dir."/functions/functions.js", false, "1.0");
       wp_enqueue_style('thickbox');
       wp_enqueue_script('media-upload');
       wp_enqueue_script('thickbox');
   }
   
   add_action('admin_init', 'mytheme_add_style');
   

   Log in to Reply

3. I am not a wordpress user/developer, but just as an idea, would it be possible to write your own php page to upload this file to the correct location and embed this page as an iFrame in your dialog?

   Log in to Reply

4. It appears in WordPress 3 this isn’t possible. WordPress loads up the media-upload.php file in an iframe, and the form which usually contains the delete and insert into post and use as post thumbnail, is get_media_item() in media.php at line 1156.

   Unfortunately while one can pull up the media uploader, it cant be modified via hooks and filters to insert the extra buttons or links without modifying the core wordpress files.

   Log in to Reply