Using the WordPress media library in your own plugin/theme will not only save you a bunch of time but will also incorporate the Media Library that clients are already used to using. This article will provide an example of how to use the Media Library in a plugin environment.
Please note that this will be a less in depth article than some of my others. Rather than creating an entire example plugin like I’ve done in the past – this article will just show the code snippets that you need to use in order to get everything to work. The rest will be up to you to incorporate into your plugin.
The Form
The form above is all you need to have in order to save a media library item. All it needs is 3 parts – a text input where we will put the URL of the file we select, a button that will activate the WordPress media library, and finally a submit button so that you can do something with the URL.
This doesn’t just magically save the media file to the field or anything – you have to do something with the $_POST[‘image’] data. So on the page you will have to make some PHP that will save the URL to your database. An example would be something like:
But obviously this would change depending what you are looking to do. If you want to simply save the image as an option – check out the Codex Page for the Options API to learn more. I can’t remember if I’ve gone over how to use the WordPress Options API in one of my other tutorials – but I will dedicate a post to it very soon in the future.
The JavaScript
The script above will activate the standard WordPress media library uploader. The script above activates upon clicking the #upload-image-button button. From here you can select to upload a file from your computer or select one that is already in your media library. It will then write the URL of the file into the text input in the HTML form we went over above. This way you can then use the media URL for whatever you want when you submit the form – you can save it in your own database table or you can save it as a WordPress option.
Note that I won’t go over what to do with the URL when you submit the form – that’s up to you depending on what you want to accomplish with the URL in your theme/plugin.
Properly Enqueue the Script
You want to make sure that the script created above is enqueued properly into WordPress. For this tutorial I named my JavaScript file media-lib-uploader.js. We can enqueue the file with the following piece of code:
This piece of code will be put into either your main plugin file if you are working on a plugin, or your functions.php file if you are working on a theme. Note that at the end of the wp_register_script( … ) we add the requirement of jQuery for our script. This is extremely important so don’t forget it. This will ensure that jQuery will be enqueued if it hasn’t been yet, but if it has then it won’t. WordPress takes care of all of this for you so its important to do it this way as opposed to any other method.
Conclusion
That’s it – that’s all you need. I know this “tutorial” wasn’t quite as in depth as some of my other ones – but all the code to use the WordPress Media Library is located above. This should be more than enough for you to use on your own project. In a future tutorial I’ll go over using the WordPress Options API at which point I may give a complete example that includes this media library as well.
As always thank you for reading and please share it around as much as you can! Please feel free to put any suggestions or ideas for future tutorials in the comments section below.