WordPress hook in wp.media to add a new tab

To add a new tab to the WordPress media library modal window, you can use the wp.media JavaScript API and the wp.media.view.Settings view. Here’s an example of how to do it:

(function($){
  'use strict';
  $(document).ready(function(){
    
    var media = wp.media;

    media.view.Settings.CustomTab = media.view.Settings.extend({
      className: 'custom-settings',
      template: media.template('custom-tab-settings'),

      initialize: function() {
        media.view.Settings.prototype.initialize.apply(this, arguments);
      }
    });

    media.view.Modal.prototype.on('open', function(){
      if( this.content.get('customSettings') ) {
        this.content.set( 'customSettings', new media.view.Settings.CustomTab({model: this.content}), {silent: true} );
      }
    });

  });
})(jQuery);

1. First, create a new JavaScript file and enqueue it in your plugin or theme. This code should be added to a JavaScript file that is loaded on the admin side.

2. The code above adds a new view to the wp.media.view.Settings namespace called CustomTab. This view sets the className and template properties, which define the appearance and content of the new tab.

3. The initialize method calls the parent initialize method, which sets up the default behavior for the settings view.

4. In the media.view.Modal prototype, we listen to the open event, and check if the customSettings property exists. If it does, we set it to a new instance of the CustomTab view, passing in the current content model.

5. Finally, create a template with the content of the new tab. The template should be saved in a separate file and loaded in the same way as the JavaScript file above. Here’s an example template for the custom tab:

   <script type="text/html" id="tmpl-custom-tab-settings">
     
   <h2><?php esc_html_e( 'Custom Tab', 'textdomain' ); ?></h2>
   
     
   <p><?php esc_html_e( 'This is some custom content for the new tab.', 'textdomain' ); ?></p>
   </script>
   

This code adds a new tab to the media library modal window with the title “Custom Tab” and some example content. You can customize the appearance and content of the tab by modifying the className and template properties in the JavaScript code and the HTML template.