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.

The tinyMCE "kitchen sink" toggle button shows/hides a row of buttons. I have successfully added my row of shortcode buttons to the tinyMCE editor, but I was wondering if there was a way to make my row only display when the kitchen sink button is clicked. I don't want to add the buttons directly to the kitchen sink row because I have lots of buttons that need their own row. So, can I make the kitchen sink button show two rows instead of one? Or is there some sort of modifier when I add my row to indicate that it should be toggled when the kitchen sink button is clicked?

Here is the code I'm using to add my third row of buttons:

    // add shortcode buttons to the tinyMCE editor row 3
function add_button_3() {
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )
   {
     add_filter('mce_external_plugins', 'add_plugin_3');
     add_filter('mce_buttons_3', 'register_button_3');
   }
}
//setup array of shortcode buttons to add
function register_button_3($buttons) {
   array_push($buttons, "dropcap", "divider", "quote", "pullquoteleft", "pullquoteright", "boxdark", "boxlight", "togglesimple", "togglebox", "tabs", "signoff", "columns", "smallbuttons", "largebuttons", "lists");  
   return $buttons;
}
//setup array for tinyMCE editor interface
function add_plugin_3($plugin_array) {
   $plugin_array['lists'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['signoff'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['dropcap'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['divider'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['quote'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['pullquoteleft'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['pullquoteright'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['boxdark'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['boxlight'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['togglesimple'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['togglebox'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['tabs'] = get_bloginfo('template_url').'/js/customcodes.js'; 
   $plugin_array['columns'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['smallbuttons'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['largebuttons'] = get_bloginfo('template_url').'/js/customcodes.js';
   return $plugin_array;
}
add_action('init', 'add_button_3'); // add the add_button function to the page init

However, the row that adds is not toggled by the kitchen sink button.

share|improve this question
    
Do you mean inside the 2nd, 3rd, 4th basic rows or adding a 5th, 6th custom row? –  kaiser Apr 1 '11 at 18:45
    
I updated my question with the code I am using. I think I'm adding a 3rd custom row, right? I'm not sure what the difference is between rows 2, 3, and 4 and rows 5 and 6 that you speak of...? –  Industrial Themes Apr 1 '11 at 19:03
    
i meant the filter. –  kaiser Apr 1 '11 at 19:17
    
I'm using the mce_buttons_3 filter –  Industrial Themes Apr 1 '11 at 19:59
    
I could of addressed these questions inline with your previous TinyMCE question, could of saved yourself the need to post a new (almost duplicative) question... :) –  t31os Apr 1 '11 at 23:05

3 Answers 3

up vote 2 down vote accepted

Yes!

  • Use the mce_buttons_2 filter to add buttons to the second row.
  • Use the mce_buttons_3 filter to add buttons to the third row.

Here's an example of what I use:

function mytheme_mce_buttons_row_3($buttons) {

     $buttons[] = 'fontselect';
     $buttons[] = 'fontsizeselect';
     $buttons[] = 'code';
     $buttons[] = 'sup';
     $buttons[] = 'sub';
     $buttons[] = 'backcolor';
     $buttons[] = 'separator';
     $buttons[] = 'hr';
     $buttons[] = 'wp_page';

     return $buttons;

}
add_filter("mce_buttons_3", "mytheme_mce_buttons_row_3");

Just drop this in functions.php. (I put it in my Theme setup function, that gets hooked into after_setup_theme.)

EDIT:

I don't know if it makes a difference or not, but you're using array_push($buttons, $button), while I'm using $buttons[] = $button

Here's your code:

//setup array of shortcode buttons to add
function register_button_3($buttons) {
   array_push($buttons, "dropcap");
   array_push($buttons, "divider");
   array_push($buttons, "quote");
   array_push($buttons, "pullquoteleft");
   array_push($buttons, "pullquoteright");
   array_push($buttons, "boxdark");
   array_push($buttons, "boxlight");
   array_push($buttons, "togglesimple");
   array_push($buttons, "togglebox");
   array_push($buttons, "tabs");
   array_push($buttons, "signoff"); 
   array_push($buttons, "columns");
   array_push($buttons, "smallbuttons");
   array_push($buttons, "largebuttons");
   array_push($buttons, "lists");     
   return $buttons;
}
add_filter('mce_buttons_3', 'register_button_3');

Which, using my method, would look like this:

//setup array of shortcode buttons to add
function register_button_3($buttons) {
   $buttons[] = 'dropcap';
   $buttons[] = 'divider';
   $buttons[] = 'quote';
   $buttons[] = 'pullquoteleft';
   $buttons[] = 'pullquoteright';
   $buttons[] = 'boxdark';
   $buttons[] = 'boxlight';
   $buttons[] = 'togglesimple';
   $buttons[] = 'togglebox';
   $buttons[] = 'tabs';
   $buttons[] = 'signoff'; 
   $buttons[] = 'columns';
   $buttons[] = 'smallbuttons';
   $buttons[] = 'largebuttons';
   $buttons[] = 'lists';     
   return $buttons;
}
add_filter('mce_buttons_3', 'register_button_3');

Give that a try?

share|improve this answer
    
I updated my question with the code I'm using. I'm not sure what the difference is between your code and my code. How does your code add the buttons to the kitchen sink whereas my code does not? Thanks for your help. –  Industrial Themes Apr 1 '11 at 19:04
    
I updated my answer, using your example code. –  Chip Bennett Apr 1 '11 at 19:11
    
That also works, but it does the exact same thing as using the "array_push" method. The row still does not toggle when the kitchen sink button is clicked but rather is always visible. –  Industrial Themes Apr 1 '11 at 19:18
    
array_push($buttons, 'dropcap', 'divider', 'quote', ...) would shorten your code a little.. –  onetrickpony Apr 1 '11 at 19:19
2  
The "Kitchen Sink" button only toggles Row 2. If Rows 3 or 4 are populated, they are always visible. Apparently it is a [core.trac.wordpress.org/ticket/9841](bug/known issue in WordPress). –  Chip Bennett Apr 1 '11 at 20:14

I hit this same problem myself, and after a little jQuery work I was able to find a solution.

I wrote my answer to the toggle issue in a blog post.

The JavaScript you need for your editor plugin looks like this:

init : function( ed, url ) {
    ed.onInit.add(function( ed ) {
        if ( getUserSetting( 'hidetb', '0' ) == '0' ) {
            jQuery( '#content_toolbar3' ).hide();
        }

        jQuery( '#wp-content-editor-container #content_wp_adv' ).click(function() {
            if ( jQuery( '#content_toolbar2' ).is( ':visible' ) ) {
                jQuery( '#content_toolbar3' ).show();
            } else {
                jQuery( '#content_toolbar3' ).hide();
            }
        });
    });
}

I hope this helps anyone else who has come across this thread!

share|improve this answer
    
Thanks. This is the closest thing I've found to fix this annoying bug -- I used your code and expanded on it a bit. –  smhmic Nov 1 '13 at 19:36

I always thought the 'Kitchen Sink' button in the MCE editor in Wordpress didn't work quite right. I saw @AndyAdamns' answer and expanded on it, to also handle:

  1. toggling ALL rows following the row with the Kitchen Sink button
  2. also allowing the Kitchen Sink button to function when placed in row 2 or 3

Here is the javascript to implement this as a MCE plugin:

(function(){
    tinymce.create( "tinymce.plugins.extrarows", {init : function( a, b ){
        a.onInit.add( function( a ){
            var $btns = jQuery( '.mce_wp_adv.mceButtonEnabled' )

            // This function attempts to update mceButtonActive class on the 
            //   kitchen sink button appropriately, but .mceButtonActive seems to 
            //   be manipulated between user clicks by another script, so uses 
            //   custom class 'pfxMceButtonActive' to actually track toggle state. 
            function toggleFollowingRows( $el ){
                var $this = jQuery( $el );
                if( $this.hasClass( 'pfxMceButtonActive' ) ){
                    $this.removeClass( 'mceButtonActive pfxMceButtonActive' ).closest( '.mceToolbar' ).find( '~ .mceToolbar' ).hide();
                    setUserSetting( 'hidetb', 1 );
                } else {
                    $this.addClass( 'mceButtonActive pfxMceButtonActive' ).removeClass( 'mceButtonInactive' ).closest( '.mceToolbar' ).find( '~ .mceToolbar' ).show();
                    setUserSetting( 'hidetb', 0 );
                }
            }

            // Show rows based on local setting (Hide by default)
            var hidetb = getUserSetting( 'hidetb', 1 );
            if( hidetb && hidetb != '0' ){
                $btns.addClass( 'mceButtonActive pfxMceButtonActive' )
            }

            $btns.click( function( e ){
                toggleFollowingRows( jQuery( this ) );
                return false;
            } ).each( function(){
                toggleFollowingRows( jQuery( this ) );
            } )
        } );
    }, 
    getInfo : function(){
        return{longname : "Hide Extra Rows", author : "smhmic", authorurl : "http://smhmic.com", version : tinymce.majorVersion + "." + tinymce.minorVersion }
    }} );
    tinymce.PluginManager.add( "extrarows", tinymce.plugins.extrarows )
})();

... then hook this file into Wordpress:

add_filter( 'mce_external_plugins', 'mce_extrarows_plugin' );
function mce_extrarows_plugin( $plugins_array ){
    $plugins_array['extrarows'] = /* PATH TO JAVASCRIPT FILE */;
    return $plugins_array;
}

This plugin also addresses other minor annoyances I encountered when using MCE in Wordpress:

  • clear on/off state for Kitchen Sink button (without this plugin, button always appeared initialized in off state)
  • persistent Kitchen Sink toggle state (without this plugin, sometimes didn't persist across page loads)
share|improve this answer
    
This is useful code, but it actually answers a different question from what is asked here. Perhaps you would consider asking and answering your own question, to help expand on the WPSE knowledge base? –  Chip Bennett Nov 2 '13 at 0:08
    
@ChipBennett, i believe you read the question as "add another row to tinyMCE" when they actually wanted to add a row to the "tinyMCE kitchen sink *toggle*". The question title was framed in a slightly misleading way, but they specify in post that they have already added a row, and seek a way to "make the kitchen sink button [toggle] two rows instead of one". –  smhmic Nov 4 '13 at 16:04
    
Only because of a known issue/bug in core. The kitchen sink toggle is supposed to toggle rows 2-4, rather than just toggle row 2. –  Chip Bennett Nov 4 '13 at 16:16
    
Looking at the submitted patches, it looks like this issue could have been resolved years ago. I suppose it's just a matter of waiting for the core devs to incorporate the fix. Until then, solutions like mine have to suffice. Rereading the first paragraph of this question, do you still think I should repost my answer on my own question? –  smhmic Nov 4 '13 at 16:44

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.