WordPress TinyMCE 🎨 Customize color palette

Share on twitter
Share on linkedin
Share on facebook
Share on whatsapp
Share on email
Share on twitter
Share on linkedin
Share on facebook
Share on whatsapp
Share on email

The respect of the colors of the graphic charter of a site is essential for a successful web design. A simple way to encourage this good practice is to configure the default colors proposed by the TinyMCE plugin editor palette.

Just add the following code to the file functions.php by placing the colors in hexadecimal format (without the '#') followed by a name that will be displayed if you hover over a color in the palette with your pointer.

Replace default colors

/*
* Customize the default color palette for TinyMce editor
*/
function wpr_custom_color_tinymce( $options ) {
    $options['textcolor_map'] = json_encode(
        array(
            '26374D', 'main',
            '50B4D8', 'Secondary',
            '5A5A5A', 'Text',
            'DA4453', 'Accent',
            'E7CE57', 'Code - Yellow',
            'EF7C2B', 'Code - Orange',
            '78BC65', 'Code - Green',
        )
    );
    return $options;
}
add_filter( 'tiny_mce_before_init', 'wpr_custom_color_tinymce' );

Adding colors to default colors

/*
* Customize the default color palette for TinyMce editor
*/
function wpr_custom_color_tinymce( $options ) {
    $options['textcolor_map'] = json_encode(
        array(
            // My custom colors
            '26374D', 'main',
            '50B4D8', 'Secondary',
            '5A5A5A', 'Text',
            'DA4453', 'Accent',
            'E7CE57', 'Code - Yellow',
            'EF7C2B', 'Code - Orange',
            '78BC65', 'Code - Green',
            // The default colors 
            '000000', 'Black',
            '993300', 'Burnt orange',
            '333300', 'Dark olive',
            '003300', 'Dark green',
            '003366', 'Dark azure',
            '000080', 'Navy Blue',
            '333399', 'Indigo',
            '333333', 'Very dark gray',
            '800000', 'Maroon',
            'FF6600', 'Orange',
            '808000', 'Olive',
            '008000', 'Green',
            '008080', 'Teal',
            '0000FF', 'Blue',
            '666699', 'Grayish blue',
            '808080', 'Gray',
            'FF0000', 'Red',
            'FF9900', 'Amber',
            '99CC00', 'Yellow green',
            '339966', 'Sea green',
            '33CCCC', 'Turquoise',
            '3366FF', 'Royal blue',
            '800080', 'Purple',
            '999999', 'Medium gray',
            'FF00FF', 'Magenta',
            'FFCC00', 'Gold',
            'FFFF00', 'Yellow',
            '00FF00', 'Lime',
            '00FFFF', 'Aqua',
            '00CCFF', 'Sky blue',
            '993366', 'Red violet',
            'FFFFFF', 'White',
            'FF99CC', 'Pink',
            'FFCC99', 'Peach',
            'FFFF99', 'Light yellow',
            'CCFFCC', 'Pale green',
            'CCFFFF', 'Pale cyan',
            '99CCFF', 'Light sky blue',
            'CC99FF', 'Plum',
        )
    );
    return $options;
}
add_filter( 'tiny_mce_before_init', 'wpr_custom_color_tinymce' );
Julien .MA Jacob
Developer WordPress
Julien MA Jacob - Developer WordPress
🧙♂️ Passionate about the web and programming with always lots of projects in mind 👨💻 | About page
  Discussion of the article
Subscribe to our newsletter
Notify of
guest
1 Commentary
most popular
latest oldest
Inline Feedbacks
View all comments
Mocs

Hello! when I create a new topic in wpforo your color palette customization works awesome. But when editing a topic, tinymce displays the default classic palette. How could the code fix that?
Greetings and thanks for the code.