Customizando o campo de busca (search form) no WordPress

É muito fácil customizar a forma de apresentação do campo de busca (search form) no WordPress.

Primeiro, para chamar o campo de busca no seu tema de WordPress você usa o código:

<?php get_search_form(); ?>

Caso você não tenha no seu tema um arquivo chamado de searchform.php, o WordPress por padrão vai apresentar o template do campo de busca dessa forma:

<form role="search" method="get" id="searchform" action="http://www.example.com/" >
	<div><label for="s">Search for:</label>
	<input type="text" value="" name="s" id="s" />
	<input type="submit" id="searchsubmit" value="Search" />
	</div>
</form>

Para mudar esse template você pode fazer de 2 formas. Primeiro, você pode criar um arquivo searchform.php e adicionar o código abaixo:

/**
Template Name: Search Form
**/

<form action="/" method="get" accept-charset="utf-8" id="searchform" role="search">
  <div>
    <label for="s">Search for:</label>
    <input type="text" name="s" id="s" value="<?php the_search_query(); ?>" />
    <input type="submit" id="searchsubmit" value="Search" />
  </div>
</form>

E então é só editar da maneira que desejar o HTML e o CSS.

Outra maneira é criar uma função dentro do arquivo functions.php no seu tema. Dentro dele adicione o código:

function my_search_form($form) {
$form = '<form method="get" id="searchform" action="' . get_option('home') . '/" >
<div><label for="s">' . __('Search for:') . '</label>
<input type="text" value="' . attribute_escape(apply_filters('the_search_query', get_search_query())) . '" name="s" id="s" />
<input type="submit" id="searchsubmit" value="'.attribute_escape(__('Search')).'" />
</div>
</form>';
return $form;
}

Para chamar a função que você criou no seu tema, em vez do get_search_form(), você precisa usar o seguinte código:

<?php add_filter('get_search_form', 'my_search_form'); ?>

* Nota: o nome my_search_form tem de ser o mesmo nome da função que você criou no arquivo functions.php.