Elementor Code Reference
  • Developers
  • Code Reference
  • Docs
  • Blog
  • Account
  • Developers
  • Code Reference
  • Docs
  • Blog
  • Account

PHP Hooks

Table Of Contents

  • 1 Frontend Filters
    • 1.1 elementor/frontend/the_content
    • 1.2 elementor/widget/render_content
    • 1.3 elementor/frontend/print_google_fonts
  • 2 Editor Filters
    • 2.1 elementor/element/print_template
  • 3 Init Actions
    • 3.1 elementor/loaded
    • 3.2 elementor/init
    • 3.3 elementor/widget/{$widget_name}/skins_init
  • 4 Frontend Actions
    • 4.1 elementor/frontend/before_enqueue_scripts
    • 4.2 elementor/frontend/after_register_styles
    • 4.3 elementor/frontend/after_enqueue_styles
    • 4.4 elementor/element/parse_css
    • 4.5 elementor/frontend/{$element_type}/before_render
    • 4.6 elementor/frontend/{$element_type}/after_render
    • 4.7 elementor/widgets/widgets_registered
  • 5 Editor Actions
    • 5.1 elementor/editor/after_save
    • 5.2 elementor/editor/before_enqueue_scripts
    • 5.3 elementor/element/before_section_start
    • 5.4 elementor/element/after_section_end
    • 5.5 elementor/element/{$section_name}/{$section_id}/before_section_start
    • 5.6 elementor/element/{$section_name}/{$section_id}/after_section_end
    • 5.7 elementor/element/after_section_start
    • 5.8 elementor/element/before_section_end
    • 5.9 elementor/element/{$section_name}/{$section_id}/after_section_start
    • 5.10 elementor/element/{$section_name}/{$section_id}/before_section_end
  • 6 Preview Actions
    • 6.1 elementor/preview/enqueue_styles

(Moved from the old GitHub Docs.)

 

Elementor has many PHP hooks that allow you to change the default behavior and even extend it with new functionality.

 

 

Frontend Filters

elementor/frontend/the_content

Applied to frontend HTML content (the entire Elementor content in page).

Arguments

Argument Type Description
content string The entire Elementor HTML output of current page/post

Example

add_action( 'elementor/frontend/the_content', function( $content ) {
	if ( ! membership_plugin_is_allowed_content() ) {
		$content = __( 'Forbidden', 'membership_plugin' );
	}
	
	return $content;
} );

elementor/widget/render_content

Applied to the PHP html content of a single widget. ( in the Editor it will be shown after the finish edit the element. to change the JavaScript Template see elementor/element/print_template)

Arguments

Argument Type Description
content string The widget HTML output
widget Widget_Base The widget instance

Example

add_action( 'elementor/widget/render_content', function( $content, $widget ) {
   if ( 'heading' === $widget->get_name() ) {
   	$settings = $widget->get_settings();
   
   	if ( ! empty( $settings['link']['is_external'] ) ) {
   		$content .= '<i class="fa fa-external-link" aria-hidden="true"></i>';
   	}
   }
   
   return $content;
}, 10, 2 );

elementor/frontend/print_google_fonts

Used to prevent loading of Google Fonts by Elementor

Arguments

None

Example

add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

 

Editor Filters

elementor/element/print_template

Applied to the javascript preview templates.

Arguments

Argument Type Description
template string The JavaScript template output
widget Widget_Base The widget instance

Example

add_action( 'elementor/element/print_template', function( $template, $widget ) {
   if ( 'heading' === $widget->get_name() ) {
   	$old_template = '<a href="\' + settings.link.url + \'">\' + title_html + \'</a>';
   	$new_template = '<a href="\' + settings.link.url + \'">\' + title_html + ( settings.link.is_external ? \'<i class="fa fa-external-link" aria-hidden="true"></i>\' : \'\' ) + \'</a>';
   	$template = str_replace( $old_template, $new_template, $template );
   }

   return $template;
}, 10, 2 );

Note: The code above it for example only, we do not recommend to use str_replace on templates, because the template may be changed and the str_replace will fail. instead, take the whole original template and change it for your needs.

 

Init Actions

elementor/loaded

Elementor plugin is loaded, before load all components

Arguments

None

Example

add_action( 'elementor/loaded', 'load_my_plugin' );

elementor/init

Elementor is fully loaded

Arguments

None

Example

// Add a custom category for panel widgets
add_action( 'elementor/init', function() {
   \Elementor\Plugin::$instance->elements_manager->add_category( 
   	'theme-elements',
   	[
   		'title' => __( 'Theme Elements', 'theme-domain' ),
   		'icon' => 'fa fa-plug', //default icon
   	],
   	2 // position
   );
} );

elementor/widget/{$widget_name}/skins_init

Runs after widget construction. Here is th place to register custom skins.

Arguments

Argument Type Description
widget Widget_Base The widget instance

Example

// Add a custom skin for the Google Maps widget
add_action( 'elementor/widget/google_maps/skins_init', function( $widget ) {
   $widget->add_skin( new MySkins\Skin_Dark_Map( $widget ) );
} );

 

Frontend Actions

elementor/frontend/before_enqueue_scripts

Before the frontend scripts enqueuing.

Arguments

None

Example

add_action( 'elementor/frontend/before_enqueue_scripts', function() {
   wp_enqueue_script(
   	'plugin-name-frontend',
   	'plugin-url/assets/frontend.js',
   	[
   		'elementor-frontend', // dependency
   	],
   	'plugin_version',
   	true // in_footer
   );
} );

elementor/frontend/after_register_styles

After Elementor registers all styles.

Arguments

None

elementor/frontend/after_enqueue_styles

After the frontend styles enqueuing.

Arguments

None

Example

add_action( 'elementor/frontend/after_enqueue_styles', function() {
   wp_dequeue_style( 'font-awesome' );
} );

elementor/element/parse_css

After Parse the element CSS in order to generate the CSS file

Arguments

Argument Type Description
post_css Post_CSS_File The Post CSS generator
element Element_Base The element instance

Example

add_action(	'elementor/element/parse_css', function( $post_css, $element ) {
   $item_width = some_get_theme_config_function( 'item_width' );
   /**
    * @var \Elementor\Post_CSS_File $post_css
    * @var \Elementor\Element_Base  $element
    */
   $post_css->get_stylesheet()->add_rules( $element->get_unique_selector(), [
   	'width' => $item_width . 'px',
   ] );
}, 10, 2 );

elementor/frontend/{$element_type}/before_render

elementor/frontend/{$element_type}/after_render

Before/after the element is printed

Arguments

Argument Type Description
element Element_Base The element instance

Example

add_action( 'elementor/frontend/element/before_render', function ( \Elementor\Element_Base $element ) {
	if ( ! $element->get_settings( 'my-custom-settings' ) ) {
		return;
	}

	$element->add_render_attribute( '_wrapper', [
		'class' => 'my-custom-class',
		'data-my_data' => 'my-data-value',
	] );
} );

elementor/widgets/widgets_registered

The place to register your custom widgets.

Arguments

Argument Type Description
widgets_manager Widgets_Manager The widgets manager instance

Example

add_action( 'elementor/widgets/widgets_registered', function( $widgets_manager ) {
	require 'plugin-path/widgets/my-widget.php';
    
    $widgets_manager->register_widget_type( new My_Widget() );
} );

 

Editor Actions

elementor/editor/after_save

Runs after saving Elementor data.

Arguments

Argument Type Description
post_id integer The post ID
editor_data array Array of Elementor elements

Example

add_action( 'elementor/editor/after_save', function( $post_id, $editor_data ) {
    // Activity Log Plugin
    aal_insert_log(
		[
			'action' => 'saved',
			'object_type' => 'Elementor Data',
			'object_id' => $post_id,
			'object_name' => get_the_title( $post_id ),
		]
	);
}

elementor/editor/before_enqueue_scripts

Before the editor scripts enqueuing.

Arguments

None

Example

add_action( 'elementor/editor/before_enqueue_scripts', function() {
   wp_enqueue_script(
   	'plugin-name-editor',
   	'plugin-url/assets/editor.js',
   	[
   		'elementor-editor', // dependency
   	],
   	'plugin_version',
   	true // in_footer
   );
} );

start_controls_section

elementor/element/before_section_start

elementor/element/after_section_end

Runs before/after an editor section is registered. Here is the place to add additional sections before and after each section for all elements in panel If you need to add a section in a specific place ( a specific element & section ), prefer to use the next hook

Arguments

Argument Type Description
element Element_Base The edited element.
section_id string Current section id
args array The $args that sent to $element->start_controls_section

Example

add_action( 'elementor/element/before_section_start', function( $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', 'plugin-name' ),
   		]
   	);

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

   	$element->end_controls_section();
   }
}, 10, 3 );

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

elementor/element/{$section_name}/{$section_id}/after_section_end

Runs before/after a specific element ( like heading) and a specific section ( like section_title )

Arguments

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

Example

add_action( 'elementor/element/heading/section_title/before_section_start', function( $element, $args ) {
	/** @var \Elementor\Element_Base $element */
	$element->start_controls_section(
		'custom_section',
		[
			'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			'label' => __( 'Custom Section', 'plugin-name' ),
		]
	);

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

	$element->end_controls_section();
}, 10, 2 );

elementor/element/after_section_start

elementor/element/before_section_end

Runs within an editor section. after it was opened / before the section is closed. Here 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 ), prefer to use the next hook

Arguments

Argument Type Description
element Element_Base The edited element.
section_id string Current section id
args array The $args that sent to $element->start_controls_section

Example

add_action( 'elementor/element/after_section_start', function( $element, $section_id, $args ) {
	/** @var \Elementor\Element_Base $element */
	if ( 'section' === $element->get_name() && 'section_background' === $section_id ) {
		$element->add_control(
			'custom_control',
			[
				'type' => \Elementor\Controls_Manager::NUMBER,
				'label' => __( 'Custom Control', 'plugin-name' ),
			]
		);
	}
}, 10, 3 );

elementor/element/{$section_name}/{$section_id}/after_section_start

elementor/element/{$section_name}/{$section_id}/before_section_end

Runs within an editor section. after it was opened / before the section is closed. Here is the place to add additional controls before and after a specific element ( like heading) and a specific section ( like section_title )

Arguments

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

Example

add_action( 'elementor/element/heading/section_title/before_section_start', function( $element, $args ) {
	/** @var \Elementor\Element_Base $element */
	$element->add_control(
		'custom_control',
		[
			'type' => \Elementor\Controls_Manager::NUMBER,
			'label' => __( 'Custom Control', 'plugin-name' ),
		]
	);
}, 10, 2 );

 

Preview Actions

elementor/preview/enqueue_styles

Before the preview styles enqueuing.

Arguments

None

Example

add_action( 'elementor/preview/enqueue_styles', function() {
   wp_enqueue_style(
   	'elementor-preview-style',
   	url/to/style.css',
   	[],
   	'plugin-version'
   );
} );
« Previous
Elementor Code Reference
  • Code Reference
  • Elementor Hooks
    • PHP Hooks
    • JS Hooks
  • Elementor Classes
  • Elementor Methods
  • Elementor Functions
Developer Resources

Visit the official Developer Resources to learn how to extend Elementor.

Get Involved

Visit Elementor GitHub repository to contribute code or suggest new ideas.

  • Contact
  • About Us
  • Terms of Service
  • Privacy Policy
  • Template Library
  • Features
  • Theme Builder
  • Get Pro
Theme by Pojo.me
//Made in Elementor Page Builder
Enter your email and be the first to learn about new updates and features.
No thanks, I just want to download Elementor