Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

How to make any plugin icon in wordpress post? The code I want to insert in plugin code and will appear in post bar [wp-admin/post.php].

Like this image:

enter image description here

Output: If I click the icon it automatically writes [plugin] to the post content like this:

enter image description here

share|improve this question
    
Add a screen shot of the result you want to get. It is not clear what you want. –  toscho Nov 13 '12 at 4:13
1  
@toscho : i already update. Thank you –  Juan Lie Nov 13 '12 at 4:33
    
I think you want to create a plugin that adds a TinyMCE button to the editor that inserts a WordPress shortcode, right? –  developdaly Nov 13 '12 at 4:40

2 Answers 2

up vote 24 down vote accepted

To add our button to the TinyMCE editor we need to do several things:

  1. Add our button to the toolbar
  2. Register a TinyMCE plugin
  3. Create that TinyMCE plug-in which tells TinyMCE what to do when our button is clicked.

Steps #1 and #2

In these steps we register our TinyMCE plug-in which will live inside a javascript file at 'path/to/shortcode.js' (see wpse72394_register_tinymce_plugin() below)

 // init process for registering our button
 add_action('init', 'wpse72394_shortcode_button_init');
 function wpse72394_shortcode_button_init() {

      //Abort early if the user will never see TinyMCE
      if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
           return;

      //Add a callback to regiser our tinymce plugin   
      add_filter("mce_external_plugins", "wpse72394_register_tinymce_plugin"); 

      // Add a callback to add our button to the TinyMCE toolbar
      add_filter('mce_buttons', 'wpse72394_add_tinymce_button');
}


//This callback registers our plug-in
function wpse72394_register_tinymce_plugin($plugin_array) {
    $plugin_array['wpse72394_button'] = 'path/to/shortcode.js';
    return $plugin_array;
}

//This callback adds our button to the toolbar
function wpse72394_add_tinymce_button($buttons) {
            //Add the button ID to the $button array
    $buttons[] = "wpse72394_button";
    return $buttons;
}

Step #3

Now we need to create our TinyMCE plug-in. This will go in a file 'path/to/shortcode.js' (as specified in the early steps).

jQuery(document).ready(function($) {

    tinymce.create('tinymce.plugins.wpse72394_plugin', {
        init : function(ed, url) {
                // Register command for when button is clicked
                ed.addCommand('wpse72394_insert_shortcode', function() {
                    selected = tinyMCE.activeEditor.selection.getContent();

                    if( selected ){
                        //If text is selected when button is clicked
                        //Wrap shortcode around it.
                        content =  '[shortcode]'+selected+'[/shortcode]';
                    }else{
                        content =  '[shortcode]';
                    }

                    tinymce.execCommand('mceInsertContent', false, content);
                });

            // Register buttons - trigger above command when clicked
            ed.addButton('wpse72394_button', {title : 'Insert shortcode', cmd : 'wpse72394_insert_shortcode', image: url + '/path/to/image.png' });
        },   
    });

    // Register our TinyMCE plugin
    // first parameter is the button ID1
    // second parameter must match the first parameter of the tinymce.create() function above
    tinymce.PluginManager.add('wpse72394_button', tinymce.plugins.wpse72394_plugin);
});
share|improve this answer
1  
great answer... thank you @Stephen... –  Juan Lie Nov 13 '12 at 17:46
    
Not enough upvotes for your answer Stephen –  Little Big Bot Mar 11 at 1:34

There's too much to put the whole answer here so checkout this guide: http://wp.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/

You have to create a Javascript file that takes action from the button you register through WordPress that inserts the TinyMCE button into the editor.

share|improve this answer
    
Uses query_posts so maybe not the best example to link to. –  Brad Dalton Jul 11 at 14:27

Your Answer

 
discard

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.