Create special button on WP Tiny MCE Posts Editor for Shortcodes

Question

I am trying to create a special button on the Tiny MCE editor on the Post Editor of Wordpress. I want to create a button for my created shortcode tooltips.

Check out my desired output: http://prntscr.com/4cy6fd

I have the following code for my Tooltip shortcode:

//Text tooltip
function tooltip($atts, $content = ''){
    $atts = shortcode_atts(
        array(
          'class' => '',
          'title' => ''
        ), $atts);


     $html = '<a class="' . $atts['class'] .'"  title="'. $atts['title']. '" href="#">' . $content . ' <span>' .$atts['title']. '</span> </a>';
    return $html;    
  } 

add_shortcode('tooltip', 'tooltip');

Now when you execute this you will use the following codes for the shortcode:

[tooltips class="top_tooltip" title="Your Tooltip here"] Text here [/tooltip]

What I have done is that created some function to DISPLAY MY CREATED TOOLTIP SHORTCODE on the functions.php file on my theme using the following codes.

//Create Tiny MCE buttons
function mce_tooltip($button) {
  $buttons[] = 'superscript';
  return $button;
}
add_filter('mce_buttons_2', 'mce_tooltip');



/*
* Callback function to filter the MCE settings
*/

function mce_tooltip( $init_array ) {  

// Define the style_formats array

  $style_formats = array(  
    // Each array child is a format with it's own settings
    array(  
      'class' => '',  
      'title' => ''      
  );  
  // Insert the array, JSON ENCODED, into 'style_formats'
  $init_array['style_formats'] = json_encode( $style_formats );  

  return $init_array;  

} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'mce_tooltip' ); 

I tried the code but it won't show up my CUSTOM button for my shortcode on the TINY MCE Editor on Wordpress. Any idea how to do it better?

Here's the output I am trying to create: http://prntscr.com/4cy6fd

Answer 1

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/