步骤一

加入functions.php的代码

//搜索小工具
add_action ( 'widgets_init', create_function ( '', 'return register_widget("Inlo_Widget_Search");') );
class Inlo_Widget_Search extends WP_Widget {
    function Inlo_Widget_Search() {
        $widget_ops = array (
                'classname' => 'Inlo_Widget_Search',
                'description' => '站内搜索功能'
        );
        $this->WP_Widget ( 'Inlo_Widget_Search', 'INLO-搜索工具', $widget_ops );
    }
    function form($instance) {
        $instance = wp_parse_args ( ( array ) $instance, array (
                'title' =>    '搜索',
        ) );
        $title = $instance ['title'];
?>
<p>
    <label for="<?php echo $this->get_field_id('title'); ?>">
        标题:<input type="text" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $title; ?>" />
    </label>
</p>
<?php
    }
    function widget($args, $instance) {
    $form = '
        <form class="s-form" action="/?s=">
            <input type="text" name="s" class="s-key" required />
            <input type="submit" value="搜一搜" class="s-sub tra" title="搜索" />
        </form>';
    echo '
        <div class="widget jv-search">
            <h3 class="widget-title">'. $instance['title'] .'</h3>
            <div class="jv-custom inlo-search">
                '.$form.'
            </div>
        </div>';
    }
}

步骤二

相应的CSS,下面是个参考

#sidebar .s-key{width:75%}
#sidebar .s-sub{width:20%;background-color:#4773b1;color:#fff;border:0;position:absolute;bottom:0px;top:0px}
#sidebar .s-sub:hover{background-color:#306fa6}
.inlo-search form{position:relative}
.jv-search{padding-bottom:10px}