Please read first : How To Create A New Element
To create an extension, the first thing will be to import the required Elementor stuff. So the very start of the php file should look like:
<?php use Elementor\Widget_Base; use Elementor\Plugin; use Elementor\Controls_Stack; use Elementor\Controls_Manager; use Elementor\Element_Base; use Elementor\Utils; use Elementor\Core\Kits\Documents\Tabs\Global_Colors; use Elementor\Group_Control_Background; use Elementor\Group_Control_Box_Shadow; use Elementor\Group_Control_Css_Filter; use Elementor\Group_Control_Image_Size; use Elementor\Group_Control_Border; use Elementor\Group_Control_Typography; use Elementor\Group_Control_Text_Shadow; use Elementor\Core\Breakpoints\Manager as Breakpoints_Manager;
Targeting the right element(s) #
Then, you need to add the proper actions, targeting the right elements that we are extending. In the example below, we are adding settings to the Container element, in the pre existing section_layout_container tab.
You can find the value required in the .php files for the elements we are expanding.
For example to expand the elementor button element, you will find in the proper tabs name in the button.php at elementor/includes/widgets/button.php.
Here is an example to extend the Container element.
add_action( 'elementor/element/container/section_layout_container/before_section_end', 'flex_container_extended', 10 );
add_action( 'elementor/frontend/before_render','flex_container_extended_before_render', 1 );
function flex_container_extended( Element_Base $section) {
$section->add_control(
'flex_container_control_enable',
[
'label' => __( 'Extra Flex Settings', 'switchers-addon' ),
'type' => Controls_Manager::SWITCHER,
...etc
Adding at the start of an accordion #
To add to the start of an accordion tab instead of the end, instead of before_section_end, you need after_section_start.
Adding a new accordion #
To add a new tab, you need either before_section_start or after_section_end, depending if you want the new accordion tab before or after the one targeted.
Example: add the extension in the Advanced tab, for all elements, columns, sections and containers.
add_action( 'elementor/element/container/section_advanced/after_section_end', 'switchers_pro_make_clickable_control', 10 );
add_action( 'elementor/element/column/section_advanced/after_section_end', 'switchers_pro_make_clickable_control' , 10 );
add_action( 'elementor/element/section/section_advanced/after_section_end', 'switchers_pro_make_clickable_control', 10 );
add_action( 'elementor/element/common/_section_style/after_section_end', 'switchers_pro_make_clickable_control', 10 );
add_action( 'elementor/frontend/before_render', 'switchers_pro_make_clickable_before_section_render', 1 );
function switchers_pro_make_clickable_control( Element_Base $section) {
...etc
When adding a new accordion, you need to initiate a new control section #
Example below. The label will be the name of the accordion.
$section->start_controls_section( 'sp_swiper', [ 'label' => __( 'SP Carousel Control', 'switchers-pro' ), 'tab' => Controls_Manager::TAB_ADVANCED ] );
Dynamic display #
We always want to start with a switch that says essentially ‘extend functionality?’. If disabled, we don’t show any other option. This makes the extension no clutter the UI for little good reasons.
$section->add_control(
'flex_container_control_enable',
[
'label' => __( 'Extra Flex Settings', 'switchers-addon' ),
'type' => Controls_Manager::SWITCHER,
'separator' => 'before',
'default' => '',
'render_type' => 'none',
'label_on' => __( 'Yes', 'switchers-addon' ),
'label_off' => __( 'No', 'switchers-addon' ),
]
);
Then all the subsequent settings should have this condition.
'condition' => [
'flex_container_control_enable' => 'yes',
],
They will automatically be disabled if the ‘Enable extension’ switch is off.
Enqueuing the JS and CSS #
For extensions, we enqueue the JS and CSS files conditionally, if the ‘Enable extension’ switch is on.
To accomplish this, first we register the styles and scripts normally, in the core plugin php file, in the function scripts_styles.
Then, we have a function in the core plugin php file: switchers_addon_conditionally_enqueue_feature_scripts.
