WordPress Media Box Model
Posted By : Satyam Sharma | 30-Apr-2018
Introduction
In this blog i will show you how to use wordpress media box model for upload images, videos and other files in wordpress. Wordpress provide media box model for upload media into our wordpress files. Mainly wordpress stores media in uploads folder which you find in wp-content folder at root directory. You can see when you click on a set featured image in any post type in wordpress a model box open and you just have to upload or select any images that model box is wordpress media box.
Follow the given steps for use wordpress meida box.
Steps : 1
Media box model uses javascript libray which is present in wordpress file you just have to include it in our project. So for call the modal box you first have to initilise all javascript api. So for this wordpress provide a function 'wp_enqueue_media();' . Use this function through any action hook like 'admin_enqueue_scripts' or you can directly call it our function file of wordpress.
Step : 2
After initilise javascript library you get access for wordpress media box model. After that give a id to the button and call our wp.media function at our button. For example :
<button id="mod-box"> Upload </button>
Calling javascript wp.media function
jQuery(function($){
frame = wp.media({
title: 'Select or Upload Media',
button: {
text: 'Use this media'
},
multiple: false
});
$("#mod-box").click(function(){
frame.open();
});
});
Step : 3
Now you called our wp media box. you just have to select the image or file and get its properties for save and retrieve. For example :
jQuery(function($){
frame = wp.media({
title: 'Select or Upload Media',
button: {
text: 'Use this media'
},
multiple: false
});
$("#mod-box").click(function(){
frame.open();
frame.on( 'select', function() {
var attachment = frame.state().get('selection').first().toJSON();
console.log(attachment);
});
});
});
Now you can check in our console of browser that how much proerties we get of our selected media now save that data in wordpress data base and retrieve the value at wordpress frontend.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Satyam Sharma
Satyam Sharma is a skilled full-stack developer, who loves to get new opportunities and learning about new technologies.