Create a Custom Text Editor Color Palette

By default, WordPress includes a color palette that you can use when using Elementor’s Text Editor widget, MyListing’s WP Editor field, etc. 

In many cases, the colors provided aren’t what you’re looking for, so you choose the Custom option and add your own. This is great, but custom colors aren’t saved, and you have to enter them each time you revisit the editor.

This code snippet helps you easily define a custom color palette that replaces what WordPress provides. 

MyListing Notes

As mentioned above, this snippet works with MyListing’s WP Editor field. By defining a custom color palette, you limit listing owners to your defined colors, which will help keep the content in line with your branding.

Customization Notes

• Adjust Lines 4-6 to use your desired colors
• What you enter between the first set of quotation marks (e.g., FFFFFF) is the HEX value of your color without the hex symbol
• What you enter between the second set of quotation marks (e.g., “White”) is just for you to reference
• If you want to add more colors, push Line 7 down the code snippet and add your new color.
• IMPORTANT: Your last color entry cannot be followed by a comma, or the code snippet will break

function wptu_mce_colors ($init) {

    $custom_colours = '
        "FCB040", "accent",
        "111111", "Black",
        "FFFFFF", "White"
    ';

    // Build Color Grid
    $init['textcolor_map'] = '['.$custom_colours.']';

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

function wptu_mce_colors ($init) {

    $custom_colours = '
        "FCB040", "accent",
        "111111", "Black",
        "FFFFFF", "White"
    ';

    // Build Color Grid
    $init['textcolor_map'] = '['.$custom_colours.']';

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

Video Tutorial