Adding a Media Button to the WordPress Content Editor

According to what you have posted, the action “wp_enqueue_media” is missing for the function “include_media_button_js_file”. In this case, the JavaScript file “media_button.js” would never be loaded.

By the way, the function “wp.media” opens the media dialog for uploading or selecting images. However, you cannot enter any text in this dialog.

Maybe the following example will help you.

Note: I used WordPress version 5.9.2 with the “Classic Editor” plugin (version: 1.6.2). I used jQuery UI to display the dialog. jQuery UI is one of the libraries that comes with WordPress.

1. Add the JS and CSS files to the admin area. The import part is to add “jquery-ui-dialogi” as dependency and load the related CSS files.

    function my_plugin_include_media_button_js_file() {
   
      // include file only in admin area
      if( is_admin() ){
   
        // JS
        wp_enqueue_script(
            'my_plugin_media_button', // handle
            plugin_dir_url( __FILE__ ) . '/assets/js/media_button.js',// source
            array('jquery-ui-dialog' ),   // dependencies
            fileatime( plugin_dir_path(__FILE__) . '/assets/js/media_button.js'  ) // version
        );
   
        // CSS
        wp_enqueue_style (  'wp-jquery-ui-dialog');
   
      }
   
    }
    add_action('wp_enqueue_media', 'my_plugin_include_media_button_js_file');
   

2. jQuery UI uses HTML to display the dialog. The HTML code is only needed when the dialog is displayed. For this reason, the code is written to the footer.

    function my_plugin_dialog_template() {
   
       // template for the dialog
       $dialog = '<div id="my-plugin-url-dialog" class="hidden" >';
   
       $dialog .= '<input type="url" 
                    placeholder="https://www.youtube.com/"
                    name="my-plugin-url-dialog-input" 
                    id="my-plugin-url-dialog-input" />';
   
      $dialog .= '</div>';
   
      echo $dialog;
    }
    add_action('admin_footer', 'my_plugin_dialog_template');
   

3. Add the button to the editor

    function my_plugin_add_my_media_button() {
   
       echo '<a href="#" id="my-plugin-btn" class="button">Add Url</a>';
    }
    add_action('media_buttons', 'my_plugin_add_my_media_button', 25);
   

4. The dialog is displayed by using JavaScript. The button “Add Url” open the dialog. By pressing the “Add” button, the content from the input field is transferred to the editor. (the code shows the whole file “media_button.js”)

    jQuery(function($) {
   
    $(document).ready(function(){
   
        // creation of the dialog
        $('#my-plugin-url-dialog').dialog({
            title: 'Enter your URL',
            autoOpen: false,
            draggable: false,
            width: 'auto',
            modal: true,
            resizable: false,
            closeOnEscape: true,
            buttons: {
                "Add": function() {
   
                    // takes the content from the input field and "creates" the shortcode
                    let str="[myshortcode]" + $('#my-plugin-url-dialog-input').val() +'[/myshortcode]';
   
                    // insert text in editor
                    wp.media.editor.insert(str);
   
                    // close dialogue
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
   
        // click-handler for the "Add Url" button
        $('#my-plugin-btn').click(function (){
   
            // empty input field
            $('#my-plugin-url-dialog-input').val('');
   
            // open dialog
            $('#my-plugin-url-dialog').dialog('open');
        });
   
    });
   
    });
   

Added button “Add Url”:

Dialog to enter the URL: