Or, embed this snippet using GenerateWP WordPress Plugin.

Download

Clone

mdl-search

class Mdl_Widget_Search extends WP_Widget {

	public function __construct() {

		parent::__construct(
			'mdl-search',
			__( 'Search', 'meh' ),
			array(
				'description' => __( 'An animated search form', 'meh' ),
				'classname'   => 'mdl-search',
			)
		);

	}

	public function widget( $args, $instance ) {

 		/* If a title was input by the user, display it. */
		if ( ! empty( $instance['title'] ) ) {
	        echo $args['before_title'];
	        echo apply_filters( 'widget_title', $args['title'], $instance, $this->id_base );
	        echo $args['after_title'];
		}
?>
<form action="/" method="get" class="mdl-textfield mdl-js-textfield mdl-textfield--expandable u-ml-auto" action="<?php echo home_url( '/' ); ?>">
	<label class="mdl-button mdl-js-button mdl-button--icon u-m0" for="search"><i class="material-icons">search</i></label>
<div class="mdl-textfield__expandable-holder">
	<input class="mdl-textfield__input u-lh-2 search-field u-p0 u-border0 u-text-white u-bg-frost-1" type="text" name="s" id="search" value="<?php the_search_query(); ?>" />
</div>
</form>
<?php

	}

	public function form( $instance ) {

		// Set default values
		$instance = wp_parse_args( (array) $instance, array( 
			'meh_title' => 'Title',
		) );

		// Retrieve an existing value from the database
		$meh_title = !empty( $instance['meh_title'] ) ? $instance['meh_title'] : '';

		// Form fields
		echo '<p>';
		echo '	<label for="' . $this->get_field_id( 'meh_title' ) . '" class="meh_title_label">' . __( 'Title', 'meh' ) . '</label>';
		echo '	<input type="text" id="' . $this->get_field_id( 'meh_title' ) . '" name="' . $this->get_field_name( 'meh_title' ) . '" class="widefat" placeholder="' . esc_attr__( 'Title', 'meh' ) . '" value="' . esc_attr( $meh_title ) . '">';
		echo '</p>';

	}

	public function update( $new_instance, $old_instance ) {

		$instance = $old_instance;

		$instance['meh_title'] = !empty( $new_instance['meh_title'] ) ? strip_tags( $new_instance['meh_title'] ) : '';

		return $instance;

	}

}

function meh_register_widgets() {
	register_widget( 'Mdl_Widget_Search' );
}
add_action( 'widgets_init', 'meh_register_widgets' );