Elementor Hooks Reference

1. PHP Action Hooks

Lifecycle

Hook Name	Parameters	Description
elementor/loaded	none	Fires when Elementor plugin is loaded, before components initialize. Use for checking Elementor availability.
elementor/init	none	Fires when Elementor is fully loaded. Use for registering custom functionality.

Registration

Hook Name	Parameters	Description
elementor/widgets/register	Widgets_Manager $widgets_manager	Register custom widgets
elementor/controls/register	Controls_Manager $controls_manager	Register custom controls
elementor/dynamic_tags/register	Dynamic_Tags_Manager $dynamic_tags_manager	Register dynamic tags
elementor/finder/register	Categories_Manager $categories_manager	Register Finder categories
elementor/elements/categories_registered	Elements_Manager $elements_manager	Register widget categories
elementor/documents/register	Documents_Manager $documents_manager	Register document types

Frontend Scripts and Styles

Hook Name	Parameters	Description
elementor/frontend/after_register_scripts	none	After frontend scripts registered
elementor/frontend/before_register_scripts	none	Before frontend scripts registered
elementor/frontend/after_register_styles	none	After frontend styles registered
elementor/frontend/before_register_styles	none	Before frontend styles registered
elementor/frontend/after_enqueue_scripts	none	After frontend scripts enqueued
elementor/frontend/before_enqueue_scripts	none	Before frontend scripts enqueued
elementor/frontend/after_enqueue_styles	none	After frontend styles enqueued
elementor/frontend/before_enqueue_styles	none	Before frontend styles enqueued

Editor Scripts and Styles

Hook Name	Parameters	Description
elementor/editor/before_enqueue_scripts	none	Before editor scripts enqueued
elementor/editor/after_enqueue_scripts	none	After editor scripts enqueued
elementor/editor/after_enqueue_styles	none	After editor styles enqueued
elementor/editor/before_enqueue_styles	none	Before editor styles enqueued

Preview Scripts and Styles

Hook Name	Parameters	Description
elementor/preview/enqueue_scripts	none	Enqueue scripts in the preview iframe
elementor/preview/enqueue_styles	none	Enqueue styles in the preview iframe

Widget Rendering

Hook Name	Parameters	Description
elementor/widget/{$widget_name}/skins_init	Widget_Base $widget	Register custom skins for a widget
elementor/widget/before_render_content	Widget_Base $widget	Before widget content renders
elementor/frontend/before_render	Element_Base $element	Before any element renders (all types)
elementor/frontend/after_render	Element_Base $element	After any element renders (all types)
elementor/frontend/{$element_type}/before_render	Element_Base $element	Before specific element type renders
elementor/frontend/{$element_type}/after_render	Element_Base $element	After specific element type renders

Element types for {$element_type}: section, column, container, widget

Document and Editor Save

Hook Name	Parameters	Description
elementor/documents/register_controls	Document $document	Register controls for documents/page settings
elementor/editor/after_save	int $post_id, array $editor_data	After user saves editor data
elementor/document/before_save	Document $document, array $data	Before document saves
elementor/document/after_save	Document $document, array $data	After document saves

CSS File Hooks

Hook Name	Parameters	Description
elementor/element/parse_css	Post $post_css, Element_Base $element	Add custom CSS rules to element CSS
elementor/element/before_parse_css	Post $post_css, Element_Base $element	Before CSS is parsed
elementor/css-file/{$name}/enqueue	CSS_File $css_file	When a CSS file is enqueued
elementor/core/files/clear_cache	none	When CSS cache is cleared

Forms (Pro)

Hook Name	Parameters	Description
elementor_pro/forms/validation	Form_Record $record, Ajax_Handler $ajax_handler	Validate all form fields
elementor_pro/forms/validation/{$field_type}	array $field, Form_Record $record, Ajax_Handler $ajax_handler	Validate specific field type
elementor_pro/forms/process	Form_Record $record, Ajax_Handler $ajax_handler	After fields validated, process form
elementor_pro/forms/process/{$field_type}	array $field, Form_Record $record, Ajax_Handler $ajax_handler	Process specific field type
elementor_pro/forms/new_record	Form_Record $record, Ajax_Handler $ajax_handler	After form actions run
elementor_pro/forms/form_submitted	Forms\Module $module	When form POST received
elementor_pro/forms/mail_sent	array $settings, Form_Record $record	After form email sent
elementor_pro/forms/webhooks/response	array|WP_Error $response, Form_Record $record	Handle webhook response

Query (Pro)

Hook Name	Parameters	Description
elementor/query/{$query_id}	WP_Query $query, Widget_Base $widget	Filter Posts/Portfolio widget query. Set Query ID in widget settings.

Other Important Actions

Hook Name	Parameters	Description
elementor/ajax/register_actions	Ajax_Manager $ajax_manager	Register AJAX handlers
elementor/editor/init	none	Editor initialization
elementor/editor/footer	none	Editor footer output
elementor/preview/init	none	Preview initialization
elementor/kit/register_tabs	Kit $kit	Register kit (site settings) tabs
elementor/page_templates/canvas/before_content	none	Before canvas template content
elementor/page_templates/canvas/after_content	none	After canvas template content
elementor/template-library/after_save_template	int $template_id, array $data	After template saved
elementor/element/after_add_attributes	Element_Base $element	After render attributes added
elementor/experiments/default-features-registered	Experiments_Manager $manager	Register experiments

---

2. PHP Filter Hooks

Widget Output Filters

Filter Name	Parameters	Description
elementor/widget/render_content	string $content, Widget_Base $widget	Filter widget HTML on frontend
elementor/{$element_type}/print_template	string $template, Widget_Base $widget	Filter widget JS template in preview
elementor/frontend/the_content	string $content	Filter entire Elementor page output
elementor/frontend/{$element_type}/should_render	bool $should_render, Element_Base $element	Control whether element renders

Document and Config Filters

Filter Name	Parameters	Description
elementor/document/config	array $config, Document $document	Filter document config
elementor/document/save/data	array $data, Document $document	Filter data before save
elementor/document/urls/edit	string $url, Document $document	Filter edit URL
elementor/document/urls/preview	string $url, Document $document	Filter preview URL
elementor/editor/localize_settings	array $settings	Filter editor localized settings

Visual Element Filters

Filter Name	Parameters	Description
elementor/frontend/print_google_fonts	bool $print	Return false to disable Google Fonts loading
elementor/shapes/additional_shapes	array $shapes	Add custom shape dividers
elementor/mask_shapes/additional_shapes	array $shapes	Add custom mask shapes
elementor/utils/get_placeholder_image_src	string $src	Change default placeholder image
elementor/icons_manager/additional_tabs	array $tabs	Add custom icon libraries
elementor/fonts/additional_fonts	array $fonts	Add custom fonts
elementor/controls/animations/additional_animations	array $animations	Add custom animations
elementor/divider/styles/additional_styles	array $styles	Add custom divider styles

Finder and Template Filters

Filter Name	Parameters	Description
elementor/finder/categories	array $categories	Add/modify Finder categories
elementor/template-library/get_template	array $template_data	Filter template data
elementor/template_library/is_template_supports_export	bool $supports, array $template	Control template export
elementor/files/allow_unfiltered_upload	bool $allow	Allow unfiltered file uploads
elementor/files/svg/enabled	bool $enabled	Enable/disable SVG support

Forms Filters (Pro)

Filter Name	Parameters	Description
elementor_pro/forms/wp_mail_headers	string $headers	Filter form email headers
elementor_pro/forms/wp_mail_message	string $message	Filter form email body HTML
elementor_pro/custom_fonts/font_display	string $display	Override custom fonts font-display value

Other Important Filters

Filter Name	Parameters	Description
elementor/frontend/builder_content_data	array $data, int $post_id	Filter builder content data
elementor/frontend/assets_url	string $url	Filter frontend assets URL
elementor/widgets/black_list	array $black_list	Widget class blacklist
elementor/element/get_child_type	string $child_type, array $data	Filter allowed child types
elementor/utils/is_post_type_support	bool $support, int $post_id, string $post_type	Filter post type support

---

3. Injecting Controls

Targeting All Elements

Inject controls into every element using these hooks:

Hook Name	Params	Use
elementor/element/before_section_start	$element, $section_id, $args	Add new section before an existing section
elementor/element/after_section_start	$element, $section_id, $args	Add control inside start of existing section
elementor/element/before_section_end	$element, $section_id, $args	Add control inside end of existing section
elementor/element/after_section_end	$element, $section_id, $args	Add new section after an existing section

Targeting Specific Elements

Use {$stack_name} and {$section_id} to target a specific widget and section:

Hook Pattern	Params	Use
elementor/element/{$stack_name}/{$section_id}/before_section_start	$element, $args	Add section before
elementor/element/{$stack_name}/{$section_id}/after_section_start	$element, $args	Add control at section start
elementor/element/{$stack_name}/{$section_id}/before_section_end	$element, $args	Add control at section end
elementor/element/{$stack_name}/{$section_id}/after_section_end	$element, $args	Add section after

See resources/injecting-controls-examples.md for code examples.

---

4. JS Frontend Hooks

Frontend hooks use elementorFrontend.hooks (available on the frontend page).

Actions

Hook Name	Parameters	Description
elementor/frontend/init	none	Frontend initialized
frontend/element_ready/global	$scope (jQuery), $ (jQuery)	Any element is ready (sections, columns, widgets)
frontend/element_ready/widget	$scope (jQuery), $ (jQuery)	Any widget is ready
frontend/element_ready/{widgetType.skinName}	$scope (jQuery), $ (jQuery)	Specific widget+skin is ready (e.g. image.default)

Filters

Hook Name	Parameters	Description
frontend/handlers/menu_anchor/scroll_top_distance	int scrollTop	Adjust scroll distance for menu anchors

See resources/js-hooks-commands.md for code examples.

---

5. JS Editor Hooks

Editor hooks use elementor.hooks (available inside the Elementor editor).

Actions

Hook Name	Parameters	Description
panel/open_editor/{elementType}	panel, model, view	Settings panel opened for element type (widget, section, column)
panel/open_editor/{elementType}/{elementName}	panel, model, view	Settings panel opened for a specific widget name

Filters

Hook Name	Parameters	Description
elements/context-menu/groups	array groups	Modify right-click context menu groups

See resources/js-hooks-commands.md for code examples.

---

6. JS Commands API ($e.commands)

The Commands API (since 2.7.0) manages all editor commands. Run commands with $e.run().

Key Methods

Method	Parameters	Returns	Description
$e.commands.register()	component, command, callback	Commands	Register a new command
$e.run()	string command, object args	*	Execute a command
$e.commands.getAll()	none	Object	Get all registered commands
$e.commands.getCurrent()	none	Object	Get currently running commands
$e.commands.is()	string command	Boolean	Check if command is currently running
$e.commands.getCurrentArgs()	none	Object	Get args of currently running command
$e.commands.getCurrentFirst()	none	String	Get first currently running command

Command Types

Base Class	Type	Purpose
$e.modules.CommandBase	User commands	Represent user actions
$e.modules.CommandInternalBase	Internal commands	For internal editor use
$e.modules.CommandData	Data commands	Communicate with data/cache/backend

See resources/js-hooks-commands.md for full code examples.

---

7. JS Components API ($e.components)

Method	Parameters	Returns	Description
$e.components.register()	ComponentBase component	ComponentBase	Register a component
$e.components.get()	string id	ComponentBase	Get component by namespace
$e.components.getAll()	none	array	Get all components
$e.components.activate()	string namespace		Activate a component
$e.components.inactivate()	string namespace		Deactivate a component
$e.components.isActive()	string namespace	Boolean	Check if component is active
$e.components.getActive()	none	Object	Get all active components

A component serves as a namespace that holds commands, hooks, routes, tabs, shortcuts, and utils. Component class files should be named component.js.

See resources/js-hooks-commands.md for code examples.

---

8. JS Hooks API ($e.hooks)

The $e.hooks API manages hooks that fire before/after commands run via $e.run().

UI Hooks

Method	Parameter	Description
$e.hooks.registerUIBefore()	HookBase instance	Before command runs (UI)
$e.hooks.registerUIAfter()	HookBase instance	After command runs (UI)
$e.hooks.registerUICatch()	HookBase instance	When command fails (UI)

Data Hooks

Method	Parameter	Description
$e.hooks.registerDataDependency()	HookBase instance	Before command (dependency check)
$e.hooks.registerDataAfter()	HookBase instance	After command runs (data)
$e.hooks.registerDataCatch()	HookBase instance	When command fails (data)

See resources/js-hooks-commands.md for hook convention code examples and import patterns.

---

9. Common Patterns

I want to...	Use this hook
Register a custom widget	elementor/widgets/register (action)
Register a custom control	elementor/controls/register (action)
Add a widget category	elementor/elements/categories_registered (action)
Register a dynamic tag	elementor/dynamic_tags/register (action)
Enqueue frontend script	elementor/frontend/after_register_scripts (action)
Enqueue editor script	elementor/editor/after_enqueue_scripts (action)
Enqueue preview script	elementor/preview/enqueue_scripts (action)
Add control to existing widget	elementor/element/{widget}/{section}/before_section_end (action)
Add control to page settings	elementor/documents/register_controls (action)
Add control to user preferences	elementor/element/editor-preferences/preferences/before_section_end (action)
Modify widget HTML output	elementor/widget/render_content (filter)
Modify widget JS template	elementor/widget/print_template (filter)
Filter entire page output	elementor/frontend/the_content (filter)
Disable Google Fonts	elementor/frontend/print_google_fonts return false (filter)
Change placeholder image	elementor/utils/get_placeholder_image_src (filter)
Add custom shape dividers	elementor/shapes/additional_shapes (filter)
Add custom mask shapes	elementor/mask_shapes/additional_shapes (filter)
Validate form data (Pro)	elementor_pro/forms/validation (action)
Process form after submit (Pro)	elementor_pro/forms/new_record (action)
Filter posts widget query (Pro)	elementor/query/{$query_id} (action)
Add CSS rules to elements	elementor/element/parse_css (action)
Run code when widget ready (JS)	frontend/element_ready/{widget.skin} via elementorFrontend.hooks
Hook into editor panel open (JS)	panel/open_editor/{type}/{name} via elementor.hooks
Register editor command (JS)	$e.commands.register() or component defaultCommands()
Hook before/after command (JS)	$e.hooks.registerUIBefore() / $e.hooks.registerUIAfter()