Skip to content

Instantly share code, notes, and snippets.

@iqbalrony

iqbalrony/custom-control-init.php

Last active December 29, 2022 09:36
Show Gist options
  • Save iqbalrony/4372a12f994c3215041680e0075d083f to your computer and use it in GitHub Desktop.
Save iqbalrony/4372a12f994c3215041680e0075d083f to your computer and use it in GitHub Desktop.
Download ZIP
Create Elementor Custom Control. Image selector control
Raw
custom-control-init.php
<?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();
Raw
image-selector-control.php
<?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
}
}
Raw
image-selector.css
.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;
}
Raw
widget.php
<?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();
}
}
@shahmanish877
Copy link

shahmanish877 commented Jun 11, 2021 via email

@iqbalrony
Copy link
Author

I tried from elementor docs as well as select2. Triggering input is not working as it works in other controls for saving data. Can you provide me the project you worked on?
…
On Fri, Jun 11, 2021, 7:25 PM Iqbal Hossain Rony @.> wrote: @.* commented on this gist. ------------------------------ Can anyone help me? I am building a custom control with Select2. I have been able to select an option using ajax but when I refresh the page the value is not showing in select2. How can I let users know what was the value saved after updating when they edit in future? if you study the Select2 js code in elementor & also Select2 js library documentation it might help you. I did this type of work on a project. the process is pretty complex to do in elementor. — You are receiving this because you commented. Reply to this email directly, view it on GitHub https://gist.github.com/4372a12f994c3215041680e0075d083f#gistcomment-3776954, or unsubscribe https://github.com/notifications/unsubscribe-auth/APXSF333VEMWXMR27ZVVFDTTSIG4FANCNFSM4XUOFZ4Q .

I am not permitted to share those codes. plz, don't mind.

@shahmanish877
Copy link

shahmanish877 commented Jun 11, 2021 via email

@shahmanish877
Copy link

shahmanish877 commented Jun 11, 2021 via email •
edited
Loading

@iqbalrony
Copy link
Author

Or can you share me the actual code which saves the data like onChange or trigger. I am really confused and tried many solutions from docs as well as some forums.

you can see the Elementor pro's post widget & their custom query system's code. They modify select2 for on-click ajax requests. I got help from them.

@shahmanish877
Copy link

Does anyone know how to copy a value from one control to another? I want to assign a value of 'control1' to 'control2' when 'control1' is changed.

@shahmanish877
Copy link

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment