Can the Wysiwyg in WordPress have a custom Color Swatch Library?

Biz Cook

The pre-determined color swatch options in a wysiwyg are colors that usually clash with the overall branding of the website. To encourage the content editor to use colors that coincide with the branding identity of an organization, we can manually insert the brand’s color palette as the color swatch options.

To do this, add this code to your functions.php file. Be sure to edit the actual hex values of the color as well as the name of the color which follows.

/*************************************************************/
/*  custom color swatches in Wysiwyg */
/***********************************************************/
 
function my_mce4_options($init) {
 
    $custom_colors = '
        "36454f", "Gray",
        "6ad4e0", "Teal",
        "5f6cb2", "Blue",
        "ffefcf", "Ivory",
        "ff3232", "Red",
        "C0C0C0", "Light Gray",
        "e4dbc0", "Beige",
        "fff", "White"
    ';
 
    // build color grid default+custom colors
    $init['textcolor_map'] = '['.$custom_colors.']';
 
    // change the number of rows in the grid if the number of colors changes
    // 8 swatches per row
    $init['textcolor_rows'] = 1;
 
    return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

And voilĂ ! Here is a snapshot of how the wysiwyg color swatches look.
color swatch options

Source: https://wordpress.stackexchange.com/questions/233450/how-do-you-add-custom-color-swatches-to-all-wysiwyg-editors

Last updated by on .

What Are Your Thoughts?

Your email address will not be published. Required fields are marked *