WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

i have the following method to insert a button in Tinymce editor:

in funcitons.php:

class myclaff 
        function __construct() {
        add_action( 'admin_init', array($this, 'load_tinymceee') );

        function load_tinymceee() {  
           if ( current_user_can( 'edit_posts' ) &&  current_user_can( 'edit_pages' ) ) { 
            //i have done as one plugin has only 1 button

            add_filter('mce_external_plugins', array($this, 'add_myplugin_first'));
            add_filter('mce_buttons_3', array($this,'register_mybutton_first') );

            add_filter('mce_external_plugins', array($this, 'add_myplugin_second'));            
            add_filter('mce_buttons_3', array($this,'register_mybutton_second') ); 
        //register first plugin,
        function register_mybutton_first($buttons) {  
           array_push($buttons, '|', "UniqueButtonName1" );  
           return $buttons; 
        function add_myplugin_first($plugin_array) {  
           $plugin_array['firstplugin'] = plugins_url('mypluginfolder/js/mybutton1.php');
                                  //or  plugin_dir_url( __FILE__ ) . 'js/mybutton1.php';
           return $plugin_array; 

        //register second plugin,
        function register_mybutton_second($buttons) {  
           array_push($buttons, '-',  "UniqueButtonName2" );  
           return $buttons;  
        function add_myplugin_second($plugin_array) {  
            $plugin_array['secondplugin'] = plugins_url('mypluginfolder/js/mybutton2.php');
           return $plugin_array;  

    } // class ends

//load class
$blablaa = new myclaff();

then inside "mypluginfolder/js/" i have such mybutton1.php (and mybutton2.php, with the similar code)

(i know that i need to enter the correct url of my tinymce button's image) :

header("Content-type: application/x-javascript");
define('WP_USE_THEMES', false);
(function() {
    // START my customs
    tinymce.create('tinymce.plugins.firstplugin', { 

    init : function(ed, url)

       // ---------- start adding buttons section---------------
        ed.addButton('UniqueButtonName1', {  
            title : 'the title of the button',  
            image : url+'/images/mybuttonimage.png',  
            onclick : function() 
                    // here starts the output
                txt1 : //just a txt1 labeled block of code
                var mynam = prompt("<?php echo "Please type your name";?>", "Something Default Name"); 
                ed.selection.setContent('<center>' + mynam + '</center>'); 

    // end of the buttons section
        createControl : function(n, cm) {  
            return null;  
    tinymce.PluginManager.add('firstplugin', tinymce.plugins.firstplugin);  

But when i click on button, i get only javascript popup box, where i can enter only one field. what is the code, to achieve to have multiple fields, boxes, dropdown menus and etc.. after the button click?

share|improve this question

Your code is complex... Here is simplest BUTTON adding function in TinyMCE:

i am successfully using following method to add button in tinyMCE (in funcitons.php):

add_action('admin_init', 'add_cb_button');function add_cb_button() {
   if (current_user_can('edit_posts')  &&  get_user_option('rich_editing') == 'true') {
        add_filter('mce_buttons_2', 'register_buttonfirst');
        add_filter('mce_external_plugins', 'add_pluginfirst');
function register_buttonfirst($buttons) {  array_push($buttons, "|", "shortcode_button1" );   return $buttons;}
function add_pluginfirst($plugin_array) {$plugin_array['MyPuginButtonTag'] =  plugin_dir_url( __FILE__ ).'My_js_folder/1_button.php';return $plugin_array;}
add_filter( 'tiny_mce_version', 'my_refresh_mceeee1');  function my_refresh_mceeee1($ver) {$ver += 3;return $ver;}

2) Create 1_button.php in target folder and insert this code (note, change "wp-load" and "ButtonImage.png" urls!!!)

header("Content-type: application/javascript");
(function() {
    // START my customs
    var abcd =location.host;

    tinymce.create('tinymce.plugins.shortcodebuton_plugin2', {  
        init            : function(ed, this_folder_url)
                    // -------------------------
                    ed.addButton('shortcode_button1', {  
                        title : 'Show Level1 count',  
                        image : this_folder_url + '/ButtonImage.png',
                        onclick : function() {  
                            var vidId = prompt("YouTube Video", "BLABLABLA");
                            ed.selection.setContent(vidId );  
                            //ed.execCommand('mceInsertContent', false, 'vidId');


        createControl   : function(n, cm) {     return null;  }, 
    tinymce.PluginManager.add('MyPuginButtonTag', tinymce.plugins.shortcodebuton_plugin2);  

just, you should better to make several Javascript PROMPTS (in TITLES, include hints too)...

p.s. if you really want CUSTOM HTML popup, see this: http://pastebin.com/raw/0BJZm7cd

share|improve this answer
Please use only one account. You can answer your own question without a second account. – toscho Apr 9 '13 at 9:38

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.