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


Last updated by on .

One thought on "Can the Wysiwyg in WordPress have a custom Color Swatch Library?"

  1. Vijay says:

    This works like a charm.

    $custom_colours =  '
                                        "E74C3C", "Primary",
    				    "1ABC9C", "Secondary", 
    				    "1E72BD", "Tertiary"

    However, I have these global styles stored in global variables and brought into the function as below.
    However this code is not working. Can you help?

    global $primary, $secondary, $tertiary;
    $custom_colours =  '
                                        $primary", "Primary",
    				    $secondary, "Secondary", 
    				    $tertiary", "Tertiary"

What Are Your Thoughts?

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