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

WP Editor TinyMCE Text Highlight Backgrond Color
WP Editor Background Color Option

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

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


  1. Tim

    I don’t know how to code, I just want this button. Where do I add this code? Break it down for me. 🙂

  2. Ahir

    How to add new custom color on that color palate ? can you please check for filter. specially for TinyMCE Only not Gutenberg.


Comments are closed.