Support

Account

Home Forums ACF PRO Color Picker Custom Pallete

Solving

Color Picker Custom Pallete

  • I read this article on how to create a custom color palette:
    https://www.ractoon.com/2014/11/acf5-pro-color-picker-custom-palettes/

    But this is made for text color selection in a WYSIWYG Editor.

    Is there a way to create a custom color palette using Custom Fields to only have a certain number of colors within the palette selectable when the custom field is inside a post setup? Meaning, if I was creating a new post and wanted to select colors for my product, I would only have the choice of a set of colors. I don’t want a hexagram to be visible.

    If this is not possible, is my only option to create a Checkbox custom field for users to select the color (Green, Black, Grey, etc.) and then have this post on the frontend? With that being said, I will also need to post a series of ‘If’ statements that if a certain ‘color’ had been chosen, that it would post the actual color box (not the label). Would this be the only alternative method?

  • Hi @toad78

    For something like that, I believe using the checkbox or radio fields are the best way to achieve it. But if you still want to use the color picker field, please try the following workaround:

    function my_acf_collor_pallete_script() {
        ?>
        <script type="text/javascript">
        (function($){
            
            acf.add_filter('color_picker_args', function( args, $field ){
    
                // do something to args
                args.palettes = ['#5ee8bf', '#2f353e', '#f55e4f']
                
                console.log(args);
                // return
                return args;
            });
            
        })(jQuery);
        </script>
        <?php
    }
    
    add_action('acf/input/admin_footer', 'my_acf_collor_pallete_script');
    
    function my_acf_collor_pallete_css() {
        ?>
        <style>
            .acf-color_picker .iris-picker.iris-border{
                width: 200px !important;
                height: 10px !important;
            }
            .acf-color_picker .wp-picker-input-wrap,
            .acf-color_picker .iris-picker .iris-slider,
            .acf-color_picker .iris-picker .iris-square{
                display:none !important;
            }
        </style>
        <?php
    }
    
    add_action('acf/input/admin_head', 'my_acf_collor_pallete_css');

    This page should give you more idea about it: https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/.

    I hope this helps πŸ™‚

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

You must be logged in to reply to this topic.