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 the colors 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 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 with 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 your own “notes.”
• 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');

Video Tutorial