Can't get to work a custom field / property to the container or columns

[Igcorreia]

Is there a way to use this:
https://theme-fusion.com/documentation/fusion-builder/functions/fusion_builder_map/

but add a CUSTOM FIELD to the container style section?

Something simple like a drop-down with 2 styles: dark and light . So the user could add containers and choose what style to use.

Than we would need to add like a custom class to the container. Is this doable?

[mikka23]

Hi @Igcorreia

That is possible using some filters. The first filter is used to add the option to the back-end so the user can change it between dark and light. The second part is getting that new parameter value and using it on the front-end. That can be done in a few ways but for this specific example we already have a parameter which we use for adding custom classes to the front-end. So you can just add the class to that.

Example code:

/**
 * Filter already set maps, add in a new option to container.
 */
function filter_available_element( $fusion_builder_elements ) {
	if ( isset( $fusion_builder_elements['fusion_builder_container'] ) ) {
		$fusion_builder_elements['fusion_builder_container']['params'][] = array(
			'type'        => 'radio_button_set',
			'heading'     => esc_attr__( 'Container Design Mode', 'fusion-builder' ),
			'description' => esc_attr__( 'Controls whether the container should be dark or light.', 'fusion-builder' ),
			'param_name'  => 'container_mode',
			'value'       => array(
				'light' => esc_attr__( 'Light', 'fusion-builder' ),
				'dark'  => esc_attr__( 'Dark', 'fusion-builder' ),
			),
			'default'     => 'light',
			'group'       => esc_attr__( 'Design', 'fusion-builder' ),
		);
	}
	return $fusion_builder_elements;
}
add_filter( 'fusion_builder_all_elements', 'filter_available_element' );

/**
 * Filter the parameters, check for container_mode and if set add to class parameter.
 */
function filter_container_parameters( $out, $pairs, $atts, $shortcode ) {

	// If set, use it, otherwise set to default.
	$out['container_mode'] = isset( $atts['container_mode'] ) ? $atts['container_mode'] : 'light';

	// Set to class parameter which container already has and uses.
	if ( ! isset( $out['class'] ) || '' === $out['class'] ) {
		$out['class'] = 'my-class-' . $out['container_mode'];
	} else {
		$out['class'] .= ' my-class-' . $out['container_mode'];
	}
	return $out;
}
add_filter( 'shortcode_atts_fusion_builder_container', 'filter_container_parameters', 10, 4 );

[Igcorreia]

Worked like a charm. Please add this to the Fusion documentation as an example.

[mikka23]

Glad to hear 👍

We do also have plans to re-do and expand our developer documentation.