Hace poco el amigo bet0x publicó su Wordpress Suggest, en ese momento yo estaba haciendo la primera versión de BlueContent y como estaba renegando con el CSS no le di mucha importancia. Una vez terminada mi lucha con la hoja de estilos, volví sobre el tema con la idea de integrarlo en el Theme pero opté por buscar una alternativa que aproveche el uso de Prototype (framework javascript que estoy empecinado en usar).

Digo que estoy empecinado en usar Prototype porque, hablando claro, es “el framework javascript” por excelencia; además son varios los plugins que lo estan usando (Compártelo por ejemplo); por lo tanto me pareció una buena opción aprovechar la carga de este framework.

Entonces; si estas haciendo un Theme para Wordpress, tenes pensado incluir Prototype y queres tener un Live Searching la siguiente es una buena forma de integrar todo:

Integrando Live Search en Wordpress con Prototype…


*antes que nada una pequeña aclaracion, si no tenes pensado incluir en tu theme la librería prototype te recomiendo que uses el método de bet0x (te ahorrarías unos cuantos kb).

  • Si el Theme en el cual estas trabajando ya carga Prototype podes saltarte este paso. Si no, lo primero que tenemos que hacer es descargar prototype (aquí) y guardarlo en la carpeta donde se encuentra el theme donde lo queremos integrar (ej.: /wp-content/themes/mitheme/prototype.js), luego tenemos que incluir la siguiente línea en el archivo header.php de tu Theme entre las etiquetas <head></head> :
  • El siguiente paso, descargar el script live_search.js (aquí) (que es el encargado de realizar las transacciones Ajax necesarias) y guardarlo en el mismo directorio del Theme (ej.: /wp-content/themes/miprimertheme/live_search.js).
  • Ahora creamos un archivo llamado search_results.php en el mismo directorio del Theme en el que estamos trabajando y luego copiamos y pegamos el siguiente código:
  • Antes de seguir con el paso siguiente tendremos que verificar si la estructura del Formulario de busqueda es como la siguiente, en el caso contrario deberemos editarlo para que quede igual a este:
  • Bien, ahora si, el paso final. Si nuestro Theme ya tiene el archivo functions.php deberemos copiar el código que sigue en el final de dicho archivo, en el caso de que dicho archivo no exista deberemos crearlo (copiando y pegando el código siguiente) y guardándolo en el directorio del Theme con el nombre functions.php:

Listo, si todo salio bien ya tendremos un Live Search Integrado en nuestro Theme de Wordpress.