Link Search Menu Expand Document
Marie Comet resources

Elementor Controls

Table of contents

  1. Inject control at specific location in a widget
  2. Inject section before/after an existing section
  3. Update an existing control
  4. Insert / Update control inside existing repeater widget
  5. Related Elementor documentation

Inject control at specific location in a widget

Inject control at a specific location in an existing widget

/**
 * Add Text control before link control of Button widget
 *
 * Used to inject controls and sections to a specific position in the stack.
 *
 * @param Element_Base $element The edited element.
 * @param array  $args Section arguments.
 *
 */
function add_button_control_before_link( $element, $args ) {
	// start injection of control before an other control
	$element->start_injection( [
		'at' => 'before',
		'of' => 'link',
	] );
	// add control
	$element->add_control(
		'button_custom_control',
		[
			'label' => __( 'Custom control', 'textdomain' ),
			'type' => \Elementor\Controls_Manager::TEXT,
			'default' => 'default value',
		]
	);
	// end injection just after
	$element->end_injection();
}
add_action( 'elementor/element/button/section_button/before_section_start', 'add_button_control_before_link', 10, 2 );

Dynamics portions of the hook :

elementor/element/{$widget_name}/{$section_name}/{$section_id}/before_section_start

Multiple places :

  • before_section_start
  • after_section_start
  • before_section_end
  • after_section_end

Inject section before/after an existing section

elementor/element/before_section_start Register a custom section before/after an existing section

function add_section_before_section_style( $element, $section_id, $args ) {
   /** @var \Elementor\Element_Base $element */
   if ( 'section' === $element->get_name() && 'section_background' === $section_id ) {

   	$element->start_controls_section(
   		'custom_section',
   		[
   			'tab' => \Elementor\Controls_Manager::TAB_STYLE,
   			'label' => __( 'Custom Section', 'textdomain' ),
   		]
   	);

   	$element->add_control(
   		'custom_control',
   		[
   		'type' => \Elementor\Controls_Manager::NUMBER,
   		'label' => __( 'Custom Control', 'textdomain' ),
   		]
   	);

   	$element->end_controls_section();
   }
}
add_action( 'elementor/element/before_section_start', 'add_section_before_section_style', 10, 3 );

Multiple places :

  • before_section_start
  • after_section_end

Update an existing control

Change properties of an existing control with update_control method

function update_button_align_control( $element, $args ) {
	// update "align" control, set default value to "center"
	// add condition : show control only if button type is not "info"
	$element->update_control(
		'align', // control ID
		[
			'default' => 'center',
			'condition' => [
				'button_type!' => 'info',
			],
		]
	);
}
add_action( 'elementor/element/button/section_style/after_section_end', 'update_button_align_control', 10, 2 );

Insert / Update control inside existing repeater widget

Example: add custom image control in Slides repeat Widget

public function add_control_widget_slides_image( $element, $args ) {
	// Get slides control
	$control_data = \Elementor\Plugin::instance()->controls_manager->get_control_from_stack( $element->get_unique_name(), 'slides' );
	if ( is_wp_error( $control_data ) ) {
		return;
	}
	// Access and modify the repeater fields as an array
	$control_data['fields']['image'] = [
		'name' => 'image',
		'label' => __( 'Image de supperposition', 'textdomain' ),
		'type' => \Elementor\Controls_Manager::MEDIA
	];

	// Update de main slides control
	$element->update_control( 'slides', $control_data );
}
add_action( 'elementor/element/slides/section_slides/before_section_end', 'add_control_widget_slides_image', 10, 2 );