Practical WordPress Development

Adding More Fields to the WordPress Media Uploader

Last week, I shared a short post on how to include your own instance of the WordPress Media Uploader in your theme or your plugin.

Though it walks you through everything that you need, on aspect of using the instance that I described is that it’s limited. This is fine for certain situations, but there are other times where you may want to grab more information from the user.

Case in point, the post received the following comment:

Now, how do you activate (turn on) the Insert Image via URL feature of the Media Uploader?

Which I thought was a good question especially given that most of us are used to seeing more options in the media uploader than what the previous post described.

Fields for the WordPress Media Uploader

Since WordPress is using both Backbone and Underscores to drive the user interface and events for the Media Uploader, all that we need to do is to change the way in which we’re initializing the file_frame and to update the event handler for when an image is selected.

Though the code includes plenty of comments that should explain what’s going on, note that the three most important things are:

  1. We’ve specified a `frame` argument
  2. We’ve set the `state` to `insert`
  3. We’ve changed the event handler to `on` for when an image is selected

Other than that, everything is the same.

Can More Be Done?

Yes – because of the nature of the libraries used to build this UI, you can create your own templates for the WordPress media uploader and use the frame argument to retrieve your custom post.

The challenge is that if you’re not familiar with Backbone and Underscores – which I’m not – you have to do a lot of poking around in the core code to see how they’ve implemented it, and then use that as an example.

Even still, the code above offers more information about the selected image than the initial version of the code shared last week.


  1. Julien Maury

    Thanks for the clarification. To which extent this could provide us some ways to customize UI?

  2. Jacob Schweitzer

    Good intro to this, I wish there was more documentation about it. Any idea how to open the Attachment Details view that shows up when you click on an image on the main media page? Tried all kinds of frames and models but can’t get it to work just to open that view where you are editing one attachment.

    • Tom

      Hey Jacob!

      If you checkout this plugin, then you may get a better idea as to how to do more complex operations as I expose a number of different fields in the display for that particular plugin.

      Hope this helps :)

      • Jacob Schweitzer

        Cool, thanks for that, I’ve just had a look at the code and it expands a bit more on the topic. What I want to do is to add the ability to then click on that image that is already inserted and be taken to an Attachment Details screen for that exact image, like when you click on an image in the Media section. I think this could be useful for your plugin as well so users don’t have to look through all their images to find the one that is in the widget.

        • Tom

          Thanks for the feedback, Jacob.

          Right now, I don’t have a lot of information for how to achieve that (as it’d take longer than a comment to explain it), but if/when I get a chance to update the plugin in the future, I’ll be sure to keep this in mind.

          Thanks again :).

Leave a Reply

© 2020 Tom McFarlin

Theme by Anders NorenUp ↑