php add custom button in wordpress editor

Step 1: Open your theme's functions.php file.

function custom_button_in_editor() {
    // Add your button code here
}
add_action('admin_init', 'custom_button_in_editor');

Step 2: Enqueue the script for the button.

function enqueue_button_script() {
    wp_enqueue_script('custom-button-script', get_template_directory_uri() . '/js/custom-button-script.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'enqueue_button_script');

Step 3: Create a JavaScript file for the button functionality (custom-button-script.js).

(function() {
    tinymce.create('tinymce.plugins.customButtonPlugin', {
        init : function(ed, url) {
            ed.addButton('customButton', {
                title : 'Custom Button',
                cmd : 'customButtonCommand',
                image : url + '/path/to/your/button-icon.png'
            });

            ed.addCommand('customButtonCommand', function() {
                // Add your button functionality here
                ed.execCommand('mceInsertContent', false, '[custom_button]');
            });
        }
    });

    tinymce.PluginManager.add('customButton', tinymce.plugins.customButtonPlugin);
})();

Step 4: Customize the button's appearance and functionality in the JavaScript file.

Step 5: Add styles for the button in your theme's style.css file.

.mce-i-customButton {
    background-image: url('/path/to/your/button-icon.png');
}

Step 6: Add a shortcode for the button's functionality in functions.php.

function custom_button_shortcode() {
    // Add your button's shortcode functionality here
    return 'Your button content';
}
add_shortcode('custom_button', 'custom_button_shortcode');