Ask your WordPress questions! Pay money and get answers fast! (more info)

Where do I customize the built-in search widget?


I need to make some minor tweaks to the HTML that is created by the built in search widget. That is, I have defined a "Top" sidebar, and have dragged the Search widget to it. But I need to customize some of the HTML automatically generated or the Search widget. What file do I edit?

I did see this in wp-includes/default-widgets.php, but this seems to have no effect on the (front end) of my site:

function WP_Widget_Search() {
$widget_ops = array('classname' => 'widget_search', 'description' => __( "A search form for your site") );
$this->WP_Widget('search', __('Find'), $widget_ops);

This effects the dashboard. But where do I change the HTML that appears on the public page?

Answers (3)


Dan | gteh answers:

You were on the right path.. find
class WP_Widget_Search extends WP_Widget {

inside default-widgets.php and then scroll down a few lines to 197:
<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?> <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); ?>" /></label></p>

and customize as you need to

Dan | gteh comments:

also are oyu sure you can't just do it using CSS? If you edit that file, it will cause problems if/when you upgrade wordpress to a newer version because the file will get overwritten and you'll lose your changes.

You should be able to completely style the search widget using only css

Lawrence Krubner comments:

I added a "hi" just to see something change, but it did not:

<p>hi<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="Find" /></label></p>

Is this ever overwritten in a theme? I'm using the f8 and f8-lite themes. If this was over-written, where do you think the over riding would be?

Dan | gteh comments:

sorry my mistake.. look here:


for line 160:

$form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
<div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
<input type="text" value="' . get_search_query() . '" name="s" id="s" />
<input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />

Dan | gteh comments:

That is part of the get_search_form() function

function get_search_form($echo = true) {

Dan | gteh comments:

That file wp-includes/general-template.php is not overwritten by themes, but it is overwritten when you upgrade WordPress lets say from version 3.05 to 3.1 or when 3.2 comes out etc.... it is separate from your theme and part of the core wordpress files. you should generally not make changes to core files because as soon as you update, you lose the change.

If you really need to style the search form so much that you can't do it with just CSS, then maybe rewrite the search form within your theme's functions.php file


Vidyut Kale answers:

I suggest that you don't edit anything that could later be upgraded. There is a 'cleaner' way to do it.


And then you can write your own widget (even if you copy the original and alter slightly) and register that.

The example from the Wordpress function reference:

class MyNewWidget extends WP_Widget {
function MyNewWidget() {
//Widget code

function widget($args, $instance) {
//Widget output

function update($new_instance, $old_instance) {
//Save widget options

function form($instance) {
//Output admin widget options form


Just wanted to say that this is quite unusual. I have never needed to edit the search widget before (or write my own). Are you certain that what you are trying to achieve isn't going to happen without changing the widget?


Alkesh Gupta answers:

Just edit searchform.php from your theme folder.