28.06.2010

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.

19 respostas a "Customizando o campo de busca (search form) no WordPress"

  1. Fernanda disse:

    Parabéns pela iniciativa!
    Eu usei o código do artigo mas quando clico no botão “buscar” ele mostra a home e não o resultado da busca. Testei das 3 maneiras e em todas elas é o mesmo problema: o resultado da busca não aparece. Sabe me dizer porque?? Obrigada

  2. Joaci disse:

    Ruan, muito bem explicado seu artigo, porém encontrei um problema. O mesmo nao funciona no firefox. Voce sabe o que pode ser?
    Obrigado!

  3. Daniel Alves disse:

    Amigo, criei um tema.
    Ai jogo a widgets de search na sidebar, mas ela fica sem cor sem formatação nenhuma. Como faço pra estilizar com o css?/

    Tem como me ajudar?

    Agraço desde já

  4. marcio disse:

    olá muito boa suas dicas ,parabéns
    eu gostaria de saber como posso criar um link para contato usando e-mail como criar um link é simples o meu problema é como fazer esse link levar para um formulario de contato ?? pode me dar uma dica

  5. Carol Bandel disse:

    Ok, coloquei a function mas e o outro código pra chamar a função eu coloco onde? Onde eu quero que apareça o formulário, como por ex. na sidebar.php? xx

  6. Robson Alves disse:

    Bom dia

    preciso de ajuda para fazer o formulario de busca interna abaixo funcionar, alguem poderia me ajudar? Eu estava acompanhando algumas video aulas mas o professor parou de postar e não ensinou a configurar esse formulario. A unica coisa que tenho é esse codigo do formulario de busca no meu header.

    Aguardo

  7. show de bola!!! parabens pela iniciativa…..

  8. Edson disse:

    Boa Noite.
    Estou com um problema num form poderia me ajudar?
    Tenho este codigo form.
    Alguém pra dar uma força?
    Estou mexendo em um tema do wordpress e gostaria de dar uma personalizada no form dele.
    Tenho este codigo:
    <input name="s" type="text" id="s" tabindex="1" class="editbox_search" style="” value=”” onfocus=”if (this.value == ”) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ”;}” />
    Este codigo busca tudo no site, mais gostaria de duplica-lo e fazer com ele busque apenas por cidade.
    Tipo este codigo vai buscar o produto e o outro campo buscar a cidade desejada.
    Poderia me ajudar amigo?
    Valew…

  9. Thiago Santos disse:

    E se eu quiser ter outros campos para filtro da busca? Ex: buscar por nome e por categoria… com alguma informação contida nos custom fields….???

  10. Henrique Araujo disse:

    Pessoal estou com uma dificuldade, segue um exemplo abaixo

    Tenho um Post type ( Lojas )
    Nele cadastrei um Post com o Titulo

    Casas Bahia

    Tenho o Formulário que busca no post type especifico abaixo.
    <form role="search" method="get" id="searchform" action="”>

    Search for:

    o que quero é que só me traga o resultado se eu digitar Casas Bahia, e que caso eu digitar apenas casas ou digitar Bahia NÂO me traga nenhum post é possível?

  11. Boa tarde.
    Tem como faze a busca nos títulos e nos autores?
    Poderia me ajudar?
    Obrigado!

  12. Luiz disse:

    Meu campo de busca no wordpress simplesmente parou de funcionar, tudo que pesquisa não encontra resultados, descobri que não estava funcionando logo apos um usuario me informar, não fiz nenhuma alteração, meu wordpress e padrão e atualiza sozinho. sabe o que pode ser ? tem alguma dica ?

  13. Willian disse:

    Olá.
    Como deveria ficar um campo de busca similar ao da home do site viva real?
    https://www.vivareal.com.br/

    O meu só tem uma area de texto e no viva real tem 3:
    2 menus suspensose 1 área de texto que autocompleta
    Transação – tipo de imóveis – localização

    Meu código está assim:

    <form method="get" action="” class=”searchoneform”>
    <input type="hidden" value="” name=”page_id”>

    <input type="text" value="" class="form-control" name="specification-search" placeholder="”>

    Alguém pode me ajudar como eu poderia inserir mais 2 áreas de pesquisa na mesma linha, ao lado da primeira e antes do botão Submit?
    Ficando assim:
    Menu suspenso – Menu suspenso – Text – Button

  14. Gustavo disse:

    Muito obrigado, funcionou perfeitamente!

  15. Fagner Silva disse:

    Como eu faço pra ele exibir nos resultados o seguinte texto?

    FORAM ENCONTRADOS 15 RESULTADOS PARA A SUA BUSCA

  16. felipe disse:

    Gostei muito do que li aqui no seu site.Estou estudando o assunto,Mas quero agradecer por que seu texto foi muito valido. Obrigado :)

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *