Add Control Section 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.

Sections are created using two methods, the start_controls_section() method which creates a new section and the end_controls_section() method to close the section.

Adding New Control Sections

As mentioned above, new control sections are added using the start_controls_section() method. Each section has to have a few key parameters:

  • Section Name (string) – Unique name used in the code.
  • Section Setting (array) – Extra section parameters.
    • Label (string) – The label displayed to user in the panel.
    • Tab (string) – The tab where the section is included in. Default value is the content tab.

Adding a new section is done as following:

$this->start_controls_section(
	'my_section',
	[
		'label' => __( 'My Section', 'plugin-name' ),
		'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
	]
);

After opening the section, we can now go on to adding more controls that will appear under the same section:

$this->add_control();

$this->add_control();

$this->add_control();

When all the controls are added, we have to close the section using the end_controls_section() method.

$this->end_controls_section();

Example Control Sections

We are going to dive in and create several section for our controls, note that each section has to have an opening tag and a closing tag.

Single Section

The first example is a single section in “Content” tab. When The section will We have to provide the section name and extra parameters like the tab label:

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function _register_controls() {

		$this->start_controls_section(
			'content_section',
			[
				'label' => __( 'Content', 'plugin-name' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control();

		$this->add_control();

		$this->add_control();

		$this->end_controls_section();

	}

}

 

This will create a new section for our controls under the “Content” tab.

Elementor Single Section

Multiple Sections

Now lets create multiple sections for our controls:

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function _register_controls() {

		$this->start_controls_section(
			'content_section',
			[
				'label' => __( 'Content', 'plugin-name' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control();

		$this->add_control();

		$this->add_control();

		$this->end_controls_section();

		$this->start_controls_section(
			'info_section',
			[
				'label' => __( 'Info', 'plugin-name' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control();

		$this->add_control();

		$this->add_control();

		$this->end_controls_section();

	}

}

 

This will create two section for our controls under the “Content” tab.

Elementor Multiple Sections

Sections in Multiple Tabs

The next step is to create a new section under the “Style” tab. This is done be specifying the tab name under the extra parameters array.

Elementor has a predefined list of tab that you can use, but with widgets the convention is to use only the “Content” tab and the “Style” tab.

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function _register_controls() {

		$this->start_controls_section(
			'content_section',
			[
				'label' => __( 'Content', 'plugin-name' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control();

		$this->add_control();

		$this->add_control();

		$this->end_controls_section();

		$this->start_controls_section(
			'info_section',
			[
				'label' => __( 'Info', 'plugin-name' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control();

		$this->add_control();

		$this->add_control();

		$this->end_controls_section();

		$this->start_controls_section(
			'style_section',
			[
				'label' => __( 'Style', 'plugin-name' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control();

		$this->add_control();

		$this->add_control();

		$this->end_controls_section();

	}

}

 

In this example we created two sections under the “Content” tab and another section under the “Style” tab.

Elementor Section in a Tab

As you can see from the code, if we don’t defined the “tab“, the section will be added to the “Content” tab by default.