Elementor Custom Radio Button

January 9, 2025 · AI Conversations

User

elementor custom element give radio button to yes or no

Assistant

To add a radio button with "Yes" and "No" options to a custom Elementor widget, you can extend Elementor's custom controls and define the control in your widget's settings. Here's a step-by-step guide:

### Steps to Add a Radio Button
1. **Create a Custom Elementor Widget**
If you haven't already, create a custom Elementor widget by extending the base `ElementorWidget_Base` class.

2. **Define the Radio Control**
Use Elementor's built-in `radio` control to add a radio button with "Yes" and "No" options.

### Example Code
Here's how you can create a custom widget with a radio button:

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

class Elementor_Custom_Radio_Widget extends ElementorWidget_Base {

    public function get_name() {
        return 'custom_radio_widget';
    }

    public function get_title() {
        return __( 'Custom Radio Widget', 'text-domain' );
    }

    public function get_icon() {
        return 'eicon-radio';
    }

    public function get_categories() {
        return [ 'general' ]; // Replace with your desired category
    }

    protected function _register_controls() {
        $this->start_controls_section(
            'radio_section',
            [
                'label' => __( 'Radio Options', 'text-domain' ),
                'tab' => ElementorControls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'radio_option',
            [
                'label' => __( 'Choose an Option', 'text-domain' ),
                'type' => ElementorControls_Manager::RADIO,
                'options' => [
                    'yes' => __( 'Yes', 'text-domain' ),
                    'no'  => __( 'No', 'text-domain' ),
                ],
                'default' => 'yes',
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();

        echo '<div class="custom-radio-widget">';
        echo '<p>' . esc_html__( 'You selected:', 'text-domain' ) . ' ' . esc_html( $settings['radio_option'] ) . '</p>';
        echo '</div>';
    }
}

### Explanation of the Code
1. **`add_control` Method**: Adds a radio button control with two options: "Yes" and "No".
– `type`: Specifies the control type as `RADIO`.
– `options`: Defines the available options for the radio button.
– `default`: Sets the default selected option.

2. **Rendering the Selected Option**: The `render` method retrieves the selected option using `$this->get_settings_for_display()` and displays it.

3. **Widget Registration**: Ensure that this widget is registered in Elementor by adding it in your plugin's `plugin.php` file or a similar entry point.

### Register the Widget
If you haven't already registered your custom widget, include the following code in your Elementor custom plugin:

function register_custom_radio_widget( $widgets_manager ) {
    require_once( __DIR__ . '/custom-radio-widget.php' ); // Path to your widget file
    $widgets_manager->register( new Elementor_Custom_Radio_Widget() );
}
add_action( 'elementor/widgets/register', 'register_custom_radio_widget' );

### Output
– A new widget named "Custom Radio Widget" will appear in the Elementor editor.
– It will include a radio button field in its settings.
– The selected option will display on the front end.

User

Fatal error: Uncaught Error: Undefined constant ElementorControls_Manager::RADIO

Assistant

The error occurs because the constant `ElementorControls_Manager::RADIO` is undefined. This suggests that the `RADIO` control type is not natively available in Elementor. Instead, you should use the `CHOOSE` control type to achieve similar functionality. The `CHOOSE` control provides radio-style buttons with additional flexibility.

### Updated Code with `CHOOSE` Control
Here’s how you can replace the `RADIO` control with the `CHOOSE` control:

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

class Elementor_Custom_Radio_Widget extends ElementorWidget_Base {

    public function get_name() {
        return 'custom_radio_widget';
    }

    public function get_title() {
        return __( 'Custom Radio Widget', 'text-domain' );
    }

    public function get_icon() {
        return 'eicon-radio';
    }

    public function get_categories() {
        return [ 'general' ]; // Replace with your desired category
    }

    protected function _register_controls() {
        $this->start_controls_section(
            'radio_section',
            [
                'label' => __( 'Radio Options', 'text-domain' ),
                'tab' => ElementorControls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'radio_option',
            [
                'label' => __( 'Choose an Option', 'text-domain' ),
                'type' => ElementorControls_Manager::CHOOSE,
                'options' => [
                    'yes' => [
                        'title' => __( 'Yes', 'text-domain' ),
                        'icon' => 'eicon-check-circle', // Icon for "Yes"
                    ],
                    'no' => [
                        'title' => __( 'No', 'text-domain' ),
                        'icon' => 'eicon-ban', // Icon for "No"
                    ],
                ],
                'default' => 'yes',
                'toggle' => true, // Allows toggling between options
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();

        echo '<div class="custom-radio-widget">';
        echo '<p>' . esc_html__( 'You selected:', 'text-domain' ) . ' ' . esc_html( ucfirst( $settings['radio_option'] ) ) . '</p>';
        echo '</div>';
    }
}

### Key Changes in the Updated Code
1. **Using `CHOOSE` Instead of `RADIO`**:
The `CHOOSE` control allows you to define selectable options with titles and icons, providing a better user experience in the Elementor editor.

2. **`toggle` Parameter**:
Setting `toggle` to `true` ensures that only one option can be selected at a time, mimicking the behavior of a radio button.

3. **Options Array**:
Each option includes a `title` and an `icon`, which are displayed in the Elementor editor.

### Register the Widget
Ensure you register the widget as before:

function register_custom_radio_widget( $widgets_manager ) {
    require_once( __DIR__ . '/custom-radio-widget.php' ); // Path to your widget file
    $widgets_manager->register( new Elementor_Custom_Radio_Widget() );
}
add_action( 'elementor/widgets/register', 'register_custom_radio_widget' );

### Output
– A new widget named "Custom Radio Widget" will appear in the Elementor editor.
– It will display a toggle-like radio button control in the widget's settings panel.
– The selected option ("Yes" or "No") will be displayed on the front end.

Elementor Custom Radio Button

Leave a Comment Cancel