Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$5
Add shortcode via TinyMCE button

Hi,

Does anybody know how to add a shortcode via a TinyMCE button. I want it to add the shortcode [super-form] straight away without any options.

Cheers,
Steve

This question has been answered.

Steven Jones | 01/24/12 at 5:46am Edit

Previous versions of this question: 01/24/12 at 5:49am

(6) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

Last edited:
01/24/12
5:49am
Julio Potier says:
Hello

look at that question :
http://wpquestions.com/question/showLoggedIn/id/3769

See you
- 01/24/12 5:52am
  
  Steven Jones says:
  Hi Julio,
  
  I want the specific code in which to do it, that's why I'm using this site rather than the WordPress forums.
  
  Steve
Last edited:
01/24/12
5:51am
Clifford P says:
http://wordpress.org/extend/plugins/post-snippets/
Last edited:
01/24/12
5:51am
Arnav Joy says:
check this link

http://www.tutorialchip.com/wordpress/wordpress-shortcode-tinymce-button-tutorial-part-2/
- 01/24/12 5:53am
  
  Steven Jones says:
  Can you provide the working code for my question please?
- 01/24/12 5:59am
  
  Arnav Joy says:
  open functions.php
  
  add
  
  add_action('init', 'super_form_button');
  
  function super_form_button() {
  
  if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
  return;
  }
  
  if ( get_user_option('rich_editing') == 'true' ) {
  add_filter( 'mce_external_plugins', 'add_plugin' );
  add_filter( 'mce_buttons', 'register_button' );
  }
  
  }
  
  function register_button( $buttons ) {
  array_push( $buttons, "|", "super-form" );
  return $buttons;
  }
  
  function add_plugin( $plugin_array ) {
  $plugin_array['super-form'] = get_bloginfo( 'template_url' ) . '/script/super_form.js';
  return $plugin_array;
  }
  
  create a js file super_form.js and place it in script folder under your theme
  paste following code in the js file
  
  (function() {
  tinymce.create('tinymce.plugins.super_form', {
  init : function(ed, url) {
  ed.addButton('super_form', {
  title : 'Super Form',
  image : url+'/super_form.png',
  onclick : function() {
  ed.selection.setContent('[super_form]' + ed.selection.getContent() + '[/super_form]');
  
  }
  });
  },
  createControl : function(n, cm) {
  return null;
  },
  });
  tinymce.PluginManager.add('super_form', tinymce.plugins.super_form);
  })();
- 01/24/12 6:16am
  
  Arnav Joy says:
  place the image in the script folder and named as super_form.png
  
  this is the updated script
  
  open functions.php
  
  add
  
  add_action('init', 'super-form-button');
  
  function super-form-button() {
  
  if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
  return;
  }
  
  if ( get_user_option('rich_editing') == 'true' ) {
  add_filter( 'mce_external_plugins', 'add_plugin' );
  add_filter( 'mce_buttons', 'register_button' );
  }
  
  }
  
  function register_button( $buttons ) {
  array_push( $buttons, "|", "super-form" );
  return $buttons;
  }
  
  function add_plugin( $plugin_array ) {
  $plugin_array['super-form'] = get_bloginfo( 'template_url' ) . '/script/super-form.js';
  return $plugin_array;
  }
  
  create a js file super-form.js and place it in script folder under your theme
  paste following code in the js file
  
  (function() {
  tinymce.create('tinymce.plugins.super-form', {
  init : function(ed, url) {
  ed.addButton('super-form', {
  title : 'Super Form',
  image : url+'/super-form.png',
  onclick : function() {
  ed.selection.setContent('[super-form]' + ed.selection.getContent() + '[/super-form]');
  
  }
  });
  },
  createControl : function(n, cm) {
  return null;
  },
  });
  tinymce.PluginManager.add('super_form', tinymce.plugins.super-form);
  })();
Last edited:
01/24/12
5:55am
Navjot Singh says:
You can use either Shortcodes Pro or TinyMCE Generic WP Shortcode Editor plugins for this.

Previous versions of this answer: 01/24/12 at 5:55am

Last edited:
01/24/12
6:00am

Sébastien | French WordpressDesigner says:

    

add_shortcode('super-form', 'super-form');  

function super-form(){

return 'here your form'; }

replace 'here your frm' by the code of your form (i suppose the shortcode will be replace by a form)

and to add the button

add_action('init', 'add_button');



    function register_button($buttons) {  

       array_push($buttons, "quote");  

       return $buttons;  

    }  



    function add_button() {  

       if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )  

       {  

         add_filter('mce_external_plugins', 'add_plugin');  

         add_filter('mce_buttons', 'register_button');  

       }  

    }  



    function register_button($buttons) {  

       array_push($buttons, "super-form");  

       return $buttons;  

    }    



    function add_plugin($plugin_array) {  

       $plugin_array['super-form'] = get_bloginfo('template_url').'/js/customcodes.js';  

       return $plugin_array;  

    }

and create a file customcodes.js with this code



    (function() {  

        tinymce.create('tinymce.plugins.super-form', {  

            init : function(ed, url) {  

                ed.addButton('super-form', {  

                    title : 'Add a super-form',  

                    image : url+'/image.png',  

                    onclick : function() {  

                         ed.selection.setContent('[super-form]');  

      

                    }  

                });  

            },  

            createControl : function(n, cm) {  

                return null;  

            },  

        });  

        tinymce.PluginManager.add('super-form', tinymce.plugins.super-form);  

    })();

this files goes into the theme folder, in a folder "js"
in this file image : url+'/image.png', is the url of the icon of your button

Previous versions of this answer: 01/24/12 at 5:57am | 01/24/12 at 5:58am | 01/24/12 at 6:00am

01/24/12 5:55am

Steven Jones says:
Please read the question - this will not do anything with TinyMCE
01/24/12 5:59am

Sébastien | French WordpressDesigner says:
please red my answer, i have edit it :-)
01/24/12 6:00am

Sébastien | French WordpressDesigner says:
this code add a buttton in your tinymce
when you click on it, it add this code : [super-form]
01/24/12 6:12am

Sébastien | French WordpressDesigner says:
Christianto says :
Sébastien code above will work, please check his answer..

@Christianto : so, you are a rockstar AND a gentleman !

Last edited:
01/24/12
5:55am
Christianto says:
Hi,

there is no simple way, you have to understand javascript
Please see my answer here..

Edit, julio is right.. :)
that is the simplest ways..

Previous versions of this answer: 01/24/12 at 5:55am
- 01/24/12 5:55am
  
  Steven Jones says:
  Hi Christianto,
  
  Can you refactor your code to make it work for my solution please?
- 01/24/12 5:58am
  
  Christianto says:
  Thats only button that print certain shortcode right?
  Since you are looking for the simplest solution you can use plugin that mention above by Navjot Singh.
  
  Or you don't want to use plugin?
- 01/24/12 5:59am
  
  Steven Jones says:
  This is part of a plugin - so I need your code please.
- 01/24/12 6:01am
  
  Christianto says:
  Sébastien code above will work, please check his answer..

This question has expired.

Gabriel Reguly, Francisco Javier Carazo Gil voted on this question.

Current status of this question: Completed

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

Ask your WordPress questions! Pay money and get answers fast! (more info)

$5 Add shortcode via TinyMCE button

(6) Possible Answers Submitted...

$5
Add shortcode via TinyMCE button