Add custom text color WordPress 3.9 TinyMCE 4 Visual editor

Question

I had a code snippet which would help me to add some custom color to the visual editor text color dropdown along with the default colors. I'm pasting the snippet below.

function change_mce_options( $init ) {
  $default_colours = '000000,993300,333300,003300,003366,000080,333399,333333,800000,FF6600,808000,008000,008080,0000FF,666699,808080,FF0000,FF9900,99CC00,339966,33CCCC,3366FF,800080,999999,FF00FF,FFCC00,FFFF00,00FF00,00FFFF,00CCFF,993366,C0C0C0,FF99CC,FFCC99,FFFF99,CCFFCC,CCFFFF,99CCFF,CC99FF,FFFFFF';
  $custom_colours = 'e14d43,d83131,ed1c24,f99b1c,50b848,00a859,00aae7,282828';
  $init['theme_advanced_text_colors'] = $default_colours . ',' . $custom_colours;
  $init['theme_advanced_more_colors'] = true;
  return $init;
}
add_filter('tiny_mce_before_init', 'change_mce_options');

After wordpress 3.9 update it stopped working, I've tried a lot to fix it, but I am unable to do it, can you please help me out?

score 25 · Accepted Answer · edited Sep 14 '16 at 04:44

Option for text colours is textcolor_map and each colour's format is "color_hex", "color_name".

So, from your example, simply change option name and convert the colours array to something like this:

function my_mce4_options($init) {
  $default_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_colours =  '"E14D43", "Color 1 Name",
                      "D83131", "Color 2 Name",
                      "ED1C24", "Color 3 Name",
                      "F99B1C", "Color 4 Name",
                      "50B848", "Color 5 Name",
                      "00A859", "Color 6 Name",
                      "00AAE7", "Color 7 Name",
                      "282828", "Color 8 Name"';

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

  // enable 6th row for custom colours in grid
  $init['textcolor_rows'] = 6;

  return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

EDIT: Default colour swatches grid is 5x8 (ROWSxCOLS), and to append custom colours after default colours grid, we need to alter number of rows. Change included in code above, and better explained in my blog post.

EDIT2: Now there is colour picker addon - TinyMCE Color Picker, so all colours related tweaks for WordPress 3.9 are solved now!

EDIT 3: The above color picker is outdated. This is the most current plugin as of September 2016: https://wordpress.org/plugins/kt-tinymce-color-grid/

Cheers

Thanks a lot man. This is going to save a lot amount of people out there. God bless you (y) — iSaumya, Apr 21 '14 at 14:49
Also in the `$init['textcolor_map']` we first need to sent the **custom colors** then the **default colors**, I've tried doing the opposite, but it wont works, may be the new version wont allow that, but Thank you very much for the help. Thanks a ton. — iSaumya, Apr 21 '14 at 15:02
@urosevic What about adding the custom colour select: " $init['theme_advanced_more_colors'] = true;" — ptimson, Apr 24 '14 at 17:22
@ptimson I'm pretty sure that out-of-the-box TinyMCE 4.0 does not have custom colour picker functionality. — urosevic, Apr 25 '14 at 21:05
Now we have solution for colour picker - check out [TinyMCE Color Picker](http://wordpress.org/plugins/tinymce-colorpicker/) plugin — urosevic, Apr 30 '14 at 20:39
@urosevic I think guys this code needs to be updated as after enabling this block the more color choosing option (now default in WP) and also remove color option (now default in wp) doesnt show up. See this: http://puu.sh/kE309/3ce7a9df19.jpg So, an update is really needed. Looking forward to your reply. — iSaumya, Oct 09 '15 at 14:47

Add custom text color WordPress 3.9 TinyMCE 4 Visual editor

1 Answers1