How To Add Custom Colours To TinyMCE 4 in WordPress 3.9+

TinyMCE 4 Custom Colour Swatches

WordPress 3.9 brings up latest TinyMCE 4 rich text editor as grat speed improvement, but this update break a lot of TinyMCE plugins (advanced image, advanced link, etc), including various handy customizations for TinyMCE editor in WP-way.

One of them are custom colour swatches. Until 3.9 we simply put following code to functions.php and got our own colours in editor:

function my_mce3_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;
return $init;
}
add_filter('tiny_mce_before_init', 'my_mce3_options');

Convert TinyMCE option for custom colour swatches to version 4

This solution will not work in WP 3.9, so we need to replace it with working solution below (to be clear, format of colours array is changed, along to TinyMCE option name):

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", "Brown",
	"C0C0C0", "Silver",
	"FF99CC", "Pink",
	"FFCC99", "Peach",
	"FFFF99", "Light yellow",
	"CCFFCC", "Pale green",
	"CCFFFF", "Pale cyan",
	"99CCFF", "Light sky blue",
	"CC99FF", "Plum",
	"FFFFFF", "White"
	';
$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"
	';
$init['textcolor_map'] = '['.$default_colours.','.$custom_colours.']';
$init['textcolor_rows'] = 6; // expand colour grid to 6 rows
return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

As you can see, option is changed from theme_advanced_text_colors to textcolor_map, and simple array of HEX codes separated by commas, now is changed to JavaScript array that threat elements as pairs of HEX colour value and colour nice name. All is wrapped to brackets.

Change number of colour swatches

Please note, my default TinyMCE 4 have limit up to 40 colour swatches (80 array elements) distributed in 5×8 grid (ROWSxCOLS). So, to append custom colours after default colours, we need to increase number of rows displayed on swatches popup.

To achieve this, we use textcolor_rows parameter.

We even can change grid layout and alter default 5×8 with, for example, 4×10 by setting parameters below:

$init['textcolor_rows'] = 5;
$init['textcolor_cols'] = 10;

Please note, this is just example. You can play with layout and colour set as you wish.

How To Add ‘More Colors’ Functionality?

TinyMCE 4 drop support for ‘More Colors’ option, but now there is WordPress plugin TinyMCE Color Picker that brings back this functionality to WordPress 3.9+

Did this tips helped you?

If you found this tips useful, feel free to 

A question posed to StakOverflow encouraged me to explain how this problem can be resolved quickly and easily.


8 responses to “How To Add Custom Colours To TinyMCE 4 in WordPress 3.9+”

  1. This is so great! Thanks for the tip. Beyond this trick, any idea how to add the “More Colors” options to bring up a color picker? So it isn’t limited to the default and custom color additions?

    Thanks for your tips.

  2. Hi Aleksandar
    Because functions.php doesn’t exist in Tinymce-advanced folder I put this code into wp-includes/functions.php and just got error 500.
    Where is location of this file?

      • I have installed TinyMCE 4.0/WordPress 3.9.
        When I tried first option ‘my_mce3_options’ nothing happened and with second option I got error again. And now I put it into functions.php wich is inside WordPress theme directory.
        Is there another way?

        • This tip is only for WordPress websites. You can’t use it on non-WordPress system (Joomla, custom CMS, etc).

          So, if you use WordPress, read error messages which you receive with code found in this blog post, and fix reported issues.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.