Preventing Brand Tragedies Before They Happen

There are two problems with the built-in WordPress TinyMCE Editor text color palette:

  1. The default color selection is horrible.
  2. Users end up choosing these colors resulting in ugly, off-brand web pages.
Default WordPress TinyMCE Color Palette
This color selection makes me sad.

In this tutorial, I’ll show you how to customize the color picker in the WordPress TinyMCE editor toolbar with your own selection of colors.

The Code

Just add the following block of code to your theme’s functions.php file, and customize to suit your requirements:

// Customize the TinyMCE Color Palette
function wptb_tinymce_options($options) {
	$custom_colours =  '"000000", "Black",
						"00AC9F", "Custom Teal",
						"00448B", "Custom Blue"';
	$options['textcolor_map'] = '['.$custom_colours.']';
	return $options;
}
add_filter('tiny_mce_before_init', 'wptb_tinymce_options');

The Result

Brand tragedy prevented. My work here is done.

Explaining the Code

Before the TinyMCE toolbar is initialized, it calls the tiny_mce_before_init hook.

We create a function called wptb_tinymce_options that will run when this hook is called, by registering it with the tinymce_before_init hook:

function wptb_tinymce_options($options) {
	//Do stuff
}
//We register our function to run when the tiny_mce_before_init hook fires:
add_filter('tiny_mce_before_init', 'wptb_tinymce_options');

Our function receives an array of TinyMCE $options . Since we receive this array before the TinyMCE component initializes, we can modify it before everything is rendered to the screen.

One of the items in this array is $options['textcolor_map'] , which contains a specially-formatted string of colors and color names. By replacing this string with our own, we can override the built-in color palette.

$custom_colours =  '"000000", "Black",
					"00AC9F", "Custom Teal",
					"00448B", "Custom Blue"';
$options['textcolor_map'] = '['.$custom_colours.']';

Lastly, the hook expects us to return the updated $options array so that the TinyMCE Editor can complete initialization:

return $options;

 

Photo by RhondaK Native Florida Folk Artist on Unsplash