5

Is there any way to customize the Wordpress 3.8 color picker (on the custom field types) to use only colors i will define?

I need to have only 6 colors for a client, but they do not want to have all those colors, apart from 6 gradient colors.

Will be greatful for any help... I have been trying to do it for several days, but no positive solution:(

Thank you

Dani
  • 69
  • 1
  • 1
  • 7
  • Does this answer your question? [How can I change the default font color palette in the TinyMce editor?](https://stackoverflow.com/questions/9873783/how-can-i-change-the-default-font-color-palette-in-the-tinymce-editor) – davidcondrey Feb 14 '21 at 20:37

4 Answers4

7

Wordpress 3.5+ uses the Iris colorpicker which has several options available for use.

When initializing the object just assign the palettes option with an array of colors.

var colorOptions = {
    // show a group of common colors beneath the square
    // or, supply an array of colors to customize further
    palettes: ['#4444,44','#ff2255','#559999','#99CCFF','#00c1e8','#F9DE0E','#111111','#EEEEDD']
};

jQuery('.my-color-picker-class').wpColorPicker(colorOptions);
davidcondrey
  • 34,416
  • 17
  • 114
  • 136
Obmerk Kronen
  • 15,619
  • 16
  • 66
  • 105
  • Hi, thank you sooooo much. Do i have to add this in my theme/function.php right? Or create a new plugin or in the iis.min.js? – Dani Mar 08 '14 at 14:47
  • No. This is `JS`, not PHP. You would add it as an external script and enqueue it . From your question ( how to CUSTOMIZE color palette ) I assumed you already know how to integrate that . Basically it does not matter WHERE you put it as long as it is on the page , wrapped with `jQuery( document ).ready` or similar and points to YOUR selectors . – Obmerk Kronen Mar 09 '14 at 04:10
  • Hi thanks for the further input. Well, i am not so much good with javascripts. But what i did now was to save your code in my main theme and did name it as my.new.color.js. Then in my function.php, i tried with both codes bellow, but still saw the same colors as before at the post editor – Dani Mar 09 '14 at 08:26
  • function my_scripts_color() { wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/my.new.color.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'my_scripts_color' ); – Dani Mar 09 '14 at 08:43
  • Like I wrote in my answer - you have to adjust the selectors to your field .Also make sure that you are actually calling the same script ( and not another distance that operates on your field.. ) – Obmerk Kronen Mar 09 '14 at 09:26
  • Hi Thanks, i think you meant the iris.min.js. One other question is it possible to define my own gradients in the palettes fiel? palettes: ['#444444','#ff2255','#559999','#99CCFF','#00c1e8','#F9DE0E','#111111','#EEEEDD'] – Dani Mar 09 '14 at 15:50
  • Of course ..just put your own colors .. and as many you like ( 3,4,5, whatever ) - Just take into consideration their size .. – Obmerk Kronen Mar 09 '14 at 16:44
  • Ok, sounds good. I will give it a try. The problem is, we have a set of brand of colours for gradients and we want to set it up so that editors will not be manupulating the colors which could create inconsistency. Does the code above takes its functionality from the iris.mini.js found in the /wp-admin? The point is, the colorpicker has already been integrated into wordpress and that file where i located those _palette[..] has more codes than what you delivered. Oh God, i know i sound stupid, but i was never good in javascript classes. – Dani Mar 09 '14 at 17:03
  • I said before ,, I do not know how you coded the field .. but that code should be enough. and .. DO NOT EDIT CORE FILES :. – Obmerk Kronen Mar 09 '14 at 17:11
  • Ok cool, it seems i did it... And thanks a lot for your help. One more question. Now i have gotten ridden of all those picker controls. Now supposing i have a gradient of colors #444' and '#ff0, which i want the #444 to fade into the #ff0,for people to just choose it, how can i code that in this field _palette[....] ? – Dani Mar 10 '14 at 00:04
  • In short - You can not directly. You need to make 2 Fields . Maybe it is better to post a new question for that . ( comment here with new link and I will look at it ) – Obmerk Kronen Mar 10 '14 at 01:06
  • Done:) Please here is the link : [link](http://stackoverflow.com/questions/22293343/customizing-iris-color-picker-in-wordpress) – Dani Mar 10 '14 at 06:22
  • I came accross this code which seems to be very simple to implement. IS it possible that those | $fields = array( 'red' => __('Red', 'wpse'), 'green' => __('Green', 'wpse'), 'blue' => __('Blue', 'wpse'), 'default' => __('Default', 'wpse'), );| will be values that i can just define thir gradients using CSS? Link: http://wordpress.stackexchange.com/questions/61041/add-a-checkbox-to-post-screen-that-adds-a-class-to-the-title – Dani Mar 12 '14 at 14:45
6

If your using TinyMCE editor you can modify the color palette like so.

function my_mce4_options( $init ) {
    $custom_colours = '
        "e14d43", "Color 1 Name",
        "d83131", "Color 2 Name",
        "ed1c24", "Color 3 Name",
        "f99b1c", "Color 4 Name",
        "50b848", "Color 5 Name",
        "00a859", "Color 6 Name"
    ';

    $init['textcolor_map'] = '['.$custom_colours.']';

    // Set number of color rows
    $init['textcolor_rows'] = 3;
    // Set number of color columns
    $init['textcolor_cols'] = 2

    return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');
davidcondrey
  • 34,416
  • 17
  • 114
  • 136
  • I might be missing something but isn't the iris color picker different from the tiny mce color picker? With each picker having a seperate palette set? ie. `tiny_mce_before_init` is used by the classic Wordpress WYSIWYG editor (text colours etc) with the Iris colour picker being used in the WP Customize API and plugins like Advanced custom fields? – dj.cowan Feb 14 '21 at 03:35
2

We need to wp_enqueue_script the script and wp_enqueue_style the style with add_action to the functions.php file. Just include a jQuery file and stylesheet file by this script.

// Register Scripts & Styles in Admin panel
function custom_color_picker_scripts() {
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'iris', admin_url( 'js/iris.min.js' ), array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), false, 1 );
wp_enqueue_script( 'cp-active', plugins_url('/js/cp-active.js', __FILE__), array('jquery'), '', true );

}
add_action( 'admin_enqueue_scripts', custom_color_picker_scripts);

Now create a new javascript file as like cp-active.js and keep it avobe defined “/js/cp-active.js” file path using bellows code.

jQuery('.color-picker').iris({
// or in the data-default-color attribute on the input
defaultColor: true,
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){},
// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
// show a group of common colors beneath the square
palettes: true
});

Add a textbox to your settings page with a CSS class for the color picker, where you want to dispaly the input text. I have use “color_code” for input $variable.

<input id="color_code" class="color-picker" name="color_code" type="text" value="" />

Please see more details on Add jQuery Color Picker WordPress Theme or Plugin

Community
  • 1
  • 1
csehasib
  • 365
  • 3
  • 7
-6

Here's a quick & dirty solution:

  1. Go to wp-admin/js/iris.min.js
  2. Search the palette colors there (about 1/3 from the beginning of the file). I found this:
    _palettes:["#000","#fff","#d33","#d93","#ee2","#81d742","#1e73be","#8224e3"]
  3. Replace these defaults with your own custom colors. I left black and white and then added our brand colors instead of #d33 and the rest.
  4. Upload to server.

Works for now. But haven't tried yet if this survives the next Wordpress update.

Outi Ugas
  • 1