WordPress Logo

WordPress 3.5 brought with it a completely redesigned media manager. A long overdue update that looks great! You can find out more about that in my previous post What’s New In WordPress 3.5. The question is what does this new media manager mean for developers? Well firstly if you were hooking into the media manager previously in your plugin or theme then the good news is it should still work. However as I found out last week that updating to use the new media manager isn’t too much of a nightmare when I updated my very own Mojo Admin Toolbox.

First off props go to Thomas Griffin who posted a great example on GitHub of how to do this! Secondly I must admit I don’t fully understand everything but hey I’m not a Javascript Ninja, but I think I know what is going on!

So WordPress actually tries to make things a little easier for us….a little bit anyway. Introducing wp_enqueue_media. Now documentation on this function is extremely lacking but what we do know is this.

Enqueues all scripts, styles, settings, and templates necessary to use all media JS APIs.

So instead of having to enqueue the media-upload script and thickbox we can now call this one function and it gets everything ready for us. We now need to do some of our own code to hook into the media uploader and then pass our images information back to our page. Let’s take a look at a form field from my Mojo Admin Toolbox plugin:


<label>
<input name="mojoToolbox_options[login_logo]" type="text" value="<?php if ( isset( $this->options['login_logo'] ) ) echo $this->options['login_logo'];?>"/>
<input class="mojo-open-media button" type="button" value="<?php echo _e( 'Upload Image', 'mojo-toolbox' );?>" />
<span style="color:#666666;margin-left:2px;"><?php echo _e( 'The URL for your custom login page logo, (270px x 60px works well!)', 'mojo-toolbox' );?></span></label>

So what we want to do is launch the media manager when the button is pressed and then passback our data to the text field. We need to create our own Javascript file and enqueue that after the new wp_enqueue_media function is run.

We want to create a new Javascript function and inside it do a few different things. We need to set a couple of variables that we will be using later on then we need to create a function a bind it to our on click event. You can get much more information by going to Thomas Griffin’s GitHub example. Inside the on click event we do the following:

  1. Prevent the default actions from occurring.
  2. Set our Form Label variable using jQuery to get the parent element.
  3. Check to see if a frame already exists, if so we open a new one.
  4. We create a new media frame, there are variables we use to define what kind of media options we want. You can see in my code that I want a simple select option, that I don’t want to allow multiple selections and that finally we only want to deal with images.
  5. We next grab the selected image from the media manager and pull some data from it as a JSON object.
  6. Finally we use our previously set formlabel variable to pass back the image url to the correct field.

Make sense? Have a look at the code:


/**
 * Thanks to Thomas Griffin for his super useful example on Github
 *
 * https://github.com/thomasgriffin/New-Media-Image-Uploader
 */
jQuery(document).ready(function($){
 // Prepare the variable that holds our custom media manager.
 var mojo_media_frame;
 var formlabel = 0;

 // Bind to our click event in order to open up the new media experience.
 $(document.body).on('click.mojoOpenMediaManager', '.mojo-open-media', function(e){ //mojo-open-media is the class of our form button
 // Prevent the default action from occuring.
 e.preventDefault();
// Get our Parent element
formlabel = jQuery(this).parent();
 // If the frame already exists, re-open it.
 if ( mojo_media_frame ) {
 mojo_media_frame.open();
 return;
 }
 mojo_media_frame = wp.media.frames.mojo_media_frame = wp.media({

//Create our media frame
className: 'media-frame mojo-media-frame',
 frame: 'select', //Allow Select Only
 multiple: false, //Disallow Mulitple selections
 library: {
 type: 'image' //Only allow images
 },
 });
 mojo_media_frame.on('select', function(){
 // Grab our attachment selection and construct a JSON representation of the model.
 var media_attachment = mojo_media_frame.state().get('selection').first().toJSON();

// Send the attachment URL to our custom input field via jQuery.

 formlabel.find('input[type="text"]').val(media_attachment.url);
 });

// Now that everything has been set, let's open up the frame.
 mojo_media_frame.open();
 });
});

Now I wish I could explain a whole lot better, however it works for me and hopefully looking at this along side Thomas Griffins example and a great post by Mike Jolley on doing this you should be able to get head around all of this!

 

2 thoughts on “Using the New WordPress 3.5 Media Manager in your Plugin or Theme

  • Hi! I have a problem with dynamic HTML returns for on method like live(), so look:
    mojo_media_frame.on(‘select’, function(){…});
    is there alternative to make something like jQuery(document).on(‘select’, ‘.some_selector’, function(){…}); ?
    jQuery(document).on(‘select’, mojo_media_frame, function(){…}); dont works…

     Reply

    • I’m no expert on this, take a look at the other articles I linked to they might be able to help answer your questions.

       Reply

Leave a Reply

Mojowill Avatar

Who the Hell am I?

I'm Will, a full time web developer, geek and musician. I develop using PHP and MySQL and spend most of my time working with WordPress. When I'm not buried in code I'm gaming, cooking or writing and recording music in my studio. I like sci-fi, pancakes and coffee and am totally prepared for the zombie apocalypse...

Stalk me on these other sites...

Why not be super creepy and check me out on all these other sites, I think they call it social media?