Blog

WordPress custom fields are useful for customizing posts and pages, but they should be limited to text-based properties .  Many theme developers provide custom fields for images and require their users to enter the URL of the image.  Though effective, this is very unusable and a burden for non-technical users. Finding the correct url and then copying and pasting it into the field is cumbersome and error prone and most users can not be expected to do this properly or have the technical know how.

A much more usable solution is to integrate the WordPress Uploader and allow the user to upload and select files from the media library just like inserting images into a post.  With a small amount of code, this is easily done.

To display the uploader, you need to call the following javascript function.

tb_show('', 'media-upload.php?TB_iframe=true');

After the user uploads and/or selects a file and clicks “Insert into Post”, the uploader calls another function, window.send_to_editor(html) and passes in an HTML snippet consisting of an anchor tag linking to the file. We simply need to override this function and extract the url of the file. We can then insert the url anywere we want. Typically, you’d want to insert the url into a form field that will be saved as meta data with the post or page.

jQuery('.image_upload_button').click(function() {
    tb_show('', 'media-upload.php?TB_iframe=true');
    window.send_to_editor = function(html) {
        url = jQuery(html).attr('href');
        jQuery('#myInputField').val(url);
        tb_remove();
    };
    return false;
});

An easy way to include this Javascript is to embed it in the header of the post or page editor. However, it’s better to create a separate Javascript file and put your code in there. Both methods are shown below.

Embed Javascript in Header

function embedUploaderCode() {
?>
    <script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('.image_upload_button').click(function() {
            tb_show('', 'media-upload.php?TB_iframe=true');
            window.send_to_editor = function(html) {
                url = jQuery(html).attr('href');
                jQuery('#myInputField').val(url);
                tb_remove();
            };
        return false;
        });
    });
    </script>
<?php 
}
add_action('admin_head', 'embedUploaderCode');

Include External Javascript File

function my_admin_scripts() {
?>
    <script type="text/javascript" 
            src="<?php bloginfo('template_directory'); ?>/lib/MyAdminCode.js">
    </script>
<?php 
}
add_action('admin_head', 'my_admin_scripts');

If you want to add the image uploader on a page that doesn’t have an editor, you’ll need to tell WordPress to load the required javascript and css for the uploader. This is easily done in functions.php with the code below.

function loadUploaderScripts () {
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
}
add_action('admin_print_scripts', 'loadUploaderScripts');
 
function loadUploaderStyles() {
    wp_enqueue_style('thickbox');
}
add_action('admin_print_styles', 'loadUploaderStyles');

My next post will show how to create custom meta boxes that use the image uploader. So keep checking back or subscribe to my RSS Feed to be notified when the article is posted. Also, let me know if you have any problems getting this to work by leaving a comment below.