How do you add custom color swatches to all WYSIWYG editors?

I would like to be able add the same custom colours to the swatches at bottom of colour picker panels that appear in the WYSIWYG editors across the site, to make it easier for clients to keep consistent in their styling.

The swatches I refer to are the bottom row in the screenshot.

I would like to do this without installing a plug-in, ideally.

Topic color-picker wysiwyg Wordpress

Category Web

1
answered at

In addition to Max's answer, if you are looking to add to the existing pallet, here is the default colour pallet:

$custom_colours = '[
      "000000", "Black",
      "993300", "Burnt orange",
      "333300", "Dark olive",
      "003300", "Dark green",
      "003366", "Dark azure",
      "000080", "Navy Blue",
      "333399", "Indigo",
      "333333", "Very dark gray",
      "800000", "Maroon",
      "FF6600", "Orange",
      "808000", "Olive",
      "008000", "Green",
      "008080", "Teal",
      "0000FF", "Blue",
      "666699", "Grayish blue",
      "808080", "Gray",
      "FF0000", "Red",
      "FF9900", "Amber",
      "99CC00", "Yellow green",
      "339966", "Sea green",
      "33CCCC", "Turquoise",
      "3366FF", "Royal blue",
      "800080", "Purple",
      "999999", "Medium gray",
      "FF00FF", "Magenta",
      "FFCC00", "Gold",
      "FFFF00", "Yellow",
      "00FF00", "Lime",
      "00FFFF", "Aqua",
      "00CCFF", "Sky blue",
      "993366", "Red violet",
      "FFFFFF", "White",
      "FF99CC", "Pink",
      "FFCC99", "Peach",
      "FFFF99", "Light yellow",
      "CCFFCC", "Pale green",
      "CCFFFF", "Pale cyan",
      "99CCFF", "Light sky blue",
      "CC99FF", "Plum",
      ... CUSTOM HERE ...
    ]';
1
answered at

Click on the Custom... text and the color picker will pop up. Pick the color of your choice and press OK. Chosen color will appear as a custom swatch for later use.

Note! The solution above is not a solution. See comments and edit below.

Edit:

Here is a function which replaces the entire default palette with custom swatches.

Note, there are 7 colors in the list instead 8. That's because there should be also the multiplication X (✕) at the end of the color list which removes any color applied to the text. So, when adding one more row there should be 15 colors, not 16.

function my_mce4_options($init) {

    $custom_colours = '
        "3366FF", "Color 1 name",
        "CCFFCC", "Color 2 name",
        "FFFF00", "Color 3 name",
        "99CC00", "Color 4 name",
        "FF0000", "Color 5 name",
        "FF99CC", "Color 6 name",
        "CCFFFF", "Color 7 name"
    ';

    // build colour grid default+custom colors
    $init['textcolor_map'] = '['.$custom_colours.']';

    // 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');

Also, you can build you own swatch grid depending on the color number and UI requrements:

$init['textcolor_rows'] = 4;
$init['textcolor_cols'] = 2;

Largely based on this WPSE answer.

For more information and customization see this blog post.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.