Custom colour palettes in TinyMCE with WordPress

Updated for WordPress 3.9

After a few week’s delay I’ve finally managed to figure out how to customise the colour palette in WordPress 3.9. The method has changed a little but it’s still nice and simple.

I’ll break it down shortly, but this will do the trick:

function dmw_custom_palette( $init ) {

$custom_colours = ' "111111", "Dark Grey", "555555", "Mid Grey", "CCCCCC", "Light Grey", "3366FF", "Blue" ';    

$init['textcolor_map'] = '['.$custom_colours.']';
 
return $init;

}

add_filter('tiny_mce_before_init', 'dmw_custom_palette');

You’ll notice a few differences:

As before we set up the function.

function dmw_custom_palette( $init ) {

Now we list all of the colours (complete with names for them – choose what you like!) that you want to be available. If you want the default colours to be available you’ll have to add those too.

$custom_colours = ' "111111", "Dark Grey", "555555", "Mid Grey", "CCCCCC", "Light Grey", "3366FF", "Blue" ';

Then we add the custom colours to the “colour map” in textcolor.

$init['textcolor_map'] = '['.$custom_colours.']';

Next we return the $init variable so that it can be used by the same filter as we used previously and close the function.

return $init;

}

Finally we run the filter

add_filter('tiny_mce_before_init', 'dmw_custom_palette');

And here’s what we get:

Your new custom colour palette

Your new custom colour palette

WordPress 3.8.3 or before (updating would be better!)


Lately I’ve been investigating ways of customising the WordPress visual editor to make it more relevant to the user.

Time to own up. It took almost 5yrs of using WordPress for it to even register that there was an option in the visual editor to change the colour of text. The options are limitless. As long as you can find a Hex code, you can enter almost any colour imaginable and apply it to your content.

Pick a colour, any colour

Pick a colour, any colour

While this is a great example of how powerful WordPress is as a publishing platform, the thought terrified me. With one click you can undo hours, if not days, of work that went into branding and design. But we can harness that power to make life easier for everyone.

Custom colour palettes

After digging around the WordPress Codex and TinyMCE developer documentation I managed to figure out a really simple method of customising the colour palette in the visual editor.

The Digital My Way colour palette consists of four colours: #111111, #CCCCCC, #555555 and #3366FF. There’s no need for me to have any colours available to me when editing content.

Thankfully some WordPress hooks and filters allow you to customise the TinyMCE editor so that you can limit the colours available. You can do this by adding the following function to your theme’s functions.php file.

function dmw_custom_palette( $colours ) {
         $colours['theme_advanced_text_colors'] = '111111,555555,CCCCCC,3366FF';
         $colours['theme_advanced_more_colors'] = false;
return $colours;
}

add_filter('tiny_mce_before_init', 'dmw_custom_palette');

Let’s go through each line.

function dmw_custom_palette( $colours ) {

This creates the function (dmw_custom_palette) that you’ll use to filter the TinyMCE setup. You can call your function anything within reason, likewise the $colours variable.

$colours['theme_advanced_text_colors'] = '111111,555555,CCCCCC,3366FF';

Here we tell TinyMCE which colours we’d like to be available, using their Hex values, without the hash sign. You can add as many as you like.

$colours['theme_advanced_more_colors'] = false;

This line simply tells TinyMCE that the colours we’ve entered in the previous line are the only colours we want to be available. There will be no colour picker.

add_filter('tiny_mce_before_init', 'dmw_custom_palette');

And here we tell WordPress to run our function before TinyMCE initiates.

Now when I click on the text colour button in the visual editor only my corporate colours are available to me:

Only the colours we entered in our function are available

Only the colours we entered in our function are available

Easy as that!

Next time I’ll show you how to add custom styles to the preset dropdown menus.