Add Control Tabs to Widgets

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

	}

}