How to add multiple buttons to TinyMCE in WP? How to add multiple buttons to TinyMCE in WP? wordpress wordpress

How to add multiple buttons to TinyMCE in WP?


If i am understanding your question correctly you want to add to more buttons without having to make duplicates of the register_button($buttons) and add_plugin($plugin_array) functions?

I know this is an old question, but there is a way to do it without duplicating the functions.

Just go into your customcodes.js and in the init : function(ed, url) create new buttons just like you did the first one, so it would look as such:

init : function(ed, url) {               /* your original button */            ed.addButton('quote', {              title : 'Add a Quote',              image : url+'/image.png',              onclick : function() {                   ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]');             }          });             /* your second button */            ed.addButton('singlequote', {              title : 'Add a Single Quote',              image : url+'/image.png',              onclick : function() {                   ed.selection.setContent('[singlequote]' + ed.selection.getContent() + '[/singlequote]');             }          }); } 

And so forth, as many buttons as you require.

After that just head back to your register_button($buttons) function and update the array_push().

So whilst, when you had only one button to add it looked like this:

function register_button($buttons) {  array_push($buttons, "quote");  return $buttons;  }

Now that you created your new buttons this function would look like this.

function register_button($buttons) {  array_push($buttons, "quote", "singlequote");  return $buttons; }  

And so on, depending how many new buttons youve added.

You do not need to duplicate functions, or add new actions and filters to add new buttons to your tinyMCE.

You just create the new buttons inside your tinyMCE plug-in and list the names of the buttons youve created inside the array_push().

Perhaps you werent aware that array_push() accepts multiple push values. Here is its documentation on php.net


Modify the php at step 3 to push your second buttons :

//Step 3: Register Our Buttonfunction register_button($buttons) {     array_push($buttons, "BOUTON1");     array_push($buttons, "BOUTON2");     return $buttons;  }

Add a specific pass to that BOUTON2 :

//Step 4: Register Our TinyMCE Plugin    function add_plugin($plugin_array) {         $plugin_array['BOUTON1'] = '/yourpathtojs/bouton1.js';         $plugin_array['BOUTON2'] = '/yourpathtojs/bouton2.js';         return $plugin_array;      } 

Then you have distinct files for each, look on the use of PLUG1 and BOUTON1, its better that on nettuts because they dont made distinction with the term 'quote' :

bouton1.js :

(function() {      tinymce.create('tinymce.plugins.PLUG1', {          init : function(ed, url) {              ed.addButton('BOUTON1', {                  title : 'You', image : url+'/image.png',                  onclick : function() { ed.selection.setContent('[thumb from="youtube" code="'+ed.selection.getContent()+'"]'); }              });          },          createControl : function(n, cm) {              return null;          },      });      tinymce.PluginManager.add('BOUTON1', tinymce.plugins.PLUG1);  })();

bouton2.js :

(function() {          tinymce.create('tinymce.plugins.PLUG2', {              init : function(ed, url) {                  ed.addButton('BOUTON2', {                      title : 'Vim', image : url+'/image.png',                      onclick : function() { ed.selection.setContent('[thumb from="vimeo" code="'+ed.selection.getContent()+'"]'); }                  });              },              createControl : function(n, cm) {                  return null;              },          });          tinymce.PluginManager.add('BOUTON2', tinymce.plugins.PLUG2);      })();


Apart from maybe adding the extra button code inside your already existing functions, I don't think there's a way to do what you're trying.

Unfortunately, that's the code to add a button, so if you want to add another button you've got to add the code again.

If the buttons you wanted to add were similar in almost every way, you could maybe get away with doing a foreach {} followed by a switch(){case '':} where you feed the data through but unless all your buttons do the same thing this seems a bit redundant.

If all you're trying to do is keep your function.php file tidy then I suggest putting each button in a separate .php file named the same as the main function, in a folder called inc or includes inside your template, then include them like so:

$temp_path = 'http//www.yourdomain.com/wp-content/theme/yourtheme/includes/';include $temp_path.'file1.php';include $temp_path.'file2.php';

I'm using a temp_path variable because for some reason bloginfo() and get_bloginfo() just don't seem to work in the functions file.

On a side note, even though it's just for personal use, try to use much more unique function names, quote could be anything, tinymce_quote_button that's definitely what it is. This avoids potential function name clashes later.