Adding a Color Picker Field Type

Good day to all,

Does anyone know how to add a color picker as a field type when creating custom meta data fields for page templates?

For example a user can add a content to a 'text' field and then select a color from a color picker to style it.

Thanks in advance!

Hi Mike,

Here is how you can use the WP color picker. First you will have to enqueue and boot the color picker as follow:

add_action( 'admin_enqueue_scripts', 'example_datepicker_field_assets' );

function example_datepicker_field_assets() {

 $register_fields = beans_get_fields( 'post_meta', 'example_section_id' );

 // Only load on pages where the colorpicker is used.
  if ( beans_in_multi_array( 'example-color-picker', (array) $register_fields ) ) {

   wp_enqueue_style( 'wp-color-picker' );
    wp_add_inline_script( 'wp-color-picker', 'jQuery( ".example-color-picker" ).wpColorPicker();' );

  }

}

Not that the script is only enqueued and booted if one of your fields has the example-color-picker class.

So all that is left is adding the example-color-picker to a usual text field and it will do the magic. Here is an example:

add_action( 'admin_init', 'example_custom_fields' );

function example_custom_fields() {

 $fields = array(
    array(
      'id'         => 'example',
      'label'      => __( 'Example', 'example-domain' ),
      'type'       => 'text',
     'default'    => '#c4c4c4',
      'attributes' => array(
        'class' => 'example-color-picker',
      ),
  ) );

  beans_register_post_meta( $fields, array( 'post' ), 'example_section_id', array( 'title' => 'Example' ) );

}

Note that we simply registered a text field type but we add the attributes key with the key value class and example-color-picker. The will tell our example_datepicker_field_assets() function "hey, I am color picker so enqueue asset and fire me please :-)"

Happy coding buddy,

Thanks so much Thierry i'll give this a go. I ended up trying ACF which has the color picker option however I want to try keep plugin free as far as possible 🙂 - the learning curve with ACF pretty much flatlines which i'm not too happy about 😉

Hope all is good your side, sorry didn't get to catch up when you were back in CT. Next Time! ps. nice lecture on Code Quality, some valuable info there!

Cheers,

Hey Mike, did you get a chance to test the color picker solution?

Yep all good on my side, how are you doing? 🙂

Hey Thierry it worked like a charm!

I'm doing good, got a couple WP projects on the go so learning in the deep end! Thanks so much for your help, I know some question are more WP related than Beans.

Glad you're doing good!

Cheers,

My pleasure mate, happy to help where I can.

Keep well Mike,

Can't Beans support color picker filed out of the box like this ...

                array(
                        'id' => 'field_id4',
                        'label' => 'Field label',
                        'description' => 'Field description',
                        'type' => 'color-picker',
                        // 'multiple' => bool
                ),   

Hi CodeFactry,

Thierry' answer was without changing the Beans Core. As long as i understand Beans, until now there is no way to add an extra field out of the box without adding a file in Fields API.

Here is how Fields API works:

• Whatever you type in that 'type => 'color-picker' when you register a field, Beans check for a file with same name you typed in this path '/lib/api/fields/types/color-picker.php' and require that file if exist. In this case file does not exist and it will output only field label and description.

Ok, let's create one then.

• Create a file 'color-picker.php' on the directory path '/lib/api/fields/types/...'. Name of the file should be the same as you use to register the field type.

• After we created this file now Beans will use this file to render the field. Also will create 2 action hooks, 'beans_field_enqueue_scripts_color-picker' and 'beans_field_color-picker'.

• The first one is to hook scripts and styles for this field, and the second one is to hook the field structure. Since this field uses extra scripts and styles, we will use both hooks.

Let's build the field:

Open 'color-picker.php' and write this code:

<?php
beans_add_smart_action( 'beans_field_enqueue_scripts_color-picker', 'example_color_picker_assets' );
/*
 * Color Picker Assets.
 */
function example_color_picker_assets() {

    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script( 'wp-color-picker' );

    wp_add_inline_script( 'wp-color-picker', 'jQuery( ".example-color-picker" ).wpColorPicker();' );

}

beans_add_smart_action( 'beans_field_color-picker', 'example_field_color_picker' );
/*
 * Color picker structure.
 */
function example_field_color_picker( $field ) {

   // build field.
   echo sprintf( '<input type="text" class="example-color-picker" name="%1$s" value="%2$s" data-default-color="%3$s" %4$s/>',
       esc_attr( $field['name'] ),
       esc_attr( $field['value'] ),
       esc_attr( $field['default'] ),
       beans_esc_attributes( $field['attributes'] )
   );

}

Usage:

array(
 'id'          => 'beans_background_color_field',
  'label'       => 'Background color',
  'description' => 'Change the background color',
 'type'        => 'color-picker', // same as our file we created `color-picker.php`.
 'default'     => '#fafafa', // used to specify default color.
),

Now we have a new field type!

Jozi B, it is amazing ... Though I have just started learning Beans ... and I am amazed with the features ... Thanks for ur nice effort to make a nice comment ... Thanks again ... I'l try it and let you know if I face any issue ...