How do I get my custom widget to show on live site?

Question

I have created a widget that has labels & inputs & a dropdown. It shows and works on the management screen but on the live site the widget cannot be seen,

I have tried some css for dropdowns, inputs & labels. I have searched (a lot) and have tried any hints i could find.

An example widget that I found shows only the Title, not the text input or button.

Please look at my code, try it yourself and show me what I am missing.

<?php

/*
 *Plugin Name: Events
  Description: This widget allows the user to select an Event name.
  Version: 0.512
  Author: Dan Statham
 */


function gdd_Events_load_widgets() {
    write_log('gdd _Events_load_widgets');
}// gdd_Events_load_widgets

// Register the widget
function my_register_events_widget() {
    register_widget( 'gdd_Events_load_widgets' );
} //  echo('registerd');

/*function submit(){
   if(isset($_POST['submit'])){
      $selected_val = $_POST['Color'];  // Storing Selected Value In Variable
     echo "You have selected :" .$selected_val;  // Displaying Selected Value
}

}
 * 
 */
add_action( 'widgets_init', 'my_register_events_widget' );  


// The widget class
class gdd_Events_load_widgets extends WP_Widget {
    function gdd_Events_Widget() {
        /* Widget settings. */
        $widget_ops = array( 'classname' => 'event', 
                    'description' => __('Allow the user to select an Event name.', 'event') );

        /* Widget control settings. */
        $control_ops = array( 'width' => 300, 'height' => 500, 'id_base' => 'gdd_Events_Widget' );

        /* Create the widget. */
        $this->WP_Widget( 'Event', __('Event Name', 'event'), $widget_ops, $control_ops );
    } // function gdd_Events_Widget
    // Main constructor
    function __construct() {
        parent::__construct(                
                // base ID of the widget
                'gdd_Events_Widget',
                // name of the widget
                __('Event Names', 'events'),
                // widget options
                array(
                    'description' => __('Select the Event name.',
                            'events')
               )
        ); //parent __construct()
    }//function __construct()

    public function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance['eventsdropdown'] = strip_tags($new_instance['eventsdropdown']);
        return $instance;
    }
// function update

    public function widget($args, $instance) {
        // kick things off
        extract($args);
    }//function widget

    // run a query if on a page
    public function gdd_Events_Register_Widget() {
        register_widget('gdd_Events_Widget');
    }


public function form( $instance ) {
    // Check values
    if( $instance) {
    $title = esc_attr($instance['title']);
    $textarea = $instance['textarea'];
    $eventsdropdown = $instance['eventsdropdown'];
    $eventviadd = $instance['EVENTviadd'];

    } else {
    $title ='Event Selector';
    $textarea = '';
    $eventsdropdown=null;
    $eventviadd=null;
    }


    if ( isset( $instance[ 'eventsdropdown' ] ) )
    $selectedvalue = $instance[ 'eventsdropdown' ];
    else
    $selectedvalue = __( '', 'text-domain' );

    global $event;
    global $events;       
    global $wpdb;  
    global $depth;

     $events = $wpdb->get_results("SELECT id, event, description FROM mo_events order by event",ARRAY_A);
     ?>

     <label id='"label1' for="<?php echo $this->get_field_id('event'); ?>">Select an Event</label> <br>
     <select class="dropdown" id="eventsdropdown" name="eventsdropdown" title="Events Dropdown">

    <?php  
     foreach ($events as $event) {?>
             <option value=" <?php echo $event['id'] ?>"><?php echo $event['event']; ?></option> 
    <?php
    }   ?>
    </select> 
    <br><br> 
<p>
    <label id= "label2" for="number-1-EVENT">event</label><br>
    <input type="text" name="EVENT" placeholder="Select an event or enter a new event" id="EVENTviadd">
 </p>
<p>
    <label id="label3" for="number-1-EVENT">event</l<p>
            <label id="label4" for="number-1-DESCRIPTION">Description</label><br>
    <textarea name="DESCRIPTION" placeholder="Describe the event" id="DESCRIPTION"></textarea>
</p>

<?php


  } // function form  `
}

Answer 1

A widget class object contains four functions with mandatory names:

1. __construct(), which creates the widget object
2. form ($intance), which generates the form in the admin
3. update ($new_instance, $old_instance), which saves the form data in the admin
4. widget ($args, $instance), which displays the widget on the front end.

Your nr 4, widget, is empty except for an extract statement. Nothing is echoed. So nothing shows on the front end.