Create an Elementor custom widget

Elementor is a popular page builder plugin for WordPress. It allows you to easily create beautiful, responsive pages with drag-and-drop tools. Elementor also has a feature that allows you to create a custom widget for your own. This feature allows you to create unique elements for your page that are not available in the core Elementor library.

Elementor has many great widgets that are added whit Elementor and Elementor Pro. Creating a custom widget with Elementor is easy and can be done in just a few steps.

To create your own custom widget in Elementor you have to have a basic knowledge of PHP, HTML, CSS, JavaScript, and WordPress development. If you need to create your own Elementor widget, follow the steps.

Open the “functions.php” file of the theme and add the 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 an ” example” folder in your root of the theme and create ” example.php” in it.

Open the ” example.php” file and add the 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
    }
}

Once you’ve selected the type of widget you want to create, you can customize it by adding content, images, and other elements. You can also add custom CSS classes to make your widget look even more unique.

Once you create the Elementor custom widget, you can add it to any page or post on your site. To do this, simply drag and drop the widget onto the page or post where you want it to appear. You can also add it to the sidebar or footer of your website.

You can also use Elementor’s “Preview” mode to see how your widget will look on the page before you publish it. This is a great way to make sure that everything looks the way you want it to before you make it live.

Creating a custom widget with Elementor is a great way to add unique and powerful features to your website. With just a few simple steps, you can create a widget that will help you stand out from the crowd and give your visitors an enhanced experience.