How do you add custom color swatches to all WYSIWYG editors?

I would like to be able add the same custom colours to the swatches at bottom of colour picker panels that appear in the WYSIWYG editors across the site, to make it easier for clients to keep consistent in their styling.

The swatches I refer to are the bottom row in the screenshot.

I would like to do this without installing a plug-in, ideally.

How do you add custom color swatches to all WYSIWYG editors?


Click on the Custom... text and the color picker will pop up. Pick the color of your choice and press OK. Chosen color will appear as a custom swatch for later use.

Note! The solution above is not a solution. See comments and edit below.


Here is a function which replaces the entire default palette with custom swatches.

Note, there are 7 colors in the list instead 8. That's because there should be also the multiplication X (✕) at the end of the color list which removes any color applied to the text. So, when adding one more row there should be 15 colors, not 16.

function my_mce4_options($init) {

    $custom_colours = '
        "3366FF", "Color 1 name",
        "CCFFCC", "Color 2 name",
        "FFFF00", "Color 3 name",
        "99CC00", "Color 4 name",
        "FF0000", "Color 5 name",
        "FF99CC", "Color 6 name",
        "CCFFFF", "Color 7 name"

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

    // 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');

Also, you can build you own swatch grid depending on the color number and UI requrements:

$init['textcolor_rows'] = 4;
$init['textcolor_cols'] = 2;

Largely based on this WPSE answer.

For more information and customization see this blog post.

Category: wysiwyg Time: 2016-07-28 Views: 0

Related post

  • How do you add custom HTTP headers to Chrome Custom Tabs? 2016-02-15

    With standard Android WebViews, you use WebView.loadUrl(String url, Map<String, String> additionalHttpHeaders). How do you add your additional headers with Chrome Custom Tabs? --------------Solutions------------- I'm not sure if you can send headers

  • How to add custom page elements to the WYSIWYG editor? 2015-02-06

    On a plugin-less Worpress installation the WYSIWYG editor allows to write a page down from top to bottom with style buttons (lists, font, italics, bold, add picture ...). What I am missing is the possibility to define custom page elements. Example: a

  • How to have default custom colors in the WordPress TextColor Editor 2016-07-15

    I would like to have several custom colors loaded by default in the text-color tool from WordPress, this way would be easy to modify text with the branding colors. Is it possible? Is there WP a hook or filter to do it? Before answering, I know that t

  • How do you add custom taxonomy capabilities exactly? 2011-06-29

    I can't see to get it. The capabilities fail to appear when using plugins like "Capability Manager" or "Members" to view a list of available capabilities. This is the code I'm attempting to use: add_action( 'init', 'register_taxonomy_s

  • How do you add custom page entries in Table of Contents? 2014-01-29

    I have a paper written in LaTeX with a LaTeX generated Table of Contents. I need to attach an Appendix that is generated in Word but have the Table of Contents show the entries from the Appendix. Is there some type of LaTeX command that will allow me

  • How do you add custom help text to content entry/edit screens unrelated to field? 2015-06-04

    I use field groups to break my fields into "tabbed" areas for my content editors. I would like to be able to put some kind of help text at the beginning of each of those blocks to explain the entire section of entry. Each of the fields already h

  • How can you add custom supply symbols in Eagle? 2015-07-26

    I have multiple 3.3V 5V, 5.2V, 4.8V, and 13V supplies. I tried copying a device from the supply library to mine and renaming the symbol and device, but when connecting it still refers to it as the original voltage supply device net. Whats the proper/

  • How can I add Custom Field settings to all OOB Field types? 2012-08-31

    I need to add a custom "Check Box" property to all existing OOB SharePoint column types. This should appear in the Additional Column Settings section for any column type created; this property will be used in code by many applications. Note-I do

  • How do you add a 100ms delay to all IP traffic from a Solaris 9 box? 2010-12-09

    I need to add 100ms delay to all IP traffic from my Solaris 9 box. How do I do it? Best Regards Howard --------------Solutions------------- Perhaps take a look at Trickle? How about tweaking QOS? I think that might work, but if you gave some backgrou

  • amazon ec2 - how do you add storage? 2010-06-04

    1 How do you add storage to your Amazon Ec2 servers? Say you need extra HDD space? or another drive? 2 how much does extra storage cost? 3 can I scale from Small Instance to large instance and not lose any data? --------------Solutions------------- Y

  • How do i add custom jquerry script to omega theme? 2013-01-28

    I found this code: (function ($) { Drupal.behaviors.betterExposedFiltersExpandCollapseNested = { attach:function (context, settings) { // first collapse the children $('ul.bef-tree-child').css('display', 'none'); $('.form-checkboxes.bef-select-all-no

  • How can I add (custom) modules to Appearance - Menus? 2014-06-01

    Does anyone know how I can add (custom) modules to Appearance -> Menus? (Or has a link with explanation on how to do this) so that when people change their menu in the backend they can choose what to add to their menu (Pages - Post - Links - Categori

  • How can we add custom column in control panel for any channel entry 2014-11-05

    How can we add custom column in control panel (EE verstion 2.9.2) content >> Edit for any channel entry? --------------Solutions------------- If you want a whole lot more control over column display in the channel > edit area, you should look at

  • How do I add custom CSS and JavaScript to the System Master Page? 2015-01-26

    I'm using Seattle for our System Master Page. This is working fine, except now I need to insert some custom JavaScript and CSS into it. How do I add custom JavaScript and CSS to the System Master Page? Can I still use the default master page? -------

  • How we can add background color in EXCEL for printing? 2015-09-20

    How we can add background color in EXCEL for printing? I create a small image with gray color and add it to PAGE LAYOUT-Background Image. When I see the main window of EXCEL everything is fine and all cells are gray but in print page only used cells

  • How do you add a site to the Internet Explorer Trusted Zone through GPO in server 2003? 2010-01-04

    How do you add a site to the Internet Explorer Trusted Zones through GPO in server 2003? If you do push a site through a GPO does it erase other Trusted Sites that may have been entered on the end users computer? Thank You, Keith --------------Soluti

  • How do you add Read more - link to posts? 2010-09-13

    How do you add Read more to a particular post or to all posts in a blog ? --------------Solutions------------- Read more links usually appear under following conditions: Template uses the_content() function for display. Post has <--more--> t

  • How do you add a photo album to a Facebook group? 2010-12-04

    How do you add a photo album to a Facebook group? If the option doesn't exist, is there a viable option? --------------Solutions------------- You are only able to post photos to a Facebook group if the group admin allows it. If photo uploads are allo

  • How do you add or remove printers from the Select a Printer list? 2011-07-07

    Within a Windows domain that has a mix of Windows Server 2003 and 2008 R2 print servers, how do you add or remove printers from the list of printers that Windows 7 clients retrieve at the Select a printer window? You get to this windows by selecting

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C), All Rights Reserved.

processed in 2.553 (s). 13 q(s)