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.

Get The Latest Updates

We have a lot more where that came from! Join 828,441 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.