Tech Note: Adding custom colours to the WordPress Editor’s Palette

This is a neat trick, although, one that web purists may not want to use.

A client has a colour palette associated with their brand. They sometimes want to apply those colours to text used on their WordPress website.

Of course, most of the styles for the site are determined by the HTML tags, classes and the use of CSS. But I can see that, from a user’s point of view, being able to apply your organisation’s colours could be useful, and if you’re creating a custom theme, adding the organisations branded colours to the palette could be a neat feature.

This WordPress forums post gives the little code snippet that goes in your functions.php:

function change_mce_options( $init ) {
  $init['theme_advanced_text_colors'] = 'FF00FF,FFFF00,000000';
  $init['theme_advanced_more_colors'] = false;
  return $init;
}
add_filter('tiny_mce_before_init', 'change_mce_options');

Obviously you’ll need to change the colour codes and you can re-enable the “More colours” button if you want to.

But what if you want to ADD the requested colours to the default palette, rather than replacing it completely? Well, you’d normally need to dig around in the JavaScript code, but have no fear, I’ve done it for you:

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 = 'FF00FF,FFFF00,000000';
  $init['theme_advanced_text_colors'] = $default_colours . ',' . $custom_colours;
  $init['theme_advanced_more_colors'] = false;
  return $init;
}
add_filter('tiny_mce_before_init', 'change_mce_options');

Tags: , , , , ,

One Response to “Tech Note: Adding custom colours to the WordPress Editor’s Palette”

  1. do9man October 24, 2012 at 9:17 pm #

    Thanks for the color list!

Leave a Reply