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');