Shiba

Adventures in WordPress

  • — Home —
  • Dog
  • Art
  • Contact
  • WordPress Articles
    • WP Plugins
    • WP Programming
    • WP Admin Panels
    • WP Theme Design
    • WP How-To
    • WP Theme Images
You are here: Home / WordPress Programming / How to Add the WordPress 3.5 Media Manager Interface

How to Add the WordPress 3.5 Media Manager Interface

Tweet

by ShibaShake 12 Comments

One of the really cool updates for WordPress 3.5 is the new media manager interface. In addition to using this interface for uploading images, creating galleries, and inserting media into posts, it is also useful for a variety of other operations, for example adding featured images, picking theme header images, and more.

As such the Media Manager can also be very useful for customized administrative operations in our blog. Here, we explore how we can add the media manager interface to our own plugin or theme.

How to Add the WordPress 3.5 Media Upload Interface
How to Add the WordPress 3.5 Media Upload Interface

1. Add Relevant Javascript

The previous media manager uses thickbox and was a lot more complicated to add. The new WordPress 3.5 media manager only requires two calls to include all of the relevant javascript operations.

// Include in admin_enqueue_scripts action hook
wp_enqueue_media();
wp_enqueue_script( 'custom-header' );

The wp_enqueue_media function call does most of the work for us. It sets up all the relevant settings, localizes menu text, and loads in all the appropriate javascript files.

The custom-header script creates an image selection frame, and ties it to an interface element, for example a button or link. It then calls a url or our choice with the selected image id. This is the same script that is used when selecting theme custom header images.

2. Add the Media Manager Button or Link

Now, all we need to do is add in a button or link to activate the media manager popup window.

<?php
$modal_update_href = esc_url( add_query_arg( array(
	'page' => 'shiba_gallery',
	'_wpnonce' => wp_create_nonce('shiba_gallery_options'),
), admin_url('upload.php') ) );
?>
        
<p>
<a id="choose-from-library-link" href="#"
	data-update-link="<?php echo esc_attr( $modal_update_href ); ?>"
	data-choose="<?php esc_attr_e( 'Choose a Default Image' ); ?>"
	data-update="<?php esc_attr_e( 'Set as default image' ); ?>"><?php _e( 'Set default image' ); ?>
</a> |
</p>
Set default image interface for the Shiba Gallery plugin.
Set default image interface for the Shiba Gallery plugin.

Line 9 – Our button or link id must be set to ‘choose-from-library-link’. This is the id that is looked for in the custom-header javascript file.

Line 10 – The data-update-link attribute contains the url we want to call with the selected image id. This is usually the url of the page that contains our media manager button.

Line 11 – The data-choose attribute contains the title of the image selection menu.

Line 12 – The data-update attribute contains the name of the image selection button.

For example, we have used the code above to add a Set default image link to our Shiba Gallery plugin options page (shown on the right). Clicking the link will open up the media manager interface shown below.

Note that the title of the frame (‘Choose a Default Image’) is passed through from the data-choose attribute and the name of the button (‘Set as default image’) is passed through from the data-update attribute.

Media manager interface for selecting a default gallery image.
Media manager interface for selecting a default gallery image.

3. Define Action Function

Finally, we need to add in some code for processing the image id that we will pass to our data-update-link url.

// Add to the top of our data-update-link page
if (isset($_REQUEST['file'])) {	
	check_admin_referer("shiba_gallery_options");

        // Process and save the image id
	$options = get_option('shiba_gallery_options', TRUE);
	$options['default_image'] = absint($_REQUEST['file']);
	update_option('shiba_gallery_options', $options);
}

Line 2 – The image id gets passed in through using the ‘file’ attribute, in the destination url. Here, we check if it is set.

Line 3 – Do a security check here based on the ‘_wpnonce’ attribute that we added earlier to our destination url.

Lines 5 to 8 – Save the selected image id as our default gallery image.

And that is it! We have included the new WordPress media manager interface into our own plugin.

Related Articles

How to Add the WordPress 3.5 Media Manager Interface - Part 2

How to make some simple customization to the WordPress 3.5 media manager interface.

How to Hook into the Media Upload Popup Interface

What is the media upload popup interface? That is simply the popup window that appears when we click on the Add Media button (for adding images and video) while in the Edit Post screen. The same interface is also currently being used for - Setting featured images in posts, and Setting header images in a theme. It can also be very useful in a plugin. For example, my Shiba Gallery plugin uses the Media Upload Interface to assign a default picture for posts and pages that do not have [...]

Expand the WordPress Media Library Admin Panel

How to add options to the WordPress Media Library panel. This tutorial was written based on WordPress 2.8. The same concepts will apply to WordPress 2.9, but some alterations are may be needed for handling new media actions.

Comments

  1. zach says

    February 1, 2016 at 1:37 pm

    i am getting “You do not have sufficient permissions to access this page.” when I hit submit. Any advice?

    Reply
  2. John D says

    July 17, 2015 at 9:22 am

    How would you program the ‘Unset Default Image’ action ?

    Thanks,
    John

    Reply
  3. Zach says

    September 6, 2014 at 10:00 am

    Great tutorial. I want to eventually add a gallery to a page and I see you handle that in part two. I have seem to become stopped though, as when I actually select an image for upload the page refreshes and goes to “You do not have sufficient permissions to access this page.”

    What could I be missing? I’m using WP4 but I hope that isn’t the issue!

    Reply
  4. Juan says

    February 21, 2014 at 12:08 am

    Do you know how to display the “filter” select in the media manager window? I’ve tried with filterable: ‘all’ (and other values) but it dosen’t work.

    Reply
  5. diego says

    September 14, 2013 at 3:29 am

    Hi, thanks for the guide, any suggestion about how to add multiple images instead on just one?

    Reply
    • ShibaShake says

      September 15, 2013 at 3:32 pm

      I talk about that in part2
      http://shibashake.com/wordpress-theme/how-to-add-the-wordpress-3-5-media-manager-interface-part-2

      Reply
  6. Adam says

    March 7, 2013 at 6:07 am

    Hi there
    Do you know how I can add this functionality multiple times on a single page? Im making a custom settings page and want a few pre-defined image selectors like the one in the demo here.

    Reply
    • ShibaShake says

      March 7, 2013 at 10:23 am

      I did this on one of my themes by tying the “click” action to a class rather than an id. Then I can just have multiple buttons tied to that class.

      Reply
      • mcela says

        April 16, 2013 at 2:23 pm

        Would it be possible for you to show an example of that? I’ve been fighting with this for days now and just can’t get it to work.
        The script I’m using is made by Thomas Griffin – github.com/thomasgriffin/New-Media-Image-Uploader

        Reply
        • mcela says

          April 17, 2013 at 12:06 pm

          Nevermind, got it to work!

          Reply
  7. Brad Zimmerman says

    January 24, 2013 at 7:29 am

    Thanks for the post, however i am a bit confused on where i am adding this in my plugin. My end goal is to add a image selection to custom taxonomy, for my custom post type. So i have taxonomy featured images. Any direction you can give would be great!

    Reply
    • ShibaShake says

      January 26, 2013 at 10:24 am

      I add the enqueue_scripts function calls using the admin_enqueue_scripts action hook.

      I add the HTML code on the page where I want the Media Manager button to appear.

      I add the action function at the top of the same page as my Media Manager button.

      Reply

Leave a Reply Cancel reply

Your email address will not be published.

Recent Posts

  • Screen-shot of mobile responsive Poll Daddy object, where text floats properly to the right of radio buttons.How to Make Poll Daddy Objects Mobile Responsive
  • Screen-shot of blog post with no page border (flowing design).Genesis Skins 1.5
  • Screen-shot of the media manager Create-Gallery screen, while doing a post search.Shiba Media Library 3.7
  • Screenshot of the Edit Gallery screen after we hit the Create Gallery button.How to Expand the WordPress Media Manager Interface
  • Blonde girl looking through and holding a circular picture frame.Shiba Gallery 4.3
  • Close-up of beautiful blonde holding a square picture frame.Google Authorship - Good or Bad for Search Traffic?
  • Shiba Widgets 2.0
  • Media Temple screenshot of editing my sub-domain DNS entry.Using CDN Cnames with w3tc and MultiSite
  • Shiba Skins WordPress ThemeShiba Skins WordPress Theme
  • How to add the Media Manager Menu to the Theme Preview InterfaceHow to Add the Media Manager Menu to the Theme Preview Interface

Recent Comments

  • WordPress Search Widget – How to Style It (56)
    • Nelson
      - Tanks master - Fine
    • TelFiRE
      - How do you style the "X" that shows up when you start typing?
  • Update custom inputs with the proper data using Javascript.Expand the WordPress Quick Edit Menu (58)
    • Mike G
      - This is exactly what is happening to me. It is updating the value in the database and in the column, but I have to refresh ...
    • PhoenixJP
      - Thanks for this tutorial. Does someone knows if this still work with wordpress 5.03 and 5.1.
    • Francine Carrel
      - This is a very long time away from your original comment, but did you ever work it out? I am stuck on the exact same thing ...
  • Custom meta-box with a set of radio-buttons.Add a Metabox to Your Custom Post Type Screen (27)
    • mike
      - Hi Shiba am a newbie to wordpress, I just installed a plugin with a custom post type, but has no option for discussion and ...
  • Write a Plugin for WordPress Multi-Site (45)
    • Andrew
      - Hi,action 'wpmu_new_blog' has been deprecated. Use ‘wp_insert_site’ instead.
  • Populate our Edit Gallery menu using a gallery shortcode.How to Add the WordPress 3.5 Media Manager Interface – Part 2 (29)
    • Janine
      - Still relevant in 2019.
  • WordPress Excerpt – How to Style It (36)
    • James
      - Great post. I really need some help. I have set border lines around my excerpts on my blog page/post page. The problem is ...
  • Add Custom Taxonomy Tags to Your WordPress Permalinks (123)
    • Darshan Saroya
      - Update permalinks. Go to settings > permalink and just save it.

Copyright © 2021 · Genesis Skins by ShibaShake · Terms of Service · Privacy Policy ·