Add the Background Color Button in the WordPress Editor

0
15

For those of you still using the Classic Editor in WordPress, you might find this code useful. It’s how to add in the background color (“backcolor”) button into the TinyMCE editor.

WordPress background color button in editor

Go into your theme’s functions.php file and add this code (usually you do this at the bottom of it but above the closing “?>” line):

/* Hook to init */
add_action( 'init', 'my_editor_background_color' );

/**
* Add TinyMCE Button
* @link https://shellcreeper.com/?p=1339
*/
function my_editor_background_color(){

/* Add the button/option in second row */
add_filter( 'mce_buttons_2', 'my_editor_background_color_button', 1, 2 ); // 2nd row
}

/**
* Modify 2nd Row in TinyMCE and Add Background Color After Text Color Option
* @link https://shellcreeper.com/?p=1339
*/
function my_editor_background_color_button( $buttons, $id ){

/* Only add this for content editor, you can remove this line to activate in all editor instance */
if ( 'content' != $id ) return $buttons;

/* Add the button/option after 4th item */
array_splice( $buttons, 4, 0, 'backcolor' );

return $buttons;
}

Then reload the page with the editor and it should be there.

Source shellcreeper.com

LEAVE A REPLY

Please enter your comment!
Please enter your name here