Skip to content

Instantly share code, notes, and snippets.

@dexit

dexit/custom-control-init.php

Forked from iqbalrony/custom-control-init.php
Created July 28, 2025 10:56
Show Gist options
  • Save dexit/4ea5ef5e5c4d4093c574b3770899b16d to your computer and use it in GitHub Desktop.
Save dexit/4ea5ef5e5c4d4093c574b3770899b16d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @iqbalrony iqbalrony revised this gist May 7, 2020. No changes.
  2. @iqbalrony iqbalrony created this gist Aug 6, 2019.
    22 changes: 22 additions & 0 deletions custom-control-init.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    <?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();
    62 changes: 62 additions & 0 deletions image-selector-control.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,62 @@
    <?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
    }

    }
    16 changes: 16 additions & 0 deletions image-selector.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    .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;
    }
    65 changes: 65 additions & 0 deletions widget.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    <?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();

    }
    }