Custom button on WP Tiny MCE Posts Editor for Shortcodes

Question

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:

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 CUSTOM BUTTON 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?

wins wins · Accepted Answer · 2015-01-27T15:45:03

Check your code. I guess there is invalid return value

function mce_tooltip($button) {
  $buttons[] = 'superscript';
  return $button;
}

Custom button on WP Tiny MCE Posts Editor for Shortcodes

3 Answers