Title: Adding multiple data-* and values to element Last modified: August 31, 2016 --- # Adding multiple data-* and values to element * Resolved [ImagerieNumerique](https://wordpress.org/support/users/imagerienumerique/) * (@imagerienumerique) * [9 years, 11 months ago](https://wordpress.org/support/topic/adding-multiple-data-and-values-to-element/) * Hi, * That would be awesome to add custom data-* attributes and value to any element. * It could be done through a text field in which it could declare – inline – the properties and their values : * `data-set1="value 1" data-set2="value 2" ...` * Thanks ! * [https://wordpress.org/plugins/kingcomposer/](https://wordpress.org/plugins/kingcomposer/) Viewing 7 replies - 1 through 7 (of 7 total) * Plugin Author [king-theme](https://wordpress.org/support/users/kingthemes/) * (@kingthemes) * [9 years, 11 months ago](https://wordpress.org/support/topic/adding-multiple-data-and-values-to-element/#post-7417579) * Hi! * You can do it via our API, please check this article [http://docs.kingcomposer.com/add-map-param/](http://docs.kingcomposer.com/add-map-param/) * Thread Starter [ImagerieNumerique](https://wordpress.org/support/users/imagerienumerique/) * (@imagerienumerique) * [9 years, 11 months ago](https://wordpress.org/support/topic/adding-multiple-data-and-values-to-element/#post-7417698) * Hi! * I managed to create text field with this : * ``` function kc_add_data(){ global $kc; $kc->add_map_param( 'kc_row', array( 'name' => 'data-test', 'label' => __('Extra Data-test', 'KingComposer'), 'type' => 'text', 'admin_label' => true, 'description' => __('Data-test', 'KingComposer') ), 1 ); } ``` * hHen I look at the content in classic mode, I can see the map param and its value in the shortcode : * `[kc_row data-test="test data" css="kc-css-5981316|background-color: #ffffde; padding-bottom: 2rem; padding-top: 2rem;"]` * but it does not render in the frontend : * `
` * Did I missed something ? * Thanks ! * Plugin Author [king-theme](https://wordpress.org/support/users/kingthemes/) * (@kingthemes) * [9 years, 11 months ago](https://wordpress.org/support/topic/adding-multiple-data-and-values-to-element/#post-7417705) * Hi! * The css data has been processed and minify in header. You can check it in tag * Thread Starter [ImagerieNumerique](https://wordpress.org/support/users/imagerienumerique/) * (@imagerienumerique) * [9 years, 11 months ago](https://wordpress.org/support/topic/adding-multiple-data-and-values-to-element/#post-7417707) * Hi! * I’m sorry but I don’t understand your answer. For me ‘data’ is not CSS but dom element attribute. * Maybe I didn’t get what add_map_param() really do. * I thought that with this function I could add custom data-* attributes to row element on the frontend for the row to be rendered like this : * `
...
` * Is that possible ? * Thanks ! * Thread Starter [ImagerieNumerique](https://wordpress.org/support/users/imagerienumerique/) * (@imagerienumerique) * [9 years, 11 months ago](https://wordpress.org/support/topic/adding-multiple-data-and-values-to-element/#post-7417708) * OK. I got it, thank to wpeffects posts and your answer. * For those who need to get it work here are the steps you need to follow : * **Step 1** * Add map param in your functions.php (or any file.php included in functions.php with _locale\_template();_ ) : * ``` add_action('init', 'kc_add_data', 99 ); function kc_add_data(){ global $kc; $kc->add_map_param( 'kc_row', array( 'name' => 'my_custom_data', 'label' => __('Extra Data', 'KingComposer'), 'type' => 'text', 'admin_label' => true, 'description' => __('Extra Data (ex: data-key="value")', 'KingComposer') ), 1 ); } ``` * The code above adds a text field in row settings (kc_row). * **Step 2** * Create a folder called kingcomposer in your activated template directory. Then copy kc_row.php from _wp-content/plugins/kingcomposer/shortcodes/_ folder into your template’s kingcomposer folder. * **Step 3** * Edit your kc_row.php and before : * `$output .= '
';` * add : * ``` if( !empty( $atts['my_custom_data'] ) ) { $custom_datas = explode(',', esc_attr( $atts['xdata'] )); foreach($custom_datas as $custom_data) { $element_attributes[] = $custom_data; } } ``` * Now the code part is done, you can go check if the fiel exists in row param in King Composer on any page. Be aware that kc_row map is for rows at root of your post / page. If you need to add extra data-* attributes to rows inside, replace kc_row by kc_row_inner and copy and edit kc_row_inner.php * **One last thing !** * The code above lets you add multiple data attributs with couple key=value coma separated. No need to write quotes, it is added automatically : * `data-key=value,data-key2=value2` * Renders like this : * `
...
` * Thread Starter [ImagerieNumerique](https://wordpress.org/support/users/imagerienumerique/) * (@imagerienumerique) * [9 years, 11 months ago](https://wordpress.org/support/topic/adding-multiple-data-and-values-to-element/#post-7417709) * And yes it works with my custom posts 🙂 * Thread Starter [ImagerieNumerique](https://wordpress.org/support/users/imagerienumerique/) * (@imagerienumerique) * [9 years, 11 months ago](https://wordpress.org/support/topic/adding-multiple-data-and-values-to-element/#post-7417711) * Erh… I made a mistake. For the code to work with : * `$output .= '
';` * **Step 3** * ``` if( !empty( $atts['xdata'] ) ) { $custom_datas = explode(',', $atts['xdata']); foreach($custom_datas as $custom_data) { $element_attributes[] = trim( $custom_data); } } ``` * DO NOT use _esc\_attr();_ with **$atts[‘my_custom_data’]** * and the value of your text field should be encapsulated with double quotes : * `data-key="value",data-key2="value2"` * Then, data attributes are rendered like this : * `
...
` Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘Adding multiple data-* and values to element’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/kingcomposer_747172.svg) * [Page Builder: KingComposer - Free Drag and Drop page builder by King-Theme](https://wordpress.org/plugins/kingcomposer/) * [Frequently Asked Questions](https://wordpress.org/plugins/kingcomposer/#faq) * [Support Threads](https://wordpress.org/support/plugin/kingcomposer/) * [Active Topics](https://wordpress.org/support/plugin/kingcomposer/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/kingcomposer/unresolved/) * [Reviews](https://wordpress.org/support/plugin/kingcomposer/reviews/) ## Tags * [data-attribute](https://wordpress.org/support/topic-tag/data-attribute/) * [html](https://wordpress.org/support/topic-tag/html/) * [King Composer](https://wordpress.org/support/topic-tag/king-composer/) * 7 replies * 2 participants * Last reply from: [ImagerieNumerique](https://wordpress.org/support/users/imagerienumerique/) * Last activity: [9 years, 11 months ago](https://wordpress.org/support/topic/adding-multiple-data-and-values-to-element/#post-7417711) * Status: resolved