Events, custom post type plugin in wordpress with elementor widget to display all Events

Question

I am creating a custom plugin to create 'Events' custom post type which also adds a widget in Elementor

to display upcoming events. I have registered custom post type in main file of plugin which is custom-events-plugin.php. Elementor widget file is elementor-widget.php where I have added code of widget to display all Events similar to Elementor Pro 'Posts' Widget. Custom Post type is working fine in dashboard but the issue I am facing is that my custom Events Widget doen't show in Elementor Panel. I am posting the code of elementor-widget.php. Can anyone has a look and find the issue where I am going wrong.

<?php
// elementor-widget.php

class Elementor_Custom_Event_Widget extends \Elementor\Widget_Base {

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

    public function get_title() {
        return esc_html__( 'Custom Event Widget', 'sufyanmuhammad.com/events' );
    }

    public function get_icon() {
        return 'fa fa-calendar';
    }

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

    protected function _register_controls() {
        $this->start_controls_section(
            'section_content',
            [
                'label' => esc_html__( 'Content', 'sufyanmuhammad.com/events' ),
            ]
        );

        $this->add_control(
            'number_of_events',
            [
                'label'   => esc_html__( 'Number of Events', 'sufyanmuhammad.com/events' ),
                'type'    => \Elementor\Controls_Manager::NUMBER,
                'default' => 5,
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings();
        $number_of_events = $settings['number_of_events'];

        // Query the custom post type
        $events_query = new WP_Query( array(
            'post_type'      => 'event',
            'posts_per_page' => $number_of_events,
        ) );

        // Display the events
        if ( $events_query->have_posts() ) {
            while ( $events_query->have_posts() ) {
                $events_query->the_post();
                ?>
                <div class="custom-event">
                    <h2><?php the_title(); ?></h2>
                    <p>Date: <?php echo get_post_meta( get_the_ID(), '_event_date', true ); ?></p>
                    <p>Time: <?php echo get_post_meta( get_the_ID(), '_event_time', true ); ?></p>
                </div>
                <?php
            }
            wp_reset_postdata();
        } else {
            echo 'No events found.';
        }
    }
}

function register_custom_event_widget( $widgets_manager ) {
    $widgets_manager->register_widget_type( new Elementor_Custom_Event_Widget() );
}
add_action( 'elementor/widgets/register', 'register_custom_event_widget' );

Answer 1

I'm not 100% sure I understand your need and what have you already tried, but just thought it would be best to point you to Elementor's docs, explaining how to add new Widgets. If that's what you're trying to do, you should follow these docs.