Elementor Developers

# Injecting Controls

Elementor Core Advanced

Elementor offers a set of special hooks that allow developers to inject new controls programmatically into many kinds of elements. You can inject new controls into all the elements, into specific elements, into the Elementor default widgets, and into widgets developed by other addon developers.

There are eight available hooks to choose from, four hooks are used to inject controls into all the elements and another 4 hooks are used to inject controls into specific elements.

# Targeting All Elements

# Hooks Details

  • Hook Type: Action Hook
  • Hook Name:
    • elementor/element/before_section_start
    • elementor/element/after_section_start
    • elementor/element/before_section_end
    • elementor/element/after_section_end
  • Affects: Editor

# Hook Arguments

Argument Type Description
element \Elementor\Controls_Stack The edited element.
section_id string Section id.
args array Section arguments sent to $element->start_controls_section

# elementor/element/before_section_start

# elementor/element/after_section_end

Runs before or after an editor section is registered. This is used to add additional sections before and after a section and affects all elements in a panel. If you need to add a section in a specific place (a specific element & section), the hooks described below would be preferable (See the section "Targeting Specific Elements).

# Example

/**
 * @param \Elementor\Controls_Stack $element    The element type.
 * @param string                    $section_id Section ID.
 * @param array                     $args       Section arguments.
 */
function inject_custom_control( $element, $section_id, $args ) {

	if ( 'section' === $element->get_name() && 'section_background' === $section_id ) {

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

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

		$element->end_controls_section();

	}

}
add_action( 'elementor/element/before_section_start', 'inject_custom_control', 10, 3 );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# elementor/element/after_section_start

# elementor/element/before_section_end

Runs within a section in the editor, after it was opened and before it was closed. This is the place to add additional controls to existing sections. If you need to add a control to a specific place (a specific element & section), the hooks described below would be preferable.

# Example

/**
 * @param \Elementor\Controls_Stack $element    The element type.
 * @param string                    $section_id Section ID.
 * @param array                     $args       Section arguments.
 */
function inject_custom_control( $element, $section_id, $args ) {

	if ( 'section' === $element->get_name() && 'section_background' === $section_id ) {

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

	}

}
add_action( 'elementor/element/after_section_start', 'inject_custom_control', 10, 3 );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Targeting Specific Elements

# Hooks Details

  • Hook Type: Action Hook
  • Hook Name:
    • elementor/element/{$stack_name}/{$section_id}/before_section_start
    • elementor/element/{$stack_name}/{$section_id}/after_section_start
    • elementor/element/{$stack_name}/{$section_id}/before_section_end
    • elementor/element/{$stack_name}/{$section_id}/after_section_end
  • Notes: The dynamic portions of the hook name, $stack_name and $section_id, refer to the stack name and section ID, respectively.
  • Affects: Editor

To target a specific element (like the heading widget) and a specific section (like section_title section), use one of the following hooks:

  • elementor/element/heading/section_title/before_section_start
  • elementor/element/heading/section_title/after_section_start
  • elementor/element/heading/section_title/before_section_end
  • elementor/element/heading/section_title/after_section_end

# Hook Arguments

Argument Type Description
element Element_Base The edited element.
args array Section arguments sent to $element->start_controls_section.

# elementor/element/{$stack_name}/{$section_id}/before_section_start

# elementor/element/{$stack_name}/{$section_id}/after_section_end

Runs before / after a specific element and a specific section.

# Example

/**
 * @param \Elementor\Controls_Stack $element The element type.
 * @param array                     $args    Section arguments.
 */
function inject_heading_controls( $element, $args ) {

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

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

	$element->end_controls_section();

}
add_action( 'elementor/element/heading/section_title/before_section_start', 'inject_heading_controls', 10, 2 );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# elementor/element/{$stack_name}/{$section_id}/after_section_start

# elementor/element/{$stack_name}/{$section_id}/before_section_end

Runs within an editor section, after it was opened and before the section was closed. This is the place to add additional controls before, and after, a specific element and a specific section within that element.

# Example

/**
 * @param \Elementor\Controls_Stack $element The element type.
 * @param array                     $args    Section arguments.
 */
function inject_heading_controls( $element, $args ) {

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

}
add_action( 'elementor/element/heading/section_title/before_section_start', 'inject_heading_controls', 10, 2 );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

← Font Display →