I've tried the solution from this(Add Custom Button to TinyMCE in WordPress) link, but it didn't work for me i had Added script to admin footer. <?php function my_admin_footer_function() { ?> <script> (function() { tinymce.init({ selector: "#mytextarea", toolbar: "myCustomButton", setup: function(editor) { editor.ui.registry.addButton("myCustomButton", { text: "Starter Template", icon: "plus", onAction: function() { const divContent = `<div class="custom-div"> <h1>Add your heading</h1> <p>Add your paragraph</p> <p>Add your paragraph</p> <p>Add your paragraph</p> <ul> <li>Add Item 1</li> <li>Add Item 2</li> <li>Add Item 3</li> </ul> </div>`; editor.insertContent(divContent); }, }); }, }); }); </script> <?php } add_action('admin_footer', 'my_admin_footer_function'); add_action('admin_init', 'custom_tinymce_button'); function custom_tinymce_button() { add_filter('mce_buttons', 'register_custom_button'); }
Jese Leos
August 30, 2024
Verified user
You done well but you need to add filter for mce_external_plugins as well. function.php Note - We have not used admin_footer here. We registered new script for "CMS add_action('admin_init', 'custom_tinymce_button'); function custom_tinymce_button() { add_filter('mce_external_plugins', 'add_custom_tinymce_plugin'); add_filter('mce_buttons', 'register_custom_button'); } function add_custom_tinymce_plugin($plugin_array) { $plugins['custom_button'] = get_template_directory_uri() . '/js/custom-button.js'; return $plugin_array; } function register_custom_button($buttons) { array_push($buttons, 'custom_button'); return $buttons; } custom-button.js You can update how you want it appear. You could add custom classes and apply css on it. icon.png - You need to add icon file in your theme this will show to custom button. (function () { tinymce.create("tinymce.plugins.custom_button_plugin", { init: function (ed, url) { ed.addButton("custom_button", { title: "Starter Template", image: url + "/images/icon.png", //Optional onclick: function () { ed.insertContent(` <div contenteditable='false' class="custom-div"> <h1 contenteditable='true'>Add your heading</h1> <p contenteditable='true'>Add your paragraph</p> <p contenteditable='true'>Add your paragraph</p> <p contenteditable='true'>Add your paragraph</p> <ul> <li contenteditable='true'>Add Item 1</li> <li contenteditable='true'>Add Item 2</li> <li contenteditable='true'>Add Item 3</li> </ul> </div> `); }, }); }, createControl: function (n, cm) { return null; }, }); tinymce.PluginManager.add( "custom_button", tinymce.plugins.custom_button_plugin ); })(); Output