Function Friday #1: custom colour palettes in the Visual Editor
Every Friday, I’m sharing code snippets that I use to customize WordPress. Feedback/suggestions are always welcome! For more information, check out the first post in the series.
After I’ve launched a WordPress site for a client, I don’t want them to have to contact me to make any updates. To that end, I try to build in as many customization options for them as possible.
One quick one is to show their brand/theme colours in the “Text color” colour picker instead of the default palette. Instead of seeing this:
They’ll see something like this:
They can still click “Custom…” to select a different colour, but this presents them with their own brand colours first.
The code
// Add custom colour palette to the Visual Editor
function drollic_change_tinymce_colours( $args ) {
$custom_colours = '
"047a87", "Teal",
"0599a9", "Light teal",
"035a64", "Dark teal",
"ecf7f8", "Pale blue",
"9fbec2", "Grey blue",
"333333", "Dark grey",
"d3d3d3", "Medium grey",
"f5f5f5", "Light grey"
';
$args['textcolor_map'] = '[' . $custom_colours . ']';
return $args;
}
add_filter( 'tiny_mce_before_init', 'drollic_change_tinymce_colours' );The colour names appear when you hover over each colour, so you can even get more specific here if you want – for example, you could indicate which colours are used as the link colour to avoid confusion, or which colours should only be used on top of dark backgrounds.
Remember to start your function names with a unique prefix, so they won’t conflict with functions elsewhere on your site (in WordPress core or other plugins). I usually just use my company name, because I’m pretty confident no one else will be using it.
Where does it go?
Since the colour palette is based on the theme design, I’ll include this code in the theme’s function file. For more thoughts on where to put your code, read the first Function Friday post.
I love this! I wanted to enable it for the colour picker in Advanced Custom Fields too. Found this tutorial and set it up today: https://www.ractoon.com/2014/11/acf5-pro-color-picker-custom-palettes/.
Thought you might want it too. 🙂
Nice, thanks for sharing!