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 );
			
	}

tpw_template.php line 57 has a bug as the line before closes off the echo so it doesn't look like it would get output.

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.