Crear un tema WordPress desde cero – Formulario de búsqueda y sus resultados

WordPress ya incorpora de serie un buscador sencillo para añadir como Widget en cualquier zona de la página en el cual aparece un campo de texto y un botón de buscar. Recuerda que en capítulos anteriores ya habíamos hablado de posicionar el buscador en la cabecera de nuestro tema mytheme. Ahora queremos personalizarlo un poco.

Que hacemos si queremos cambiar el aspecto del buscador que tenemos en la cabecera?

Muy sencillo, tan solo tenemos que crear un nuevo archivo searchform.php en el que añadiremos los tags HTML que deseamos para nuestro buscador. En nuestro tema mytheme lo haremos simple.

Source code

<form method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <input type="text" class="field" name="s" id="s" placeholder="<?php _e( 'Buscar...', 'mytheme' ); ?>" value="<?php the_search_query(); ?>" />
    <input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php _e( 'Buscar', 'mytheme' ); ?>" />
</form>

Ya disponemos de nuestro marcado HTML personalizado del formulario de búsqueda. Solo nos falta editar el archivo style.css y añadir la maquetación CSS deseada.

Ahora es necesario crear el archivo que muestra los resultados de búsqueda. En nuestra plantilla mytheme tendremos que crear una nuevo archivo search.php en el que añadiremos el siguiente contenido:

dsafd

Source code

<?php get_header(); ?>
<div id="sidebar_left" class="col-xs-12 col-sm-3 col-md-3 col-lg-3 hidden-xs hidden-sm">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Left') ) : endif; ?>
</div>
 
<div id="content" class="col-xs-12 col-sm-8 col-md-6 col-lg-6">
    <h6><?php printf(__('Resultados de busqueda para: %s', 'mytheme' ), '<strong>' . get_search_query() . '</strong>'); ?></h6>
    <?php if (have_posts()): ?>
        <ul class="archive row">
            <?php while ( have_posts() ) : the_post(); ?>
                <li class="col-xs-12 col-sm-4 col-md-3 col-lg-3">  
                    <a href="<?php echo get_permalink(); ?>">
                        <?php the_post_thumbnail('thumbnail', array('class' => 'img-responsive')); ?>
                        <h5><?php the_title(); ?></h5>
                    </a>
                </li>
            <?php endwhile; ?>
        </ul>
    <?php else: ?>
        <h3><?php _e('No encontrado', 'mytheme'); ?></h3>
        <p><?php _e('Lo sentimos, no hay resultados para los criterios de busqueda.', 'mytheme'); ?></p>
    <?php endif; ?>  
</div>
 
<div id="sidebar_right" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Right') ) : endif; ?>
</div>
<?php get_footer(); ?>

Igual que hicimos para las páginas de categorías y tags (archive.php) lo primero que hacemos es incluir la cabecera de nuestra estructura y finalmente nuestro pie de página. Añadimos las 2 columnas y nuestro contenido central y así mantenemos la estructura de nuestro tema mytheme.

Como puedes observar, la parte centrar es la que tiene el listado de resultados de búsqueda donde mostramos la imagen destacada y titular del post. Hemos utilizado el mismo loop o bucle que ya utilicemos en su momento para las páginas de categorías y tags. La única diferencia es que si no se encuentran resultados, en este caso, se muestra al usuario un mensaje de que no hay resultados búsqueda.

Indice de contenido