6

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.

Improve this question

1 Answer 1

Reset to default
8

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;
});
Improve this answer
8
  • Bravo! Thanks web design. There have a clue how to add post_id=$post->ID?
    – haha
    Commented Jan 31, 2011 at 7:00
  • use global $post; and then $post->ID
    – Bainternet
    Commented Jan 31, 2011 at 7:15
  • media-upload.php?post_id=ID&amptype=image&amp;TB_iframe=true in wp 3.1 required post_id=ID if not we will getting Notice: Undefined index: post_id. If we put any ID the Insert into Post button will not shown. How to fix this one?
    – haha
    Commented Jan 31, 2011 at 16:51
  • 1
    i updated the answer
    – Bainternet
    Commented Jan 31, 2011 at 17:37
  • 3
    There is one odd thing about this code, and i've seen variations of the same example posted numerous times, is that this line.. formfield = jQuery('#upload_image').attr('name'); remains totally pointless, the var is defined but never used(so you can actually remove that line without ill effect).
    – t31os
    Commented Feb 1, 2011 at 11:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.