It’s fairly simple to implement, providing you already have a bit of experience with the WordPress API.

The first step is to prepare your HTML. Put it wherever the code for your admin page is. You want to have a text input for the image URL, and a button that will launch the uploader dialog.

<tr valign="top">
<th scope="row">Upload Image</th>
<td><label for="upload_image">
<input id="upload_image" type="text" size="36" name="upload_image" value="" />
<input id="upload_image_button" type="button" value="Upload Image" />
<br />Enter an URL or upload an image for the banner.
</label></td>
</tr>

Now that the easy part is out of the way, it’s time to start making it do something. You need to enqueue some scripts and styles. Here’s an example function to show how it’s done:

function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', WP_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
}

function my_admin_styles() {
wp_enqueue_style('thickbox');
}

if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');
}

We need the media-upload and thickbox scripts for starters, as well as jQuery, which is already included. Then we have to register and enqueue our own JavaScript file, my-script.js, which will handle the media uploader functionality. We also need to load the thickbox stylesheet in the next function.

The if (…) block ensures that the scripts and styles will only be included if the user is on a specific admin page. If you look at your plugin’s (or theme’s) admin page, the URL should have a ?page=some_string at the end. Substitute my_plugin_page for that string.

Now for the part the actually invokes the uploader: the JavaScript. This will go in the my-script.js file we included earlier.

jQuery(document).ready(function() {

jQuery('#upload_image_button').click(function() {
 formfield = jQuery('#upload_image').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('#upload_image').val(imgurl);
 tb_remove();
}

});

The first click() event listener opens a ThickBox dialog when the “Upload Image” button is clicked, and loads the uploader page inside it. It also stores the name of the URL input field in a variable, for later use.

The second function overrides the send_to_editor() function in the media-upload script. This is probably the most important part. When the “Insert into Post” button is clicked in the uploader dialog, this function fires. It collects the URL of the image that was uploaded, dumps it into the awaiting form field, and closes the ThickBox dialog.

That’s it. Providing everything went according to planned, you should have a form field that will either accept an arbitrary image URL, or allow a user to upload one on the spot.

Update: If you want to use the fancy new media uploader introduced in WordPress 3.5, be sure to check out the revised and updated post that covers it.

By default the “Help” menu doesn’t do much. It gives some useful pointers on the Dashboard and Write screen, but other than that it pretty much just shows links to the Codex and WordPress.org support forums.

What if you wanted to make the “contextual menu” actually…contextual? If you’re a plugin or theme developer, you can add your own helpful information to the menu. It’s as simple as hooking into the contextual_help filter:

function my_contextual_help($text) {
$screen = $_GET['page'];
if ($screen == 'my_plugin') {
$text = "<h5>Need help with this plugin?</h5>";
$text .= "<p>Check out the documentation and support forums for help with this plugin.</p>";
$text .= "<a href=\"http://example.org/docs\">Documentation</a><br /><a href=\"http://example.org/support\">Support forums</a>";
}
return $text;
}

add_action('contextual_help', 'my_contextual_help');

The basic idea is to take the default contents of the menu, $text, and replace it with your own content. The $screen variable is used to make sure that the menu is only changed on the plugin’s pages, rather than universally through the Admin.