How to use media upload on theme option page?

by

I want implement upload logo to my theme option page. Currently I follow this code

What I have done for now load a related jquery for the media upload

function load_only() {
    add_thickbox();
    wp_enqueue_script('jquery-option', get_template_directory_uri() . '/admin/js/jquery.option.js', array('jquery','media-upload','thickbox','jquery-ui-core','jquery-ui-tabs'), '1.0');
}

Question

How to implement the upload form using existing media upload?

<input id="theme_options_upload" type="text" name="theme_options_upload" value="<?php esc_attr_e( $options['theme_options_upload'] ); ?>" />
<input type="button" name="just_button" value="<?php esc_attr_e('Upload'); ?>" />

I want to know

  1. How to link the button to media-upload.php
  2. After we upload image and click Insert into Post button on media-upload the image will place into field name="theme_options_upload"

Let me know.

1
1

You are most likely to save the url of the image and not the whole image tag,
and there is a great tutorial that explains just how to use the media uploader in your own theme or plugin:
http://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/

update

In case of using this in a meta box you will need the post id so change the js code from:

jQuery('#upload_image_button').click(function() {
 formfield = jQuery('#upload_image').attr('name');
 tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
 return false;
});

to

jQuery('#upload_image_button').click(function() {
 formfield = jQuery('#upload_image').attr('name');
 post_id = jQuery('#post_ID').val();
 tb_show('', 'media-upload.php?post_id='+post_id+'&amp;type=image&amp;TB_iframe=true');
 return false;
});

Leave a Comment