Add Custom Colors in WP Editors


How to add custom colors in WP editors color picker? Is it possible to add more colors in WordPress editor color picker? Yes it is possible to add more and more color in WordPress editor color picker. This short snippet will add three colors (#15375c, #3366FF and #9fb83f) to color picker of WordPress editor. It’s pretty useful if you allow administrators and authors to select the common colors of your website. Simply add this below WordPress snippets into your theme’s functions.php to add custom colors in WP editor color picker.

function devtoolsplus_custom_palette( $colors ) {
    // Default WordPres color pallete
    $colors['theme_advanced_text_colors'] = '000000,993300,333300,003300,003366,000080,333399,333333,800000,FF6600,808000,008000,008080,0000FF,666699,808080,FF0000,FF9900,99CC00,339966,33CCCC,3366FF,800080,999999,FF00FF,FFCC00,FFFF00,00FF00,00FFFF,00CCFF,993366,C0C0C0,FF99CC,FFCC99,FFFF99,CCFFCC,CCFFFF,99CCFF,CC99FF,FFFFFF';
    // New colors that we want to add
    $colors['theme_advanced_text_colors'] .= ',15375c,3366FF,9fb83f';
 
    // make it true to enable the "more" option
    $colors['theme_advanced_more_colors'] = false;
    return $colors;
}
add_filter('tiny_mce_before_init', 'devtoolsplus_custom_palette');

After adding this snippets into you functions.php file check your WordPress editor color picker. Your WordPress color picker will like below image

wordpress colour picker

You must see: How to add custom meta box in post

Customization of Custom Colors in WP Editors

Edit Default WordPress color pallete: If you want to delete default WordPress color pallete simply find // Default WordPres color pallete and add or delete color code from below line. Add New colors in WordPress color pallete: If you want to Add new WordPress color pallete simply find 15375c,3366FF,9fb83f and add or delete color code separate by comma. Add more color option: If you want to add more color option button simply edit $colors['theme_advanced_more_colors'] = false; and make it true.

You must see: How to add custom styles in WordPress tinymce editor

Masum Billah has written 326 articles

Hi I am Md. Masum Billah Contributor of this website. I always like to share various things with other. In this website I am sharing web design related tips and tricks, necessary web development tools, source codes for beginner and advance web developer. You may join with us to help other who want to learn web design and development. Thank you for stay with.

Recommended Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>