Adding Custom Image Button with Media Uploader in WordPress

Recently I was working on a plugin where we wanted to use the default media uploader of WordPress for our requirement. We had a custom image button and wanted to upload an image through the media uploader. WordPress built a media uploader beautifully that allows a user to upload a new image or use an existing image from the media library.

It is always recommended to use the built-in media uploader if you are looking for a custom solution to upload an image in the backend. Doing so you are following WordPress standards. Implementing a media uploader just takes a few lines of code. So without further discussion, let’s get started with it.

For this tutorial, I will add a custom image button for the post and page. On click of this button, the media uploader will open where the user can upload the image. The uploaded image URL is set in a custom meta field and will save as a post meta for the specific post or page.

Add Custom Meta Box in WordPress

Meta box is nothing but a block on post or page. Categories, Tags, Featured Image, Excerpt, Discussion, etc are the example of meta boxes. Using the Meta box you can add additional information for the post and page.

We need a meta box that contains the upload image button and a text field. When a user clicks on the button, they will upload the image and the final image URL will set in the text field.

Adding meta box is easy and straight-forward. Write the below code in the functions.php file or in your plugin.

function aw_custom_meta_boxes( $post_type, $post ) {
    add_meta_box(
        'aw-meta-box',
        __( 'Custom Image' ),
        'render_aw_meta_box',
        array('post', 'page'), //post types here
        'normal',
        'high'
    );
}
add_action( 'add_meta_boxes', 'aw_custom_meta_boxes', 10, 2 );

function render_aw_meta_box($post) {
    $image = get_post_meta($post->ID, 'aw_custom_image', true);
    ?>
    <table>
        <tr>
            <td><a href="#" class="aw_upload_image_button button button-secondary"><?php _e('Upload Image'); ?></a></td>
            <td><input type="text" name="aw_custom_image" id="aw_custom_image" value="<?php echo $image; ?>" style="width:500px;" /></td>
        </tr>
    </table>
    <?php
}

After adding the above code, go to your post or page and you should be able to see the new meta box added along with their fields.

Meta Box

Customize WordPress Media Uploader

You are now ready with your meta box. The next thing is on the click of the ‘Upload Image’ button, open the media uploader, and set the uploaded image URL in the text field. So at first you need to create a js file and enqueue it in a WordPress environment.

Let’s create a js file awscript.js and enqueue it as follows:

function aw_include_script() {

    if ( ! did_action( 'wp_enqueue_media' ) ) {
        wp_enqueue_media();
    }
 
    wp_enqueue_script( 'awscript', get_stylesheet_directory_uri() . '/js/awscript.js', array('jquery'), null, false );
}
add_action( 'admin_enqueue_scripts', 'aw_include_script' );

Here, I have given the theme path assuming you are adding a whole code in the theme. If you are doing it through plugin then you need to adjust the path as per your plugin.

To perform this task I have taken a reference of Javascript Reference/wp.media and write the jQuery code. In the awscript.js we will write a media uploader code as follows.

jQuery(function($){
    $('body').on('click', '.aw_upload_image_button', function(e){
        e.preventDefault();
 
        var button = $(this),
        aw_uploader = wp.media({
            title: 'Custom image',
            library : {
                uploadedTo : wp.media.view.settings.post.id,
                type : 'image'
            },
            button: {
                text: 'Use this image'
            },
            multiple: false
        }).on('select', function() {
            var attachment = aw_uploader.state().get('selection').first().toJSON();
            $('#aw_custom_image').val(attachment.url);
        })
        .open();
    });
});

Now go ahead and click on the ‘Upload Image’ button, it will open the media uploader, choose/upload image and you should see the image URL added in the text field. Finally, I am going to save this URL in the ‘postmeta’ table with the key ‘aw_custom_image’. Of course, you can give any name for the key.

function aw_save_postdata($post_id)
{
    if (array_key_exists('aw_custom_image', $_POST)) {
        update_post_meta(
            $post_id,
            'aw_custom_image',
            $_POST['aw_custom_image']
        );
    }
}
add_action('save_post', 'aw_save_postdata');

The save_post is an action triggered whenever a post or page is created or updated. Using this action you can inject your code in the system. You can read more about this hook on WordPress documenation.

I hope you got to know about adding a custom media uploader in WordPress. Try it in your plugin or theme and let me know your thoughts in the comment section below.

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

12 thoughts on “Adding Custom Image Button with Media Uploader in WordPress

  1. Thank you so much for the code.
    I have one question.
    How to remove the uploaded image by pressing a button?

  2. First thanks for the code. I have a question about the media up-loader. It works and gives me the option of form file or media library, but no images are in the media library even though I have images in the library. How can I see the already uploaded images.

    1. For me it worked out just by commenting this line (uploadedTo : wp.media.view.settings.post.id) on the script (if I’m not wrong, it filters the images shown to the ones uploaded to this post only):
      […]
      aw_uploader = wp.media({
      title: ‘Custom image’,
      library : {
      /*uploadedTo : wp.media.view.settings.post.id,*/
      type : ‘image’
      },
      button: {
      text: ‘Use this image’
      },
      multiple: false
      }).on(‘select’, function() {
      […]

  3. Hi!
    I have used your code the image upload option is appeared but media uploader is not working.

  4. hello,Sajid Sayyad
    I use your code. I’m glad to be able to upload it,But how can it see other file types, as well as the files of the media library. Now can only see the file of the picture currently.I uploaded .text .JS…… There’s no way to see it again,Only after uploading can choose.

Leave a Reply

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