Create special button on WP Tiny MCE Posts Editor for Shortcodes

Question

Your functions have nothing to do with each other. Is all you want a button that when clicked adds [tooltips class="top_tooltip" title="Your Tooltip here"] Text here [/tooltip] to the editor?

— This is currently what your doing —

First Function: function tooltip( $button ) is adding your tooltip shortcode

Second Function: mce_tooltip( $button ) is adding the superscript button to the editor toolbar

Third Function: mce_tooltip( $init_array ) is a function to add styles to the styles format dropdown editor toolbar menu. However, it wont do anything because the array isn’t producing anything.

Aside from the fact that the Second Function and the Third Function don’t have anything to do with adding your shortcode to th editor, it’s most likely doing anything or causing errors as well.

You can’t have too functions with the same name. You’re using mce_tooltip() twice:

This won’t work :

function mce_tooltip( $button ) {
// some code here
}
add_filter('mce_buttons_2', 'mce_tooltip');


function mce_tooltip( $init_array ) {
// some code here
}
add_filter( 'tiny_mce_before_init', 'mce_tooltip' );

While this would:

function mce_tooltip( $button ) {
// some code here
}
add_filter('mce_buttons_2', 'mce_tooltip');


function mce_tooltip( $init_array ) {
// some code here
}
add_filter( 'tiny_mce_before_init', 'mce_tooltip' );

Delete what you currently have and add this instead to add a custom button:

add_action('admin_head', 'add_my_shortcode_tooltip_button');

function add_my_shortcode_tooltip_button() {
    global $typenow;
    if ( !current_user_can('edit_posts') && !current_user_can('edit_pages') ) {
        return;
    }
    if( ! in_array( $typenow, array( 'post', 'page' ) ) )
        return;
    if ( get_user_option('rich_editing') == 'true') {
        add_filter('mce_external_plugins', 'my_theme_tooltip_add_tinymce_plugin');
        add_filter('mce_buttons', 'my_theme_tooltip_register_tinymce_plugin');
    }
}

function my_theme_tooltip_add_tinymce_plugin($plugin_array) {
    $plugin_array['ttip_shortcode_button'] = get_stylesheet_directory_uri() . '/js/editor-tooltip-button.js'; 
    return $plugin_array;
}

function my_theme_tooltip_register_tinymce_plugin($buttons) {
   array_push($buttons, "ttip_shortcode_button");
   return $buttons;
}

Then to build the button itself create a javascript file at the following location:

wp-content/themes/my-theme/js/editor-tooltip-button.js

Inside the file add this code:

(function() {
    tinymce.PluginManager.add('ttip_shortcode_button', function( editor, url ) {
        editor.addButton( 'ttip_shortcode_button', {
            text: '[TOOLTIP]',
            icon: false,
            onclick: function() {
                editor.insertContent('[tooltips class="top_tooltip" title="Your Tooltip here"] Text here [/tooltip]');
            }
        });
    });
})();

Or save yourself the headache and use a plugin:

http://wordpress.org/plugins/better-shortcodes/screenshots/

http://wordpress.org/plugins/shortcodes-pro/screenshots/

http://wordpress.org/plugins/shortcodes-ui/screenshots/

Related Posts: