Elementor Hooks Reference
- 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
- 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
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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()