bainternet
12/7/2017 - 12:24 PM

Add a custom control to an existing Elementor widget

Add a custom control to an existing Elementor widget

<?php
// This example will add a custom "select" drop down to the "Image Box" 
// This will change the class="" on the rendered image box so we can style the Image Box differently
// based on the selected option from the editor.
// The class will be "my-image-box-style-blue" or "my-image-box-style-green" based on the selected option.

add_action('elementor/element/before_section_end', function( $section, $section_id, $args ) {
	if( $section->get_name() == 'image-box' && $section_id == 'section_image' ){
		// we are at the end of the "section_image" area of the "image-box"
		$section->add_control(
			'my_custom_control' ,
			[
				'label'        => 'My Label Here',
				'type'         => Elementor\Controls_Manager::SELECT,
				'default'      => 'blue',
				'options'      => array( 'blue' => 'Blue Style', 'green' => 'Green Style' ),
				'prefix_class' => 'my-image-box-style-',
				'label_block'  => true,
			]
		);
	}
}, 10, 3 );