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.
3 s
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?