Support

Account

Home Forums Feature Requests Customise Color Picker Swatches

Solving

Customise Color Picker Swatches

  • Hello all,

    I was just wondering if there is a way to customise the 8 swatches that appear at the bottom of the colour picker when selecting a colour?

    Would be great o put my client’s colours in there so that it is just that little easier for them to not stuff up my design πŸ˜‰

  • The color picker uses Iris. You can send a palette to existing Iris objects via Javascript as described in the Iris documentation. Here’s some example code to change all of the swatches/palettes on the post edit page. Put this in your theme’s functions file:

    function load_javascript_on_admin_edit_post_page() {
      global $parent_file;
    
      // If we're on the edit post page.
      if ($parent_file == 'post-new.php' ||
          $parent_file == 'edit.php') {
        echo "
          <script>
          jQuery(document).live('acf/setup_fields', function(e, div){
            jQuery('.color_picker').each(function() {
              jQuery(this).iris({
                palettes: ['#125', '#459', '#78b', '#ab0', '#de3', '#f0f']
              });
            });
          });
          </script>
        ";
      }
    }
    add_action('in_admin_footer', 'load_javascript_on_admin_edit_post_page');
  • I discovered something else: you can use the Iris change callback to make it so the ‘Current Color’ swatch (the one this you click to open the color picker) gets updated live along with the color changes instead of needing a Save and page refresh before updating.

    Here’s the updated code doing both the custom swatches and ‘Current Color’ updating:

    function load_javascript_on_admin_edit_post_page() {
      global $parent_file;
    
      // If we're on the edit post page.
      if ($parent_file == 'post-new.php' ||
          $parent_file == 'edit.php') {
        echo "
          <script>
          jQuery(document).ready(function(){
            jQuery('.color_picker').iris({
              palettes: ['#125', '#459', '#78b', '#ab0', '#de3', '#f0f'],
              change: function(event, ui){
                jQuery(this).parents('.wp-picker-container').find('.wp-color-result').css('background-color', ui.color.toString());
              }
            });
          });
          </script>
        ";
      }
    }
    add_action('in_admin_footer', 'load_javascript_on_admin_edit_post_page');
  • @matthew McVickar has a great answer and it worked for me with minor modification. $parent_file has query parameters appended to it sometimes:

    function load_javascript_on_admin_edit_post_page() {
    	global $parent_file;
    
      // If we're on the edit post page.
    	if (
    	  strpos($parent_file, 'post-new.php') !== -1 ||
    	  strpos($parent_file, 'edit.php') !== -1 ||
    	  strpos($parent_file, 'post.php') !== -1
    	) {
    		echo "
    		  <script>
    		  jQuery(document).ready(function(){
    			jQuery('.color_picker').iris({
    			  palettes: ['#031649', '#FFF', '#CCC', '#999', '#666', '#333', '#000'],
    			  change: function(event, ui){
    				jQuery(this).parents('.wp-picker-container').find('.wp-color-result').css('background-color', ui.color.toString());
    			  }
    			});
    		  });
    		  </script>
    		";
    	}
    }
    add_action('in_admin_footer', 'load_javascript_on_admin_edit_post_page');
  • Oops, I had a syntax error, PHP’s strpos doesn’t return -1 if a string isn’t found, it returns FALSE.

    function load_javascript_on_admin_edit_post_page() {
    	global $parent_file;
    
      // If we're on the edit post page.
    	if (
    	  strpos($parent_file, 'post-new.php') !== -1 ||
    	  strpos($parent_file, 'edit.php') !== -1 ||
    	  strpos($parent_file, 'post.php') !== -1
    	) {
    		echo "
    		  <script>
    		  jQuery(document).ready(function(){
    			jQuery('.color_picker').iris({
    			  palettes: ['#031649', '#FFF', '#CCC', '#999', '#666', '#333', '#000'],
    			  change: function(event, ui){
    				jQuery(this).parents('.wp-picker-container').find('.wp-color-result').css('background-color', ui.color.toString());
    			  }
    			});
    		  });
    		  </script>
    		";
    	}
    }
    add_action('in_admin_footer', 'load_javascript_on_admin_edit_post_page');
  • I’m trying this with version 5, and I had to adjust this a little — to change the jQuery selector from ‘.color_picker’ to ‘.acf-color_picker’. Here’s my code:

    function load_javascript_on_admin_edit_post_page() {
    	global $parent_file;
    
      // If we're on the edit post page.
    	if (
    	  strpos($parent_file, 'post-new.php') !== -1 ||
    	  strpos($parent_file, 'edit.php') !== -1 ||
    	  strpos($parent_file, 'post.php') !== -1
    	) {
    		echo "
    		  <script>
    		  jQuery(document).ready(function(){
    			jQuery('.acf-color_picker').iris({
    			  palettes: ['#e40571', '#4b63a4', '#ffcb05', '#fff', '#000'],
    			  change: function(event, ui){
    				jQuery(this).parents('.wp-picker-container').find('.wp-color-result').css('background-color', ui.color.toString());
    			  }
    			});
    		  });
    		  </script>
    		";
    	}
    }
    add_action('in_admin_footer', 'load_javascript_on_admin_edit_post_page');
  • Update. My bad about the strpos() !== -1. Instead, those should be strpos() !== FALSE. Also, I was finding errors on some other jQuery-heavy admin pages, so I added a javascript check for the ‘.acf-color_picker’ element. Here’s my revised code:

    function load_javascript_on_admin_edit_post_page() {
    	global $parent_file;
    
      // If we're on the edit post page.
    	if (
    	  strpos($parent_file, 'post-new.php') !== FALSE ||
    	  strpos($parent_file, 'edit.php') !== FALSE ||
    	  strpos($parent_file, 'post.php') !== FALSE
    	) {
    		echo "
    		  <script>
    		  jQuery(document).ready(function($){
    			if ($('.acf-color_picker').length) {
    			$('.acf-color_picker').iris({
    			  palettes: ['#e40571', '#4b63a4', '#ffcb05', '#fff', '#000'],
    			  change: function(event, ui){
    				$(this).parents('.wp-picker-container').find('.wp-color-result').css('background-color', ui.color.toString());
    			  }
    			});
    			}
    		  });
    		  </script>
    		";
    	}
    }
    add_action('in_admin_footer', 'load_javascript_on_admin_edit_post_page');
  • Kudos to you guys for trying to solve this. I tried above solution but can’t get it to work 100%.

    I managed to solve to things:

    1. When changing palettes the mode in iris changes aswell. i solved this by adding: mode: ‘hsv’,(See documentation: http://automattic.github.io/Iris/). This is standard in wpColorPicker that acf uses.
    2. Sometimes the values in the hex value box didn’t change when i did changes on the color picker, i think that is solved now.

    See my revised jquery code below:

     <script>
            jQuery(document).ready(function($){
              if ($('.acf-color_picker').length) {
                $('.acf-color_picker').each(function() {
                  $( this ).iris({
                    mode: 'hsv',
                    palettes: ['#e40571', '#4b63a4', '#ffcb05', '#fff', '#000'],
                    change: function(event, ui){
                      $(this).find('.wp-color-result').css('background-color', ui.color.toString());
                      $(this).find('.wp-color-picker').val(ui.color.toString());
                    }
                  });
                });
              }
            });
            </script>

    HOWEVER
    I use Flexible Content for some of my color picker fields and those are not initialized on page load. Therefore above hack doesn’t affect them.

    I think the best solution is to do these changes when ACF initializes.

    The only way i could accomplish this was to change the file: /wp-content/plugins/advanced-custom-fields-pro/js/input.min.js

    Which isn’t good since it will get removed on updates.

    I would really appreciate if Elliott or someone could help to solve this via a function or a plugin.

    Best regards
    Anton

  • Eureka!

    Thanks to @ractoon and this snippet i managed to solve it:
    http://www.ractoon.com/2014/11/acf5-pro-color-picker-custom-palettes/

    This is how my function looks right now:

    In my child themes functions.php i declare the colors:

    // Adds client custom colors to WYSIWYG editor and ACF color picker. 
    $client_colors = array(
        "222222",
        "8dc4d5",
        "e1523d",
        "eeeeee",
        "323232"
    );

    Then in my main themes functions.php:

    global $client_colors;
      array_push($client_colors, "FFFFFF", "000000");
    
      function change_acf_color_picker() {
    
        global $parent_file;
        global $client_colors;
        $client_colors_acf = array();
    
        foreach ( $client_colors as $value ) {
          $client_colors_acf[] = '#'.$value;
        }
    
        $client_colors_acf_jquery = json_encode($client_colors_acf);
    
        echo "<script>
        (function($){
          acf.add_action('ready append', function() {
            acf.get_fields({ type : 'color_picker'}).each(function() {
              $(this).iris({
                color: $(this).find('.wp-color-picker').val(),
                mode: 'hsv',
                palettes: ".$client_colors_acf_jquery.",
                change: function(event, ui) {
                  $(this).find('.wp-color-result').css('background-color', ui.color.toString());
                  $(this).find('.wp-color-picker').val(ui.color.toString());
                }
              });
            });
          });
        })(jQuery);
      </script>";
      }
    
      add_action( 'acf/input/admin_head', 'change_acf_color_picker' );

    One problem remains though: when i click(not drag circle) on the colorpicker, it seems to hold the old color value from when i’ve grabbed the circle and dragged it around. This becomes obvious when i drag the vertical slider.

  • Also solved a problem where the value in the colorpicker (not the input field) gets nulled after each post update.

    Above code updated.

  • ABOVE CODE SLOWS DOWN BACKEND!

    I’m using nested Flexible Content fields and this function really slows down my backend when dealing with alot of fields. Also it slows down the Media-modal that comes up when you choose a picture for example.

    It seems append is called to often? I can’t figure out why it slows down at the moment, i’m putting this on ice until i have more time.

    Hopefully Elliot makes this functionality part of core!

  • Praise and honor to you AC. Thanks for the code!

  • Maybe this alternate solution is a little bit faster. It simply change the default option of the colorpicker when there are acf fields on the page.

    
    function change_acf_color_picker() {
      // Adds client custom colors to WYSIWYG editor and ACF color picker.
      $client_colors = array(
        "#222222",
        "#8dc4d5",
        "#e1523d",
        "#eeeeee",
        "#323232",
        "#ffffff",
        "#000000"
      );
    
      echo "<script>
      (function($){
        try {
          $.wp.wpColorPicker.prototype.options = {
            palettes: " . json_encode($client_colors) . "
          };
        }
        catch (e) {}
      })(jQuery)
      </script>";
    }
    
    add_action( 'acf/input/admin_head', 'change_acf_color_picker' );
    
  • I got stuck on this today, and all of these solutions seems a little overkill to me. I came up with this, which seems to be working fine for me. I’ve got mine pulling in the palettes from an options page, but the general idea should still be clear.

    function acf_iris_palette(){
      $palette = json_encode( array_column( get_field('palette', 'options'), 'colour' ) );
      ?>
    	<script type="text/javascript">
        jQuery(function($){
          var acfColourPicker = $('[data-type="color_picker"] input[type="text"]');
          if ( acfColourPicker.length )
            acfColourPicker.iris('option', 'palettes', <?php echo $palette; ?>);
        });
    	</script>
      <?php
    }
    add_action( 'admin_print_scripts', 'acf_iris_palette', 90 );
    

    Hope that helps somebody πŸ™‚

    Edit: Apologies, I realise this doesn’t work on repeater fields or other dynamically generated fields. I’ll update this when I fix it.

  • @idflood, this was working great for me until ACF 5.3.3 and above.

    Now it no longer loads the custom palette. Any chance someone has a fix or update for this?

  • Quick heads up. Tested idflood‘s solution and it was working locally but not online (same Wp configuration, didn’t understand why) and got it working with AC‘s answer from December 19, 2014, both locally and online.
    If it can help.

  • Recently updated my solution at https://www.ractoon.com/2014/11/acf5-pro-color-picker-custom-palettes/ to address performance issues and compatibility with recent ACF PRO versions. Can give it a shot and see if it works for you as well.

  • Just for future reference, this has been added in v5.3.6.

    At bottom of page here:
    https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/

    acf.add_filter('color_picker_args', function( args, $field ){
    	
    	// do something to args
    	args.palettes = ['#5ee8bf', '#2f353e', '#f55e4f']
    	
    	
    	// return
    	return args;
    			
    });
  • This is a lovely answer, thank you SudoCat

Viewing 19 posts - 1 through 19 (of 19 total)

The topic ‘Customise Color Picker Swatches’ is closed to new replies.