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()`

elementor-hooks

NPX Install

Tags

SKILL.md Content

Elementor Hooks Reference

1. PHP Action Hooks

Lifecycle

Registration

Frontend Scripts and Styles

Editor Scripts and Styles

Preview Scripts and Styles

Widget Rendering

Document and Editor Save

CSS File Hooks

Forms (Pro)

Query (Pro)

Other Important Actions

2. PHP Filter Hooks

Widget Output Filters

Document and Config Filters

Visual Element Filters

Finder and Template Filters

Forms Filters (Pro)

Other Important Filters

3. Injecting Controls

Targeting All Elements

Targeting Specific Elements

4. JS Frontend Hooks

Actions

Filters

5. JS Editor Hooks

Actions

Filters

6. JS Commands API ($e.commands)

Key Methods

Command Types

7. JS Components API ($e.components)

8. JS Hooks API ($e.hooks)

UI Hooks

Data Hooks

9. Common Patterns

6. JS Commands API (
`$e.commands`
)

7. JS Components API (
`$e.components`
)

8. JS Hooks API (
`$e.hooks`
)