Last active
December 29, 2022 09:36
-
-
Save iqbalrony/4372a12f994c3215041680e0075d083f to your computer and use it in GitHub Desktop.
Create Elementor Custom Control. Image selector control
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
namespace ElementorControls; | |
if (!defined('ABSPATH')) exit; // Exit if accessed directly | |
class Elementor_Custom_Controls { | |
public function includes() { | |
require_once(plugin_dir_path(__FILE__).'inc/elementor/image-selector-control.php'); | |
} | |
public function register_controls() { | |
$this->includes(); | |
$controls_manager = \Elementor\Plugin::$instance->controls_manager; | |
$controls_manager->register_control(\Elementor\CustomControl\ImageSelector_Control::ImageSelector, new \Elementor\CustomControl\ImageSelector_Control()); | |
} | |
public function __construct() { | |
add_action('elementor/controls/controls_registered', [$this, 'register_controls']); | |
} | |
} | |
new Elementor_Custom_Controls(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
namespace Elementor\CustomControl; | |
use \Elementor\Base_Data_Control; | |
class ImageSelector_Control extends Base_Data_Control { | |
const ImageSelector = 'image_selector'; | |
/** | |
* Set control type. | |
*/ | |
public function get_type() { | |
return self::ImageSelector; | |
} | |
/** | |
* Enqueue control scripts and styles. | |
*/ | |
public function enqueue() { | |
$url = plugin_dir_path(__FILE__).'/inc/elementor/assets/css/'; | |
// Styles | |
wp_enqueue_style('image-selector', $url.'image-selector.css', array(), ''); | |
} | |
/** | |
* Set default settings | |
*/ | |
protected function get_default_settings() { | |
return [ | |
'label_block' => true, | |
'toggle' => true, | |
'options' => [], | |
]; | |
} | |
/** | |
* control field markup | |
*/ | |
public function content_template() { | |
$control_uid = $this->get_control_uid('{{ value }}'); | |
?> | |
<div class="elementor-control-field"> | |
<label class="elementor-control-title">{{{ data.label }}}</label> | |
<div class="elementor-control-image-selector-wrapper"> | |
<# _.each( data.options, function( options, value ) { #> | |
<input id="<?php echo $control_uid; ?>" type="radio" name="elementor-image-selector-{{ data.name }}-{{ data._cid }}" value="{{ value }}" data-setting="{{ data.name }}"> | |
<label class="elementor-image-selector-label tooltip-target" for="<?php echo $control_uid; ?>" data-tooltip="{{ options.title }}" title="{{ options.title }}"> | |
<img src="{{ options.url }}" alt="{{ options.title }}"> | |
<span class="elementor-screen-only">{{{ options.title }}}</span> | |
</label> | |
<# } ); #> | |
</div> | |
</div> | |
<# if ( data.description ) { #> | |
<div class="elementor-control-field-description">{{{ data.description }}}</div> | |
<# } #> | |
<?php | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.elementor-control-image-selector-wrapper input[type="radio"] { | |
display: none; | |
} | |
.elementor-label-block .elementor-control-image-selector-wrapper{ | |
width: 100%; | |
margin-top: 10px; | |
} | |
.elementor-control-image-selector-wrapper .elementor-image-selector-label { | |
display: inline-block; | |
border: 3px solid transparent; | |
cursor: pointer; | |
overflow: hidden; | |
} | |
.elementor-control-image-selector-wrapper input:checked+.elementor-image-selector-label { | |
border: 3px solid #a4afb7; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
namespace ElementorWidgets\Widgets; | |
use Elementor\Widget_Base; | |
use Elementor\Controls_Manager; | |
if (!defined('ABSPATH')) exit; // Exit if accessed directly | |
/** | |
* Elementor Custom Widget Test | |
*/ | |
class Custom_Widget extends Widget_Base { | |
public function get_name() { | |
return 'test_addon'; | |
} | |
public function get_title() { | |
return __('Test Box', 'text-domain'); | |
} | |
public function get_categories() { | |
return ['general']; | |
} | |
/** | |
* Register the widget controls. | |
*/ | |
protected function _register_controls() { | |
$this->start_controls_section( | |
'page_layout_section', | |
[ | |
'label' => __('Page Layout', 'text-domain'), | |
'tab' => Controls_Manager::TAB_CONTENT, | |
] | |
); | |
//Image selector | |
$this->add_control( | |
'page_layout', | |
[ | |
'label' => esc_html__('Layout', 'text-domain'), | |
'type' => \Elementor\CustomControl\ImageSelector_Control::ImageSelector, | |
'options' => [ | |
'left-sidebar' => [ | |
'title' => esc_html__('Left', 'text-domain'), | |
'url' => 'http://localhost/test/wp-content/themes/test/assets/images/left-sidebar.png', | |
], | |
'right-sidebar' => [ | |
'title' => esc_html__('Right', 'text-domain'), | |
'url' => 'http://localhost/test/wp-content/themes/test/assets/images/right-sidebar.png', | |
], | |
'no-sidebar' => [ | |
'title' => esc_html__('No Sidebar', 'text-domain'), | |
'url' => 'http://localhost/test/wp-content/themes/test/assets/images/no-sidebar.png', | |
], | |
], | |
'default' => 'right-sidebar', | |
] | |
); | |
$this->end_controls_section(); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@iqbalrony can you see my issue & code and suggest anything to save to select2 or for alternative saving selected value to input type text?
elementor/elementor#15309