Playing with WordPress widgets

mywidget-basic.php

<?php
/*
Plugin Name: My Widget
Plugin URI: http://mydomain.com
Description: My first widget
Author: Me
Version: 1.0
Author URI: http://mydomain.com
*/

// Block direct requests
if ( !defined('ABSPATH') )
	die('-1');
	
	
add_action( 'widgets_init', function(){
     register_widget( 'My_Widget' );
});	

/**
 * Adds My_Widget widget.
 */
class My_Widget extends WP_Widget {

	/**
	 * Register widget with WordPress.
	 */
	function __construct() {
		parent::__construct(
			'My_Widget', // Base ID
			__('My Widget', 'text_domain'), // Name
			array( 'description' => __( 'My first widget!', 'text_domain' ), ) // Args
		);
	}

	/**
	 * Front-end display of widget.
	 *
	 * @see WP_Widget::widget()
	 *
	 * @param array $args     Widget arguments.
	 * @param array $instance Saved values from database.
	 */
	public function widget( $args, $instance ) {
	
     	echo $args['before_widget'];
		if ( ! empty( $instance['title'] ) ) {
			echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'];
		}
		echo __( 'Hello, World!', 'text_domain' );
		echo $args['after_widget'];
	}

	/**
	 * Back-end widget form.
	 *
	 * @see WP_Widget::form()
	 *
	 * @param array $instance Previously saved values from database.
	 */
	public function form( $instance ) {
		if ( isset( $instance[ 'title' ] ) ) {
			$title = $instance[ 'title' ];
		}
		else {
			$title = __( 'New title', 'text_domain' );
		}
		?>
		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
			<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
		</p>
		<?php 
	}

	/**
	 * Sanitize widget form values as they are saved.
	 *
	 * @see WP_Widget::update()
	 *
	 * @param array $new_instance Values just sent to be saved.
	 * @param array $old_instance Previously saved values from database.
	 *
	 * @return array Updated safe values to be saved.
	 */
	public function update( $new_instance, $old_instance ) {
		$instance = array();
		$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

		return $instance;
	}

} // class My_Widget

mywidget-useful.php

<?php
/*
Plugin Name: My Useful Widget
Plugin URI: http://mydomain.com
Description: My useful widget
Author: Me
Version: 1.0
Author URI: http://mydomain.com
*/

// Block direct requests
if ( !defined('ABSPATH') )
	die('-1');
	
	
add_action( 'widgets_init', function(){
     register_widget( 'My_Useful_Widget' );
});	

/**
 * Adds My_Widget widget.
 */
class My_Useful_Widget extends WP_Widget {

	/**
	 * Register widget with WordPress.
	 */
	function __construct() {
		parent::__construct(
			'My_Useful_Widget', // Base ID
			__('My Useful Widget', 'text_domain'), // Name
			array('description' => __( 'My useful widget!', 'text_domain' ),) // Args
		);
	}

	/**
	 * Front-end display of widget.
	 *
	 * @see WP_Widget::widget()
	 *
	 * @param array $args     Widget arguments.
	 * @param array $instance Saved values from database.
	 */
	public function widget( $args, $instance ) {
		
		// get the excerpt of the required story
		if ( $instance['story_id'] == 0 ) {
		
			$gp_args = array(
				'posts_per_page' => 1,
				'post_type' => 'story',
				'orderby' => 'post_date',
				'order' => 'desc',
				'post_status' => 'publish'
			);

			$posts = get_posts( $gp_args );
			
			if ( $posts ) {
				$post = $post[0];
			} else {
				$post = null;
			}
		
		} else {
		
			$post = get_post( $instance['story_id'] );	
		
		}
				
		if ( array_key_exists('before_widget', $args) ) echo $args['before_widget'];
		
		if ( $post ) {
		
			echo get_the_post_thumbnail( $post->ID, array(250,500), array('class'=>'story_featured_img') );
			echo '<h3 class="story_widget_title">' . apply_filters( 'widget_title', $post->post_title ). '</h3>';
			echo '<p class="story_widget_excerpt">' . $post->post_excerpt . '</p>';
			echo '<p class="story_widget_readmore"><a href="' . get_permalink( $post->ID ) . '" title="Read the story, ' . $post->post_title . '">more...</a></p>';
			
		} else {
		
			echo __( 'No recent story found.', 'text_domain' );
		}
			
		if ( array_key_exists('after_widget', $args) ) echo $args['after_widget'];
	}

	/**
	 * Back-end widget form.
	 *
	 * @see WP_Widget::form()
	 *
	 * @param array $instance Previously saved values from database.
	 */
	public function form( $instance ) {
		
		if ( isset( $instance[ 'story_id' ] ) ) {
			$story_id = $instance[ 'story_id' ];
		}
		else {
			$story_id = 0;
		}
		?>
		
		<p>
			<label for="<?php echo $this->get_field_id( 'story_id' ); ?>"><?php _e( 'Story:' ); ?></label> 
			
			<select id="<?php echo $this->get_field_id( 'story_id' ); ?>" name="<?php echo $this->get_field_name( 'story_id' ); ?>">
				<option value="0">Most recent</option> 
		<?php 
		// get the exceprt of the most recent story
		$gp_args = array(
			'posts_per_page' => -1,
			'post_type' => 'story',
			'orderby' => 'post_date',
			'order' => 'desc',
			'post_status' => 'publish'
		);
		
		$posts = get_posts( $gp_args );

			foreach( $posts as $post ) {
			
				$selected = ( $post->ID == $story_id ) ? 'selected' : ''; 
				
				if ( strlen($post->post_title) > 30 ) {
					$title = substr($post->post_title, 0, 27) . '...';
				} else {
					$title = $post->post_title;
				}

				echo '<option value="' . $post->ID . '" ' . $selected . '>' . $title . '</option>';

			}

		?>
			</select>
		</p>
		<?php 
	}

	/**
	 * Sanitize widget form values as they are saved.
	 *
	 * @see WP_Widget::update()
	 *
	 * @param array $new_instance Values just sent to be saved.
	 * @param array $old_instance Previously saved values from database.
	 *
	 * @return array Updated safe values to be saved.
	 */
	public function update( $new_instance, $old_instance ) {
		
		$instance = array();
		$instance['story_id'] = ( ! empty( $new_instance['story_id'] ) ) ? strip_tags( $new_instance['story_id'] ) : '';
		return $instance;
	}

} // class My_Widget

tpw_admin.js

    var custom_uploader;
 
 	function image_button_click(dialog_title, button_text, library_type, preview_id, control_id) {
        
        event.preventDefault();
 
        //If the uploader object has already been created, reopen the dialog
        //if (custom_uploader) {
         //   custom_uploader.open();
        //    return;
        //}
 		
        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: dialog_title,
            button: {
                text: button_text
            },
			library : { type : library_type },            
            multiple: false
        });
        
        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            
            attachment = custom_uploader.state().get('selection').first().toJSON();
            jQuery('#' + control_id).val(attachment.url);
            
            var html = '';
            
            if (library_type=='image') {
            	html = '<img src="' + attachment.url + '">';
            }
            
            if (library_type=='video') {
            	html = '<video autoplay loop><source src="' + attachment.url + '" type="video/' + get_extension( attachment.url ) + '" /></video>';
            }
            
            jQuery('#' + preview_id).empty();
            jQuery('#' + preview_id).append(html);
        });
 		
 		//Open the uploader dialog
        custom_uploader.open();
        
    }
    
    function get_extension( url ){
    
    	return url.substr((url.lastIndexOf('.') + 1));
    
    }

tpw_construct.php

	/**
	 * Register widget with WordPress.
	 */
	function __construct() {
		parent::__construct(
			'Title_Page_Widget', // Base ID
			__('Title Page Widget (PB)', 'text_domain'), // Name
			array('description' => __( 'Creates a full-screen title page - designed for use with Site Origin\'s Page Builder plugin', 'text_domain' ),) // Args
		);
		
		add_action( 'sidebar_admin_setup', array( $this, 'admin_setup' ) );

	}
	
	function admin_setup(){

		wp_enqueue_media();
		wp_register_script('tpw-admin-js', plugins_url('tpw_admin.js', __FILE__), array( 'jquery', 'media-upload', 'media-views' ) );
		wp_enqueue_script('tpw-admin-js');
		wp_enqueue_style('tpw-admin', plugins_url('tpw_admin.css', __FILE__) );

	}

tpw_form.php

	/**
	 * Back-end widget form.
	 *
	 * @see WP_Widget::form()
	 *
	 * @param array $instance Previously saved values from database.
	 */
	public function form( $instance ) {
		
		
		$bg_video = ( isset( $instance['background_video'] ) ) ? $instance['background_video'] : '';
		$bg_image = ( isset( $instance['background_image'] ) ) ? $instance['background_image'] : '';
		$title_text = ( isset( $instance['title_text'] ) ) ? $instance['title_text'] : '';
		$title_image = ( isset( $instance['title_image'] ) ) ? $instance['title_image'] : '';

	
	?>	
		
		<div class="titlepage_widget">
		
			<h3>Title</h3>
			<p>
				<div class="widget_input">
					<label for="<?php echo $this->get_field_id( 'title_text' ); ?>"><?php _e( 'Text :' ); ?></label> 	
					<input class="title_text" id="<?php echo $this->get_field_id( 'title_text' ); ?>" 
						name="<?php echo $this->get_field_name( 'title_text' ); ?>" value="<?php echo $title_text ?>" type="text"><br/>
				</div>
				<div class="widget_input">
					<label for="<?php echo $this->get_field_id( 'title_image' ); ?>"><?php _e( 'Image :' ); ?></label> 	
					<input class="title_image" id="<?php echo $this->get_field_id( 'title_image' ); ?>" 
						name="<?php echo $this->get_field_name( 'title_image' ); ?>" value="<?php echo $title_image ?>" type="text">
					<button id="title_image_button" class="button" 
						onclick="image_button_click('Choose Title Image','Select Image','image','title_image_preview','<?php echo $this->get_field_id( 'title_image' );  ?>');">Select Image</button>			
				</div>
				<div id="title_image_preview" class="preview_placholder">
				<?php 
					if ($title_image!='') echo '<img src="' . $title_image . '">';
				?>
				</div>
			</p>	
			
			<h3>Background</h3>
			<p id="title_background_inputs">
				<label for="<?php echo $this->get_field_id( 'background_video' ); ?>"><?php _e( 'Video :' ); ?></label> 	
				<input class="background_video" id="<?php echo $this->get_field_id( 'background_video' ); ?>" 
					name="<?php echo $this->get_field_name( 'background_video' ); ?>" value="<?php echo $bg_video ?>" type="text">
				<button id="background_video_button" class="button" onclick="image_button_click('Choose Background Video','Select Video','video','background_video_preview','<?php echo $this->get_field_id( 'background_video' );  ?>');">Select Video</button>			
				<div id="background_video_preview" class="preview_placholder">
				<?php 
            		if ($bg_video!='') echo '<video autoplay loop><source src="' . $bg_video . '" type="video/' . substr( $bg_video, strrpos( $bg_video, '.') + 1 ) . '" /></video>';
				?>				
				</div>
				<label for="<?php echo $this->get_field_id( 'background_image' ); ?>"><?php _e( 'Image :' ); ?></label> 	
				<input class="background_image" id="<?php echo $this->get_field_id( 'background_image' ); ?>" 
					name="<?php echo $this->get_field_name( 'background_image' ); ?>" value="<?php echo $bg_image ?>" type="text">
				<button id="background_image_button" class="button" onclick="image_button_click('Choose Background Image','Select Image','image','background_image_preview','<?php echo $this->get_field_id( 'background_image' );  ?>');">Select Image</button>	
				<div id="background_image_preview" class="preview_placholder">
				<?php 
					if ($bg_image!='') echo '<img src="' . $bg_image . '">';
				?>				
				</div>
			</p>
			
		</div>
	
		<?php 
	}

tpw_template.php

<?php
/*
 * Template for the output of the Title Page Widget
 * Override by placing a file called tpw_template.php in your active theme
 */
 
/* Output
	background image 
	background video
	title text
	title image
*/
	$upload_dir = wp_upload_dir(); 
 
	echo '<!-- full-screen title page -->
	<header>';
		
	// background video 
		
	echo '<!-- background video -->
		<div class="bgvideo-wrapper">';
			
		if ( isset( $instance['background_video'] ) ) {
		
			$video_dir = str_replace( $upload_dir['baseurl'], $upload_dir['basedir'], $instance['background_video'] );
		
			echo '<video class="bgvideo" preload="auto" loop autoplay poster="' . $instance['background_image'] . '">';

			$ext = '.' . wp_check_filetype( $video_dir )['ext'];
		
			// check for mp4 in same folder and output if found
			$new_video_dir = str_replace( $ext, '.mp4', $video_dir );
			if ( file_exists( $new_video_dir ) ) echo '<source src="' . str_replace( $ext, '.mp4', $instance['background_video'] ) . '" type="video/mp4">';

			// check for webm in same folder and output if found
			$new_video_dir = str_replace( $ext, '.webm', $video_dir );		
			if ( file_exists( $new_video_dir ) ) echo '<source src="' . str_replace( $ext, '.webm', $instance['background_video'] ) . '" type="video/webm">';

			// check for ogg in same folder and output if found
			$new_video_dir = str_replace( $ext, '.ogg', $video_dir );		
			if ( file_exists( $new_video_dir ) ) echo '<source src="' . str_replace( $ext, '.ogg', $instance['background_video'] ) . '" type="video/ogg">';

			echo '</video>';
		}
		
	echo '</div>
			
		<h1 class="maintitle">';

		if ( isset( $instance['title_image'] ) ) {
			echo '<img src="' . $instance['title_image'] . '">';
		} elseif ( isset( $instance['title_text'] ) ) {
			echo $instance['title_text'];
		}

	echo '</h1>';
		'</header>';
?>

tpw_update.php

	/**
	 * Sanitize widget form values as they are saved.
	 *
	 * @see WP_Widget::update()
	 *
	 * @param array $new_instance Values just sent to be saved.
	 * @param array $old_instance Previously saved values from database.
	 *
	 * @return array Updated safe values to be saved.
	 */
	public function update( $new_instance, $old_instance ) {
		
		$instance = array();
		$instance['background_video'] = ( ! empty( $new_instance['background_video'] ) ) ? strip_tags( $new_instance['background_video'] ) : '';
		$instance['background_image'] = ( ! empty( $new_instance['background_image'] ) ) ? strip_tags( $new_instance['background_image'] ) : '';
		$instance['title_text'] = ( ! empty( $new_instance['title_text'] ) ) ? strip_tags( $new_instance['title_text'] ) : '';
		$instance['title_image'] = ( ! empty( $new_instance['title_image'] ) ) ? strip_tags( $new_instance['title_image'] ) : '';
		return $instance;
	}

tpw_widget.php

	/**
	 * Front-end display of widget.
	 *
	 * @see WP_Widget::widget()
	 * the 
	 * @param array $args     Widget arguments.
	 * @param array $instance Saved values from database.
	 */
	public function widget( $args, $instance ) {
	
		// use a template for the output so that it can easily be overridden by theme
		
		// check for template in active theme
		$template = locate_template(array('tpw_template.php'));
		
		// if none found use the default template
		if ( $template == '' ) $template = 'tpw_template.php';
				
		include ( $template );
			
	}

also the article which these gists are supposed to embedded in are not working for me in Chrome. Console shows this error:

Refused to execute script from 'https://gist.github.com/a942d291efdc5d60c030.js?file=mywidget-basic.php' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.