Neste tutorial veremos como criar uma busca padrão do WordPress e manipular o resultado da pesquisa.

Primeiro vamos inserir nosso formulário de busca no arquivo ‘header.php’ usando o código abaixo no local onde se deseja o formulário de pesquisa.

<div id="header-form">
     <?php get_search_form(); ?>
</div>

No código acima temos a chamada da função get_search_form() que conforme a documentação oficial não é necessário enviar nenhum parâmetro e traz como resultado o formulário padrão de busca que contém o seguinte código:

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
     <div><label class="screen-reader-text" for="s">Search for:</label>
          <input type="text" value="" name="s" id="s" placeholder="<?php the_search_query(); ?>" />
          <input type="submit" id="searchsubmit" value="Search" />
     </div>
</form>

Para facilitar o entendimento, vamos trabalhar com este modelo padrão em nossos exemplos. Para personalizar o formulário acima, devemos criar um arquivo com nome ‘searchform.php’. Basta copiar o código acima e personalizar.

Agora que já temos nosso formulário de busca no lugar certo, devemos agora manipular o termo pesquisado e exibir o conteúdo para o visitante da página. Por padrão, o WordPress ao efetuar esta pesquisa, busca pelo arquivo ‘search.php’, caso ele não exista no seu tema, ele direciona a pesquisa para ‘index.php’. Abaixo, explicarei o conteúdo passo a passo que será usado no arquivo ‘search.php’ e em seguida disponibilizo o código completo:

Passo 1:

<?php
get_header();

Neste primeiro trecho de código, inserimos o cabeçalho de nosso tema utilizando a função get_header().

Passo 2:

if (have_posts()) : ?>
<h2>Resultados da busca por: <?php the_search_query(); ?></h2>

Neste trecho, avaliamos se existem posts com a função have_posts(), em seguida exibimos um texto com o conteúdo da pesquisa do visitante. A função the_search_query() retorna o termo pesquisado pelo visitante.

Passo 3:

<?php
while (have_posts()) : the_post(); ?>
    <article class="post <?php if ( has_post_thumbnail() ) { ?>has-thumbnail <?php } ?>">
        <div class="post-thumbnail">
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
        </div>

Agora, iniciamos o loop while com a condição de que, enquanto houver posts, exiba os posts. Dentro da tag article estou automatizando a inserção de uma classe has-thumbnail que será importante mais à frente na estilização do tema. Em seguida, utilizando a função the_permalink() crio o link para o post em volta da miniatura do post que é retornada pela função the_post_thumbnail(). Como pode-se observar, passei o parâmetro thumbnail para a função, que fará com que o WordPress retorne a miniatura de acordo com o tamanho desejado. Abaixo estão os tamanhos padrão suportados pelo WP.

//Default WordPress
the_post_thumbnail( 'thumbnail' );     // Thumbnail (150 x 150 cortada)
the_post_thumbnail( 'medium' );        // Medium resolution (300 x 300 max height 300px)
the_post_thumbnail( 'medium_large' );  // Medium Large (Adicionado no WP 4.4) resolução (768 x 0 height infinito)
the_post_thumbnail( 'large' );         // Large resolution (1024 x 1024 max height 1024px)
the_post_thumbnail( 'full' );          // Full resolution (original size uploaded)

Passo 4:

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <?php the_excerpt(); ?>
    </article>

Aqui exibimos o título do post através da função the_title(), abaixo do título chamamos a função the_excerpt() que traz o resumo do post e em seguida fechamos a tag article que foi aberta no passo 3.

Passo 5:

<?php endwhile;
    else :
        echo '<p>Nenhum post encontrado</p>';
    endif;
get_footer();
?>

Agora encerramos o while que havia iniciado no passo 3, iniciamos o else referente ao if do passo 2 que nos traz uma mensagem de que nenhum post foi encontrado. Utilizamos endif para encerrar o bloco if e fazemos a chamada da função get_footer() para renderizar na tela o footer de nosso tema.

Com estes passos, encerramos a construção de nosso arquivo ‘search.php’ que ficou assim:

<?php
get_header();

if (have_posts()) : ?>

<h2>Resultados da busca por: <?php the_search_query(); ?></h2>

<?php
while (have_posts()) : the_post(); ?>
    <article class="post <?php if ( has_post_thumbnail() ) { ?>has-thumbnail <?php } ?>">
        <!-- post-thumbnail -->
        <div class="post-thumbnail">
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
        </div><!-- /post-thumbnail -->
    
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <?php the_excerpt(); ?>
    </article>
    
    <?php endwhile;
    else :
        echo '<p>Nenhum post encontrado</p>';
    endif;
get_footer();
?>

Neste tutorial construímos um formulário para pesquisa no WP, manipulamos o termo pesquisado pelo visitante e criamos o template para exibição. Lembrando que aqui não tratamos de nenhuma forma de estilização via CSS que fica à cargo de cada um e na particularidade de seu layout e tema.

Todas as funções relevantes utilizadas no tutorial possuem link para documentação oficial caso queiram aprofundar em cada uma delas. Deixe seu comentário e compartilhe nas redes sociais.

Até a próxima!