# Render Frontend Elements
Elementor Core IntermediateElementor has a hook that lets developers add code before or after elements in the frontend. This hook can be applied to either a single element or all the elements on a page and is applied to the final HTML output of the element(s). Developers can use this hook to change the HTML output before Elementor displays it to the end-user.
# Hook Details
- Hook Type: Action Hook
- Hook Name:
elementor/frontend/before_render
elementor/frontend/after_render
elementor/frontend/{$element_type}/before_render
elementor/frontend/{$element_type}/after_render
- Notes: The dynamic portion of the hook name,
$element_type
, refers toelement type
. - Affects: Frontend
# Hook Arguments
Argument | Type | Description |
---|---|---|
element | \Elementor\Element_Base | The element instance |
# Example
/**
* Add a custom class and a data attribute to all the elements
* containing a specific setting defined through the element
* control.
*
* @since 1.0.0
* @param \Elementor\Element_Base $element The element instance.
*/
function add_attributes_to_elements( $element ) {
if ( ! $element->get_settings( 'my-custom-setting' ) ) {
return;
}
$element->add_render_attribute(
'_wrapper',
[
'class' => 'my-custom-class',
'data-my-custom-value' => 'my-custom-data-value',
]
);
}
add_action( 'elementor/frontend/before_render', 'add_attributes_to_elements' );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24