Enhance WordPress: TinyMCE Buttons & Shortcode Plugins

Automatically Create Media Buttons for Shortcode Selection

To automatically create media buttons for shortcode selection in WordPress, follow the steps below:

Step 1: Add the Button to TinyMCE Editor

Add the following PHP code to your theme’s functions.php file or a custom plugin:

function my_add_tinymce_button() {
    if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
        return;
    }
    if ( get_user_option( 'rich_editing' ) !== 'true' ) {
        return;
    }
    add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' );
    add_filter( 'mce_buttons', 'my_register_tinymce_button' );
}
add_action( 'init', 'my_add_tinymce_button' );

function my_register_tinymce_button( $buttons ) {
    array_push( $buttons, 'separator', 'my_shortcode_button' );
    return $buttons;
}

function my_add_tinymce_plugin( $plugin_array ) {
    $plugin_array['my_shortcode_button'] = get_template_directory_uri() . '/js/my-tinymce-button.js';
    return $plugin_array;
}

Step 2: Create the JavaScript for Button Action

Create a JavaScript file named my-tinymce-button.js in your theme’s js directory with the following content:

(function() {
    tinymce.create('tinymce.plugins.MyShortcodePlugin', {
        init : function(editor, url) {
            editor.addButton('my_shortcode_button', {
                title : 'Insert Shortcode',
                icon: 'icon dashicons-welcome-write-blog', // Use a Dashicon class or your custom icon here
                onclick : function() {
                    editor.windowManager.open({
                        title: 'Insert Shortcode',
                        body: [{
                            type: 'listbox',
                            name: 'shortcode',
                            label: 'Select Shortcode',
                            'values': [
                                {text: 'Shortcode 1', value: '[shortcode1]'},
                                ,
                                // Add more shortcodes here
                            ]
                        }],
                        onsubmit: function(e) {
                            editor.insertContent(e.data.shortcode);
                        }
                    });
                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add('my_shortcode_button', tinymce.plugins.MyShortcodePlugin);
})();

Step 3: Add the Necessary Styles or Icons

Ensure any custom icons or styles are properly defined and enqueued.

Step 4: Test Your New Button

After implementing the above steps, check the WordPress editor to see your new button in action.

This basic implementation can be extended with additional functionality based on your needs.

Learn WordPress Plugin with Tinymce Editor Beginners Tutorial (#1) Introduction about functionality

Related Videos: