Adding data attributes to radio buttons
-
Is there any way we can add in data-attributes to radio buttons? Thanks so much for your advise!
-
Not sure if anyone has encountered this before. Would like to hear some advise. Thanks in advance.
Hello again, Stanley:
Not sure what your intended use is for data-attributes is on the individual radio buttons, but this is a little closer to a solution. Perhaps someone can help figure this out the rest of the way.
In the following, we are removing the action that registers the checkbox shortcode, then adding a similar function and callback found in the plugin at
modules/checkbox.php
. In this function, we are adding the data-attribute:data-children
on each radio button.I’m not sure on short notice how to set custom data-attributes on the individual radio buttons.
This gets added to your
functions.php
file.Ctrl+F or Cmmd+f to search for the line:
'data-children' => $value,
to see what was changed./** * Testing adding data-attribute on Contact Form 7 * */ remove_action( 'wpcf7_init', 'wpcf7_add_shortcode_checkbox' ); add_action( 'wpcf7_init', 'wpcf7_add_shortcode_checkbox2' ); function wpcf7_add_shortcode_checkbox2() { wpcf7_add_shortcode( array( 'checkbox', 'checkbox*', 'radio' ), 'wpcf7_checkbox_shortcode_handler2', true ); } function wpcf7_checkbox_shortcode_handler2( $tag ) { $tag = new WPCF7_Shortcode( $tag ); if ( empty( $tag->name ) ) return ''; $validation_error = wpcf7_get_validation_error( $tag->name ); $class = wpcf7_form_controls_class( $tag->type ); if ( $validation_error ) $class .= ' wpcf7-not-valid'; $label_first = $tag->has_option( 'label_first' ); $use_label_element = $tag->has_option( 'use_label_element' ); $exclusive = $tag->has_option( 'exclusive' ); $free_text = $tag->has_option( 'free_text' ); $multiple = false; if ( 'checkbox' == $tag->basetype ) $multiple = ! $exclusive; else // radio $exclusive = false; if ( $exclusive ) $class .= ' wpcf7-exclusive-checkbox'; $atts = array(); $atts['class'] = $tag->get_class_option( $class ); $atts['id'] = $tag->get_id_option(); $atts['data-parent'] = $tag->get_option('data-parent'); $tabindex = $tag->get_option( 'tabindex', 'int', true ); if ( false !== $tabindex ) $tabindex = absint( $tabindex ); $html = ''; $count = 0; $values = (array) $tag->values; $labels = (array) $tag->labels; if ( $data = (array) $tag->get_data_option() ) { if ( $free_text ) { $values = array_merge( array_slice( $values, 0, -1 ), array_values( $data ), array_slice( $values, -1 ) ); $labels = array_merge( array_slice( $labels, 0, -1 ), array_values( $data ), array_slice( $labels, -1 ) ); } else { $values = array_merge( $values, array_values( $data ) ); $labels = array_merge( $labels, array_values( $data ) ); } } $defaults = array(); $default_choice = $tag->get_default_option( null, 'multiple=1' ); foreach ( $default_choice as $value ) { $key = array_search( $value, $values, true ); if ( false !== $key ) { $defaults[] = (int) $key + 1; } } if ( $matches = $tag->get_first_match_option( '/^default:([0-9_]+)$/' ) ) { $defaults = array_merge( $defaults, explode( '_', $matches[1] ) ); } $defaults = array_unique( $defaults ); $hangover = wpcf7_get_hangover( $tag->name, $multiple ? array() : '' ); foreach ( $values as $key => $value ) { $class = 'wpcf7-list-item'; $checked = false; if ( $hangover ) { if ( $multiple ) { $checked = in_array( esc_sql( $value ), (array) $hangover ); } else { $checked = ( $hangover == esc_sql( $value ) ); } } else { $checked = in_array( $key + 1, (array) $defaults ); } if ( isset( $labels[$key] ) ) $label = $labels[$key]; else $label = $value; $item_atts = array( 'type' => $tag->basetype, 'name' => $tag->name . ( $multiple ? '[]' : '' ), 'value' => $value, 'data-children' => $value, 'checked' => $checked ? 'checked' : '', 'tabindex' => $tabindex ? $tabindex : '' ); $item_atts = wpcf7_format_atts( $item_atts ); if ( $label_first ) { // put label first, input last $item = sprintf( '<span class="wpcf7-list-item-label">%1$s</span>?<input %2$s />', esc_html( $label ), $item_atts ); } else { $item = sprintf( '<input %2$s />?<span class="wpcf7-list-item-label">%1$s</span>', esc_html( $label ), $item_atts ); } if ( $use_label_element ) $item = '<label>' . $item . '</label>'; if ( false !== $tabindex ) $tabindex += 1; $count += 1; if ( 1 == $count ) { $class .= ' first'; } if ( count( $values ) == $count ) { // last round $class .= ' last'; if ( $free_text ) { $free_text_name = sprintf( '_wpcf7_%1$s_free_text_%2$s', $tag->basetype, $tag->name ); $free_text_atts = array( 'name' => $free_text_name, 'class' => 'wpcf7-free-text', 'tabindex' => $tabindex ? $tabindex : '' ); if ( wpcf7_is_posted() && isset( $_POST[$free_text_name] ) ) { $free_text_atts['value'] = wp_unslash( $_POST[$free_text_name] ); } $free_text_atts = wpcf7_format_atts( $free_text_atts ); $item .= sprintf( ' <input type="text" %s />', $free_text_atts ); $class .= ' has-free-text'; } } $item = '<span class="' . esc_attr( $class ) . '">' . $item . '</span>'; $html .= $item; } $atts = wpcf7_format_atts( $atts ); $html = sprintf( '<span class="wpcf7-form-control-wrap %1$s"><span %2$s>%3$s</span>%4$s</span>', sanitize_html_class( $tag->name ), $atts, $html, $validation_error ); return $html; }
- The topic ‘Adding data attributes to radio buttons’ is closed to new replies.