How To Add Background Color (Highlight) Option in WordPress Editor TinyMCE

WordPress Visual Editor only have text color option. But sometimes we need to highlight the text by changing the text background color. TinyMCE (the editor script) actually have this feature, but WordPress hide it to make the visual editor simpler. But if you need this feature, you can activate this feature using very simple code.

In this example I add the option in second row, after the text color option (as in screenshot), and only activate it in main editor (content editor).

/* 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;
}

If you want to add it in first row, you can use mce_buttons instead of mce_buttons_2.