Cómo Mejorar el buscador de la plantilla Agentpress Pro con FacetWP

Hola Chicos,

Cómo muchos de vosotros sabéis he creado ya 28 vídeos para hacer una web de inmobiliaria con la plantilla Agentpress Pro.
Pero siempre hay mejoras que hacer o características que añadir ;)

Muchos de vosotros me habéis preguntado como mejorar el buscador que viene por defecto.

Sobre todo me habéis preguntado como hacer que los filtros se vayan haciendo en tiempo real según los vamos ejecutando.

Esta característica no viene por defecto pero la podemos implementar gracias al plugin FacetWP.
Este plugin cuesta 79$ y lo puedes comprar aquí o descargar gratis de la zona premium.

Hace un tiempo creé un tutorial sobre el plugin facetWP para hacer un buscador avanzado en WordPress pero en esta ocasión lo veremos concretamente para la plantilla Agentpress Pro.

En el tutorial que vas a ver a continuación hay una pega, el diseño del buscador.

El buscador que viene por defecto aunque es mejorable a nivel de filtros está perfectamente integrado, en cambio si haces el buscador con FacetWP te toca a ti añadir el css que necesites para que quede a tu gusto.

En este tutorial añado un poco de CSS pero no al nivel del que viene por defecto, por lo que si no controlas de CSS no te recomiendo que sigas este tutorial ya que el resultado a nivel de diseño te puede parecer insuficiente.

Dicho lo anterior vamos con el tutorial ;)

El código que vas a necesitar para seguir el tutorial:
Plantilla FacetWP en Ajustes –> Plantillas –>example –> Mostrar código

<?php while ( have_posts() ) : the_post(); ?>

<div style="background-color: #fff;color: #1a212b;float: left;overflow: hidden;padding: 0 0 40px;position: relative;text-align: center;width: 32.333333333%;">

<div><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>


<div> <?php the_post_thumbnail( array(370,220) ); ?> </div>

 </div>

<?php endwhile; ?>

En la hoja de estilos de la plantilla puedes añadir lo siguiente:

#text-9{
background:#1a212b;
max-width: 100%;
}
#text-9 input,#text-9 select,#text-9 textarea {
    border: medium none;
    margin: 5px;
    width: 23.375%;
    float:left;
    -webkit-appearance: none;
    
}

Siendo #text-9 el identificador del widget texto que he añadido.

Espero que el tutorial os guste ;)
Saludos
Óscar