King Composer - Best page builder plugin for wordpress

kingcomposer.php

<?php

// Reference: https://docs.kingcomposer.com/custom-map-elements/

/**
 * Add specific class or id into CONTAINER and COLUMN KINGCOMPOSER
 * @since 1.0
 * @filter shortcode_kc_column
*/
add_filter( 'shortcode_kc_column', 'ic_helper_kc_column_filter' );
function ic_helper_kc_column_filter( $atts ){
    
    if( ! is_plugin_active('kingcomposer/kingcomposer.php') ){
        return;
    }

    if( strpos($atts['col_container_class'], 'ic_col_container_class') === false ){
        $atts[ 'col_container_class' ] .= ' ic_col_container_class ';
    }

    if( strpos($atts['col_class'], 'ic_col_class') === false ){
        $atts[ 'col_class' ] .= ' ic_col_class ';
    }

    if( strpos($atts['col_id'], 'ic_col_id') === false ){
        $atts[ 'col_id' ] .= ' ic_col_id ';
    }
    var_dump($atts);
	return $atts;

}


/**
 * Add custom fields to column and row
 * @since 1.0
 * @filter kc_add_map
*/
add_filter('kc_add_map', 'my_add_map_filter', 0 /*priority index*/ , 2 /*number of params*/ );
function my_add_map_filter( $atts, $base ){
    
  if( ! is_plugin_active('kingcomposer/kingcomposer.php') ){
      return;
  }
	
	if( $base == 'kc_column' ){ // you may use kc_row for ROW
        
        // add fields to general tab
        $general_map = array(
            array(
                'name' => 'xtra_class',
                'label' => __(' Xtra Class', 'ichelper'),
                'type' => 'text'
            ),
        );
		
		if( isset( $atts['params']['general'][0] ) ){
            $atts['params']['general'] = $general_map;
        }

        // add fields to styling tab
		$css_map = array(
			array(
				'screens' => "any",
				'Typography' => array(
					array('property' => 'color', 'label' => 'Color'),
					array('property' => 'font-size', 'label' => 'Font Size'),
					array('property' => 'font-weight', 'label' => 'Font Weight'),
					array('property' => 'font-style', 'label' => 'Font Style'),
					array('property' => 'font-family', 'label' => 'Font Family'),
					array('property' => 'text-align', 'label' => 'Text Align'),
					array('property' => 'text-shadow', 'label' => 'Text Shadow'),
					array('property' => 'text-transform', 'label' => 'Text Transform'),
					array('property' => 'text-decoration', 'label' => 'Text Decoration'),
					array('property' => 'line-height', 'label' => 'Line Height'),
					array('property' => 'letter-spacing', 'label' => 'Letter Spacing'),
					array('property' => 'overflow', 'label' => 'Overflow'),
					array('property' => 'word-break', 'label' => 'Word Break'),					
				),

				//Background group
				'Background' => array(
					array('property' => 'background'),
				),

				//Box group
				'Box' => array(
					array('property' => 'margin', 'label' => 'Margin'),
					array('property' => 'padding', 'label' => 'Padding'),
					array('property' => 'border', 'label' => 'Border'),
					array('property' => 'width', 'label' => 'Width'),
					array('property' => 'height', 'label' => 'Height'),
					array('property' => 'border-radius', 'label' => 'Border Radius'),
					array('property' => 'float', 'label' => 'Float'),
					array('property' => 'display', 'label' => 'Display'),
					array('property' => 'box-shadow', 'label' => 'Box Shadow'),
					array('property' => 'opacity', 'label' => 'Opacity'),
				),
				
				//Custom code css
				'Custom' => array(
					array('property' => 'custom', 'label' => 'Custom CSS')
				)
			),
			array(
				"screens" => "1024,999,767,479",
				'Typography' => array(
					array('property' => 'font-size', 'label' => 'Font Size'),
					array('property' => 'text-align', 'label' => 'Text Align'),
					array('property' => 'line-height', 'label' => 'Line Height'),
					array('property' => 'word-break', 'label' => 'Word Break'),
					array('property' => 'custom', 'label' => 'Custom CSS')
				),

				//Background group
				'Background' => array(
					array('property' => 'background'),
				),

				//Box group
				'Box' => array(
					array('property' => 'width', 'label' => 'Width'),
					array('property' => 'margin', 'label' => 'Margin'),
					array('property' => 'padding', 'label' => 'Padding'),
					array('property' => 'border', 'label' => 'Border'),
					array('property' => 'height', 'label' => 'Height'),
					array('property' => 'border-radius', 'label' => 'Border Radius'),
					array('property' => 'float', 'label' => 'Float'),
					array('property' => 'display', 'label' => 'Display'),
				),
			)
		);
		
		if( isset( $atts['params']['styling'][0] ) ){
            //$atts['params']['styling'][0]['options'] = $css_map;
        }
		
    }
	
	return $atts;
	
}