Add an Awesome Custom Search Box Widget to WordPress

wperror-custom-search-widget Do you mind how to create this beautiful custom search box as example on the left. Here we go with complete tutorial with both PHP, HTML and CSS part on this great looking Custom Search WordPress Widget.

Custom Search Widget for WordPress

[php]
/**
* Snippet Name: Add an Awesome Custom Search Box Widget to WordPress
* Snippet URL: http://wperror.com/create-awesome-search-widget-add-wordpress.html
*/

// Creating the widget
class wpe_search extends WP_Widget {

function __construct() {
parent::__construct(
// Base ID of your widget
‘wpe_search’,

// Widget name will appear in UI
__(‘WPError Custom Search’, ‘wpe_search_domain’),

// Widget description
array( ‘description’ => __( ‘Search widget based on WPError Tutorial’, ‘wpe_search_domain’ ), )
);
}

// Creating widget front-end
// This is where the action happens
public function widget( $args, $instance ) {
$title = apply_filters( ‘widget_title’, $instance[‘title’] ); ?>
<div class="wpe-search-block">
<h4><?php if (! empty( $title )) { echo $title; } else { echo ‘Search">'; } ?></h4>
<div class="wpe-main-block">
<form role="search" method="get" class="search-form" action="http://wperror.com/">
<div class="wpe-content-block"><input placeholder="Search…" class="form-control" name="s" title="Search for:" type="search"></div>
<div class="wpe-action-block"><input value="Search" class="search btn wpe-search" type="submit"></div>
</form>
</div>
</div>
<?php }
// Widget Backend
public function form( $instance ) {
if ( isset( $instance[ ‘title’ ] ) ) {
$title = $instance[ ‘title’ ];
}
else {
$title = __( ‘New title’, ‘wpe_search_domain’ );
}
// Widget admin form
?>
<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
}

// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance[‘title’] = ( ! empty( $new_instance[‘title’] ) ) ? strip_tags( $new_instance[‘title’] ) : ”;
return $instance;
}
} // Class wpe_search ends here

// Register and load the widget
function wpe_load_widget() {
register_widget( ‘wpe_search’ );
}
add_action( ‘widgets_init’, ‘wpe_load_widget’ );
[/php]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>