{"id":218133,"date":"2020-01-02T05:18:33","date_gmt":"2020-01-02T05:18:33","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=218133"},"modified":"2024-07-03T09:51:35","modified_gmt":"2024-07-03T09:51:35","slug":"how-to-use-wordpress-media-upload-in-plugin-theme","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-use-wordpress-media-upload-in-plugin-theme\/","title":{"rendered":"How to use WordPress Media Upload in plugin \/ theme"},"content":{"rendered":"\n

Using the WordPress media library in your own plugin\/theme will save you a bunch of time. This blog will provide an example of how to use the Media Library in a plugin\/theme environment.<\/p>\n\n\n\n

When using wp.media, there are a few things that we are interested. The first one is how to define the media frame.<\/p>\n\n\n\n

ENQUEUE THE SCRIPT<\/h3><\/div>
\n
<?php\n  \/* Add the media upload script *\/\n  function wk_enqueue_script() {\n    \/\/Enqueue media.\n    wp_enqueue_media();\n    \/\/ Enqueue custom js file.\n    wp_register_script( 'wk-admin-script', plugins_url( __FILE__ ), array('jquery') );\n    wp_enqueue_script( 'wk-admin-script' );\n  }\n  add_action('admin_enqueue_scripts', 'wk_enqueue_script');\n?><\/pre>\n<\/div>\n\n\n\n
var wkMedia;\n\/\/ Extend the wp.media object\n    wkMedia = wp.media.frames.file_frame = wp.media({\n      title: 'Choose Image',\n      button: {\n      text: 'Choose Image'\n    }, multiple: false });<\/pre>\n\n\n\n
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\/theme.<\/p>\n\n\n\n
Form<\/h3><\/div>
\n
\/\/Form html\n<form method="post">\n  <input id="wk-media-url" type="text" name="media" \/>\n  <input id="wk-button" type="button" class="button" value="Upload Image" \/>\n  <input type="submit" value="Submit" \/>\n<\/form><\/pre>\n<\/div>\n\n\n\n
We need some html tags in order to select media file and these are:-<\/p>\n\n\n\n