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

  • Add a screen shot of the result you want to get. It is not clear what you want.
    – fuxia
    Nov 13, 2012 at 4:13
  • I think you want to create a plugin that adds a TinyMCE button to the editor that inserts a WordPress shortcode, right? Nov 13, 2012 at 4:40

2 Answers 2


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')

      //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]';
                        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);
  • 2
    In step 1, changing the init hook to the admin_init hook could also save some slight extra processing on the front-end.
    – Tim Malone
    Nov 16, 2016 at 2:01
  • It depends, you can have TinyMCE on the front-end too. But yes, if this is admin-side only, admin_init would be preferable. Nov 17, 2016 at 10:19
  • So shortcode.js needs to be placed here wp-includes/js/tinymce/js/shortcode.js and also button has no icon
    – Jadeye
    Aug 8, 2020 at 20:03

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.

  • 4
    Uses query_posts so maybe not the best example to link to. Jul 11, 2014 at 14:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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