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.

About Author

Author Image
Satyam Sharma

Satyam Sharma is a skilled full-stack developer, who loves to get new opportunities and learning about new technologies.

Request for Proposal

Name is required

Comment is required

Sending message..