Table of Contents
Widget controls are added within the _register_controls()
method. The controls are arranged under tabs and sections. Before adding new control to the widgets, we have to create a new section.
Control Tabs are created using two methods, the start_controls_tabs()
method which creates a new control tabs and the end_controls_tabs()
method to close the tabs.
Each tabs area has an inner tab elements. Single tab is created using another two inner methods, the start_controls_tab()
method which creates a new control tab and the end_controls_tab()
method to close the tab.
Adding New Control Tabs
New control tabs are added using the wrapper start_controls_tabs()
method with the following parameters:
- Tab Name (string) – Unique name used in the code.
And an inner start_controls_tab()
method, with the following parameters:
- Tab Name (string) – Unique name used in the code.
- Tab Setting (array) – Extra tab parameters.
- Label (string) – The label displayed to user in the panel.
Adding a new tabs area is done as following:
$this->start_controls_tabs();
Now that the tabs area is opened, we can now go on to add single tabs:
$this->start_controls_tab();
$this->end_controls_tab();
$this->start_controls_tab();
$this->end_controls_tab();
When all the controls are added, we have to close the tabs area:
$this->end_controls_tabs();
Example Control Tabs
Full example:
<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {
protected function _register_controls() {
$this->start_controls_section(
'style_section',
[
'label' => __( 'Style Section', 'plugin-name' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]
);
$this->start_controls_tabs(
'style_tabs'
);
$this->start_controls_tab(
'style_normal_tab',
[
'label' => __( 'Normal', 'plugin-name' ),
]
);
$this->add_control();
$this->add_control();
$this->add_control();
$this->end_controls_tab();
$this->start_controls_tab(
'style_hover_tab',
[
'label' => __( 'Hover', 'plugin-name' ),
]
);
$this->add_control();
$this->add_control();
$this->add_control();
$this->end_controls_tab();
$this->end_controls_tabs();
$this->end_controls_section();
}
}