Criando um site do zero com WordPress - #14 Busca com filtros no WordPress

Nesta aula realizaremos o início da configuração da nossa busca com filtro no WordPress. Para tanto, vamos criar algumas categorias aleatórias no nosso wp-admin e vamos retorná-las automaticamente. Vamos também, estilizar uma barrra abaixo do menu que será responsável pelo filtro.

Listando as categorias automáticamente.

Para listar nossas categorias automaticamente, realizaremos uma busca na tabela wp_terms do WP e vamos inserir a lista nos nossos options do select do formulário.

<div class="BuscaFiltro">
    <form name="FiltroBusca" id="FiltroBusca" action="<?php echo site_url().'/controllerFiltro'; ?>" method="post">
        <input type="hidden" id="CampoBuscaFiltro" name="CampoBuscaFiltro" value="<?php echo $_GET['CampoBusca']; ?>">
        <select name="Categoria" id="Categoria" required>
            <option value="">Categoria</option>
            <?php
            $BFetch=$wpdb->get_results("select * from wp_terms where term_id >=4");
            foreach($BFetch as $Fetch){
                echo "<option value='$Fetch->term_id'>$Fetch->name</option>";
            }
            ?>
        </select>
        <input type="submit" value="Filtrar">
    </form>
</div>

Estilizando nossa barra de filtros

Vamos também estilizar nossa barra de filtro com o CSS.

.BuscaFiltro{float:left; width: 100%; background: #333; color:#fff; font-weight: bold; text-align: center; padding: 10px 5%;}
    .BuscaFiltro input[type='submit']{display:inline-block; width: 20%; height: 40px; font-size: 17px; color:#FFF; font-weight: bold; text-align: center; border:0; cursor:pointer; background: #83AA4B;}
    .BuscaFiltro select{display:inline-block; width: 30%; height: 40px; vertical-align: top;}