How to use WordPress Media Uploader in Plugin or Theme Admin page

We can insert any media files in our post content by clicking the button ‘Upload/Insert’ from post editor. But If you need to use files for your WordPress plugin or theme settings, you have to either upload new files form your computer or using files from WordPress media library. You can create a file upload system with your plugin easily that will not well organized. But you can use WordPress media upload library instead. There is no documentation/guide for adding this media uploader functionality in your own settings page. Here I am writing a guide to use this media uploader very easily.

wp media uploader

Let you have an form input field ‘image_location’ , you want to let user to insert image location in this field or they can be able to upload/use image from media library. Your form will be like following image.
image upload field

SETP 1: Setting up Your PHP(WP Admin Head)

Call three JavaScript library (jquery, media-upload and thickbox) and one CSS for thickbox in the admin head.
Add following php codes in your plugin main page.

 function onetarek_wpmut_admin_scripts()
 if (isset($_GET['page']) && $_GET['page'] == 'oneTarek_wpmut_plugin_page')
 wp_register_script('my-upload', ONETAREK_WPMUT_PLUGIN_URL.'onetarek-wpmut-admin-script.js', array('jquery','media-upload','thickbox'));

 function onetarek_wpmut_admin_styles()
 if (isset($_GET['page']) && $_GET['page'] == 'oneTarek_wpmut_plugin_page')
 add_action('admin_print_scripts', 'onetarek_wpmut_admin_scripts');
 add_action('admin_print_styles', 'onetarek_wpmut_admin_styles');

SETP 2: Setting up Your JavaScript(jQuery)

Create a JavaScript file ‘onetarek-wpmut-admin-script.js’ with following codes

Using WordPress Media Uploader System with plugin settings
Author: oneTarek
Author URI:
jQuery(document).ready(function() {

    var formfield;

    /* user clicks button on custom field, runs below code that opens new window */
    jQuery('.onetarek-upload-button').click(function() {
        formfield = jQuery(this).prev('input'); //The input field that will hold the uploaded file url

        return false;

	Please keep these line to use this code snipet in your project
	Developed by oneTarek
    //adding my custom function with Thick box close function tb_close() .
    window.old_tb_remove = window.tb_remove;
    window.tb_remove = function() {
        window.old_tb_remove(); // calls the tb_remove() of the Thickbox plugin

    // user inserts file into post. only run custom if user started process using the above process
    // window.send_to_editor(html) is how wp would normally handle the received data

    window.original_send_to_editor = window.send_to_editor;
    window.send_to_editor = function(html){
        if (formfield) {
            fileurl = jQuery('img',html).attr('src');
        } else {


SETP 3: Setting up Your HTML

Open your php file that represent your plugin page and form field. Put following codes into your form codes.

<input id="image_location" type="text" name="image_location" value="" size="50" />
 <input  class="onetarek-upload-button button" type="button" value="Upload Image" />

That’s all , you are done. Now test your plugin.
I made a simple plugin to test this whole process I explained above.
Download my demo plugin

As a WordPress Plugin Developer You Should Know Following Topics:

This Post May Be The Answer of Following Queires

  • Add wordpress media uploader to settings page
  • WordPress media uploader with my plugin options fields
  • Select files for plugin settings via using media uploader
  • WordPress media uploader in theme option page
  • Set wordpress image/media uploader with an input field
  • Using wordpress media uploader in plugin
  • Add media uploader library in wordpress plugin
  • Multiple Media Upload Inputs Per Page


  1. this is really very helpfull,bt this is only uploader media library.i want full.. means to say listing of all records and editions of all records.


  2. Hello,

    Thanks for you article, i am developing a same sort of plugin and i was wondering if you know of a way to get a custom upload directory working.



  3. Thank you so much for this help


  4. Hello Bro, thanks for the tutorial but the plugin is not uploading a file the lighbox came and media library is not working but media library is not uploading the picture and i cant select any image from the media library in to the post which should show in the textbox for image location.


    1. Which WordPress version are you using?
      I did not test WordPress 3.9 yet


  5. Great tutorial — your demo did exactly what I needed it to do and the code integrated into my current setup perfectly. Thank you.


  6. Very helpful post.
    But tell me how to use it in theme option page. I am new in wordpress


Leave a Reply

Your email address will not be published. Required fields are marked *