Create Elementor custom widget

Elemntor has many great widgets that added whit Elementor and Elemntor Pro, but if you need create your own Elementor widget, follow the steps.

Open “functions.php” file of the theme and add below code.

function hs_register_elementor_widgets( $widgets_manager ) {

    get_template_part('/example/example');

    $widgets_manager->register( new \HS_Example() );

}
add_action( 'elementor/widgets/register', 'hs_register_elementor_widgets' );

Create ” example” folder in your root of the theme and create ” example.php” in it.

Open ” example.php” file and add below code.

<?php
class HS_Example extends \Elementor\Widget_Base
{

    public function __construct($data = [], $args = null)
    {
        parent::__construct($data, $args);        
    }

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

    public function get_title()
    {
        return esc_html__('HS Example', 'hooya');
    }

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

    public function get_categories()
    {
        return ['basic'];
    }

    public function get_keywords()
    {
        return ['example'];
    }

    protected function register_controls()
    {

        // Content Tab Start

        $this->start_controls_section(
            'hs_example',
            [
                'label' => esc_html__('Content', 'hooya'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'hs_text',
            [
                'label' => esc_html__('Text', 'hooya'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('Default Text', 'hooya'),


            ]
        );

        $this->end_controls_section();

        // Content Tab End


        // Style Tab Start

        $this->start_controls_section(
            'hs_example_style',
            [
                'label' => esc_html__('Content', 'hooya'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'hs_example_color',
            [
                'label' => esc_html__('Color', 'hooya'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .example p' => 'color: {{VALUE}};',
                ],
                'default' => '#000000'
            ]
        );


        $this->end_controls_section();

        // Style Tab End

    }

    protected function render()
    {
        $settings = $this->get_settings_for_display(); ?>
        <div class="example">
            <p><?php echo esc_html($settings['hs_text']); ?></p>
        </div>
<?php
    }
}
Shopping Cart