Skip Navigation

[Resolved] Remove Bootstrap-Components-Button in Tiny-MCE for Editors

This thread is resolved. Here is a description of the problem and solution.

Problem:
How to remove or hide Bootstrap buttons / Bootstrap-Components / Bootstrap toggle button (tinymce buttons) from WP Post Editors.

Solution:
1. If your site is not using Bootstrap, then you can disable it by going to WordPress dashboard >> Settings >> General >> Bootstrap loading >> This site is not using Bootstrap CSS -- please see screenshot:
https://d7j863fr5jhrr.cloudfront.net/wp-content/uploads/2017/06/540112-Bootstrap.png?x36781

2. If your site is using Bootstrap, then you can disable it by adding following code in the theme’s or child theme’s functions.php file to remove Bootstrap buttons from editor:

add_filter( 'mce_buttons_3', 'remove_bootstrap_buttons', 999 );
function remove_bootstrap_buttons($buttons) {
    return array();
}
  
add_filter( 'mce_buttons', 'remove_toggle_button', 999 );
function remove_toggle_button($buttons) {
    $remove = array( 'css_components_toolbar_toggle' );
    return array_diff( $buttons, $remove ); 
} 

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Tagged: 

This topic contains 7 replies, has 2 voices.

Last updated by dianaM-4 4 years, 3 months ago.

Assigned support staff: Noman.

Author
Posts
#540093
Bildschirmfoto 2017-06-22 um 12.56.07.jpg

I am trying to hide the Bootstrap-Components-Buttons for all my editors. I really don't want to mess things up by adding any Bootstrap-Content.

I styled my Tiny-MCE individually by mce_buttons-filter – in this way:

add_filter( 'mce_buttons', 'cw_mce_buttons_1' );
function cw_mce_buttons_1( $buttons ) {
    $buttons = array( 'pastetext','removeformat','formatselect','styleselect','bold','italic','underline','alignleft','aligncenter','alignright','bullist','link','undo','redo','wp_adv' );
    return $buttons;
}
add_filter( 'mce_buttons_2', 'cw_mce_buttons_2' );
function cw_mce_buttons_2( $buttons ) {
    $buttons = array('wp_more','hr','charmap','spellchecker','fullscreen','wp_help');
    return $buttons;
}

This works great. But the Toolsets Button for the Bootstrap-Components is showing up anyway. Is there an easy way to do hide them for a specific user-role? Perhaps a filter? Or through the access-plugin?

Thanks for help! Diana

#540112

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Bootstrap.png

Hi Diana,

Thank your for contacting Toolset support.

Please go to WordPress dashboard >> Settings >> General >> Bootstrap loading >> This site is not using Bootstrap CSS (please see attached screenshot)

Thank you

#540132
BootstrapMessage.jpg

Hi Noman!
No, sorry, that didn't do anything with the buttons in Tiny-MCE. They are still showing up. And I got a message in Toolset (see Screenshot).

Just to be clear: I'm using Bootstrap in my Layout (a child-template from "Toolset-Starter"). Everything works fine in Frontend. I only want to hide the Bootstrap-Icons in Tiny-MCE. I assume, that Toolset hooks into the mce-Filter to add these buttons (like I did with the above code). I want them to disappear again. Isn't there a hook to deregister these fields?

Thanks, Diana

#540143

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Okay, there is no documented hook that I am aware of. I am going to look around and see what I found in this case. Will update you soon.

Thanks

#540190

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

I have written code for you. Please change the Bootstrap loading setting back to as it was, and add this code in the theme’s or child theme’s functions.php file to remove Bootstrap buttons from editor:

add_filter( 'mce_buttons_3', '__return_false', 999 );
add_filter( 'mce_buttons', 'remove_toggle_button', 999 );
 
function remove_toggle_button($buttons) {
	$remove = array( 'css_components_toolbar_toggle' );
	return array_diff( $buttons, $remove );	
}

Thank you

#540411

Thanks Noman,
this worked! But I'm getting a php-warning in MCE-Editor:

Warning: implode(): Invalid arguments passed in MYSITE/wp-includes/class-wp-editor.php on line 664

Can we please get rid of that, too?

#540451

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hello,

Please use this updated code and it will not display an error:

add_filter( 'mce_buttons_3', 'remove_bootstrap_buttons', 999 );
function remove_bootstrap_buttons($buttons) {
	return array();
}
 
add_filter( 'mce_buttons', 'remove_toggle_button', 999 );
function remove_toggle_button($buttons) {
	$remove = array( 'css_components_toolbar_toggle' );
	return array_diff( $buttons, $remove );	
} 

Thank you

#541306

Okay, this works now perfectly!
Thanks again, Noman!