Add the Background Color Button in the WordPress Editor


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
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
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.



Please enter your comment!
Please enter your name here