Adding multiple data-* and values to element

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author king-theme

    (@kingthemes)

    Hi!

    You can do it via our API, please check this article https://docs.kingcomposer.com/add-map-param/

    Thread Starter ImagerieNumerique

    (@imagerienumerique)

    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 :

    <div class="kc_row kc-css-5981316">

    Did I missed something ?

    Thanks !

    Plugin Author king-theme

    (@kingthemes)

    Hi!

    The css data has been processed and minify in header. You can check it in <head> tag

    Thread Starter ImagerieNumerique

    (@imagerienumerique)

    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 :

    <div class="kc_row" data-key="value"> ... </div>

    Is that possible ?

    Thanks !

    Thread Starter ImagerieNumerique

    (@imagerienumerique)

    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 .= '<div class="kc-row-container' . esc_attr($container_class) . '">';

    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 :

    <div data-kc-fullheight="true" data-kc-fullwidth="row" data-key="value" data-key2="value2" class="kc_row home-row-parallax" data-kc-action="loaded">...</div>

    Thread Starter ImagerieNumerique

    (@imagerienumerique)

    And yes it works with my custom posts ??

    Thread Starter ImagerieNumerique

    (@imagerienumerique)

    Erh… I made a mistake. For the code to work with :

    $output .= '<div ' . implode( ' ', $element_attributes) . '>';

    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 :

    <div data-kc-fullheight="true" data-kc-fullwidth="row" data-key="value" data-key2="value2" class="kc_row home-row-parallax" data-kc-action="loaded">...</div>

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Adding multiple data-* and values to element’ is closed to new replies.