Untitled UI logotext
Solutions
WebsitesEcommerceMobile AppsWeb AppsProduction Support & Maintenance
Our work
Company
About usBlogPodcastContact us
Book a free consultation

Can the Wysiwyg in Wordpress have a custom Color Swatch Library?

Olivia Rhye

The pre-determined color swatch options in a wysiwyg are colors that usually clash with the overall branding of the website. To encourage the content editor to use colors that coincide with the branding identity of an organization, we can manually insert the brand's color palette as the color swatch options.

To do this, add this code to your functions.php file. Be sure to edit the actual hex values of the color as well as the name of the color which follows.

/*************************************************************/
/* custom color swatches in Wysiwyg */
/***********************************************************/

function my_mce4_options($init) {

$custom_colors = '
"36454f", "Gray",
"6ad4e0", "Teal",
"5f6cb2", "Blue",
"ffefcf", "Ivory",
"ff3232", "Red",
"C0C0C0", "Light Gray",
"e4dbc0", "Beige",
"fff", "White"
';

// build color grid default+custom colors
$init['textcolor_map'] = '['.$custom_colors.']';

// change the number of rows in the grid if the number of colors changes
// 8 swatches per row
$init['textcolor_rows'] = 1;

return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

And voilà! Here is a snapshot of how the wysiwyg color swatches look.

color swatch options

Source: https://wordpress.stackexchange.com/questions/233450/how-do-you-add-custom-color-swatches-to-all-wysiwyg-editors

Ready to start a project?

Book a free consultation
Untitled UI logotext
Our work
About us
Blog
Careers
Submit a ticket
Agency Partnerships
Contact
© 2024 fjorge. All rights reserved.
Privacy