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]

Customize WordPress Tag Cloud Widget

Yesterday I was working on developing custom template for one Czech guy. One of the things from the list is to do was customizing the WordPress Tag Cloud Widget for Categories. During this project there was a lot specific request, unique coding and tricks witch I’m gonna explain you here at WPError in next several days.

I was supposed to setup the Tag Cloud Widget to show only 11 categories by count from the categories list. Okay it might looks strange as we are talking about Tag cloud widget and categories in cloud, but let me explain it for you a little. The tag cloud is old WordPress function, but since WordPress 2.8 update it’s upgraded and it’s working with all taxonomies witch are by default tags and categories plus any other custom taxonomies.

[php]
// Parameters accepted by tag cloud widget
// @url http://codex.wordpress.org/Function_Reference/wp_tag_cloud
$args = array(
‘smallest’ => 8,
‘largest’ => 22,
‘unit’ => ‘pt’,
‘number’ => 45,
‘format’ => ‘flat’,
‘separator’ => \\"\n\\",
‘orderby’ => ‘name’,
‘order’ => ‘ASC’,
‘exclude’ => null,
‘include’ => null,
‘topic_count_text_callback’ => default_topic_count_text,
‘link’ => ‘view’,
‘taxonomy’ => ‘post_tag’,
‘echo’ => true,
‘child_of’ => null
);
[/php]

Limit Tag Cloud Widget to 11 items and Order by Count for Categories

Tag Cloud Widget

To achieve the following widget look I was suposed to edit few tag cloud parameters:
1. Customize Font Size of items (smallest and largest)
2. Customize the order
3. Custom taxonomy select
 
 
 
 
 
 

#1 working tag cloud widget code with array

[php]
add_filter(‘widget_tag_cloud_args’,’set_number_tags’);
function set_number_tags($args) {
$args = array(‘smallest’ => 11, ‘largest’ => 11, ‘number’ => 11, ‘orderby’ => ‘count’, ‘taxonomy’ => ‘category’);
return $args;
}
[/php]

#2 working tag cloud widget code without array

[php]
add_filter( ‘widget_tag_cloud_args’, ‘wpe_widget_tag_cloud_args’ );
function wpe_widget_tag_cloud_args( $args ) {
$args[‘smallest’] = 11;
$args[‘largest’] = 11;
$args[‘number’] = 11;
$args[‘orderby’] = ‘count';
$args[‘taxonomy’] = ‘category';
return $args;
}
[/php]

Here bellow I will write and explain you few other WP Tag Cloud snippets witch you can simply use simply by past into function.php file.

Changing the Number of Tags to Display on Widget

[php]
add_filter( ‘widget_tag_cloud_args’, ‘wpe_widget_tag_cloud_args’ );
function wpe_widget_tag_cloud_args( $args ) {
$args[‘number’] = 20;
return $args;
}
[/php]

Changing the Largest and Smallest Font Sizes

Keys that we are going to use are smallest, largest and unit. As we want to display pixels on font size instead of points we have to use unit key aswell.
[php]
add_filter( ‘widget_tag_cloud_args’, ‘wpe_widget_tag_cloud_args’ );
function wpe_widget_tag_cloud_args( $args ) {
$args[‘largest’] = 8;
$args[‘smallest’] = 12;
$args[‘unit’] = ‘px';
return $args;
}
[/php]

Excluding A Tag/Term From The Tag Cloud

Exclude key is comma separated term_id list to exclude. For example ‘exclude’ => 25,36 or $args[‘exclude’] = array(25, 36);. This means that tags with the term_id 25 or 36 will NOT be displayed on the widget.
[/php]
add_filter( ‘widget_tag_cloud_args’, ‘wpe_widget_tag_cloud_args’ );
function wpe_widget_tag_cloud_args( $args ) {
$args[‘exclude’] = array(25, 36);
return $args;
}
[php]

<h3>Including A Tag/Term From The Tag Cloud</h3>
Include key is exact opposite to the exclude key, same comma separated term_id list but this time to include in widget function results. For example ‘include’ => 18, 38, 40 or $args[‘include’] = array(18, 38, 40);. This means that tags with the term_id 18 or 38 or 40 will be the only displayed terms on the widget.
[php]
add_filter( ‘widget_tag_cloud_args’, ‘wpe_widget_tag_cloud_args’ );
function wpe_widget_tag_cloud_args( $args ) {
$args[‘include’] = array(25, 36);
return $args;
}
[/php]