WordPress logo

Adicionar seu próprio formulário de pesquisa para temas WordPress é bastante simples na verdade, basta criar um arquivo chamado searchform.php dentro da pasta do seu tema com o novo formulário, em seguida chamar a função get_search_form no local onde você deseja que ele seja apresentado.

Antes que você continue, lembre-se de ler as aulas anteriores:

Vamos ver mais detalhes sobre o novo formulário do seu tema abaixo.

Criando o novo formulário

Abra seu editor de textos padrão (texto puro) e crie um novo arquivo chamado searchform.php.

Nele adicione o seguinte:

<div class="conteudo-pesquisa">
	<form role="search" method="get" class="formulario-pesquisa" action="<?php 
		echo home_url( '/' ); ?>">
		
		<!-- Os campos estão invertidos, por conta do nosso CSS, 
		você pode modificar isso se preferir -->
		<input type="submit" class="submit-pesquisa" value="Pesquisar" />
		<input type="search" class="input-pesquisa" placeholder="Pesquisar" value="<?php 
		echo get_search_query() ?>" name="s" required />
		
	</form>
</div>

Perceba que o HTML é maleável, você pode adicionar o que preferir ali, as únicas partes que são importantes são:

  • O nome do campo principal deve ser “s”;
  • O action do formulário deverá conter echo home_url( ‘/’ );

O resto é a gosto do freguês.

Adicionando o form em nosso “header.php”

Agora devemos chamar a função que vai adicionar o arquivo searchform.php em nosso layout. Para nosso caso, vamos utilizar o arquivo “header.php“.

Escolha o local adequado e adicione a função:

<?php get_search_form(); ?>

Veja nosso header.php completo:

<!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>

<head>
	<!-- O charset padrão -->
	<meta charset="<?php bloginfo('charset'); ?>">
	
	<!-- Necessário para layout responsivo -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<!-- O título do blog -->
	<title><?php wp_title(''); ?></title>

	<!-- 
	O restante do cabeçalho que virá dentro da head. 
	Criado automaticamente pelo WordPress. 
	-->
	<?php wp_head(); ?>
</head>

<!-- Início do body -->
<body <?php body_class(); ?>>

<div id="pagina" class="pagina"> <!-- .pagina -->

<header class="conteudo cabecalho padding-total">
	<div class="linha clearfix">
		<div class="colunas principal">
			<div class="conteudo-coluna margem-total">
				<h1> 
					<a href="<?php bloginfo('url'); ?>">
						<?php bloginfo('name'); ?> 
					</a>
				</h1>
			</div>
		</div>
		
		<div class="colunas lateral">
			<div class="conteudo-coluna margem-total">
				<div class="search-form">
					<?php get_search_form(); ?>
				</div>
			</div>
		</div>
	</div>
</header>

 O CSS para nosso formulário

Para o CSS, você pode adicionar o que preferir, veja como fiz o meu (css/main-style.css):

/* Pesquisa */
.conteudo-pesquisa {
	text-align: right;
	padding: 20px 0 0 0;
}
.formulario-pesquisa {
	font-size: 0;
}
.input-pesquisa, .submit-pesquisa {
	display: inline-block;
	font-size: 14px;
	line-height: 30px;
	height: 30px;
	border: none;
	font-family: sans-serif;
	float: right;
	padding: 0 10px;
}

Isso deverá gerar o mesmo apresentado na imagem abaixo:

Formulário de pesquisa para temas WordPress

Formulário de pesquisa para temas WordPress

Download

Caso queira baixar o código que criamos até agora, acesse o link abaixo:

Descompacte o arquivo dentro da pasta wp-content/themes e ative o tema.

Em caso de dúvidas, basta deixar sua pergunta nos comentários.