Filtro de Productos con PHP y JavaScript en WordPress

Construir un filtro dinámico de productos es una de las funcionalidades más útiles en cualquier tienda o catálogo desarrollado con WordPress. Aquí se aborda paso a paso cómo crear un selector de categorías en la página principal, cargarlo con datos reales de taxonomías y preparar la comunicación con el servidor mediante Ajax y jQuery, sentando las bases para un filtrado sin recarga de página.

¿Cómo agregar un selector de categorías en la página principal?

El punto de partida es el archivo front page, donde ya existe un loop que muestra todos los productos dentro de un row con su título principal. Para incorporar el filtro se añade una nueva columna con clases de Bootstrap que ocupe todo el ancho del contenedor [01:00].

Dentro de esa columna se crea un elemento select con las siguientes características:

• name e id con el valor categorias_productos.
• Una primera opción con value vacío y el texto "Todas las categorías", que indica que no hay filtro activo.
• La clase form-control de Bootstrap para mejorar la apariencia visual del campo [02:05].

html <select name="categorias_productos" id="categorias_productos" class="form-control">

<option value="">Todas las categorías</option> </select>

¿Cómo cargar las categorías dinámicamente con get_terms?

Para que el selector muestre las categorías reales se utiliza la función get_terms de WordPress [02:30]. Esta función recibe dos parámetros principales:

• El nombre de la taxonomía (el slug que se definió al registrarla, por ejemplo categoria_productos).
• Un array de argumentos; en este caso se pasa 'hide_empty' => true para ocultar términos sin productos asociados.

El resultado se almacena en una variable $terms, que contiene un array de objetos. Cada objeto posee propiedades como slug (identificador único del término) y name (nombre visible). Con un foreach se recorre ese array y se genera dinámicamente cada <option> [03:20]:

php

<?php $terms = get_terms('categoria_productos', array('hide_empty' => true)); foreach ($terms as $term) { echo '<option value="' . $term->slug . '">' . $term->name . '</option>'; } ?>

Un error frecuente al concatenar cadenas en PHP es olvidar el operador punto (.), lo que provoca un error de sintaxis. Al corregirlo, el selector muestra correctamente las opciones —en el ejemplo, "Indumentaria" y "Souvenirs" [04:40].

¿Cómo configurar jQuery para escuchar cambios en el selector?

El siguiente paso ocurre en el archivo JavaScript del tema. Para que WordPress reconozca correctamente jQuery, es necesario encapsular todo el código dentro de una estructura específica [05:30]:

javascript (function($) { // Todo el código jQuery va aquí })(jQuery);

El parámetro $ dentro de la función permite usar el signo de pesos como alias de jQuery sin conflictos con otras librerías. Un detalle importante: todo el código debe estar dentro de esta función contenedora, ya que de lo contrario los eventos no se registran correctamente [06:50].

¿Cómo detectar el evento change con jQuery?

Se localiza el selector por su id y se le asigna el evento change. Cada vez que el usuario elige una categoría distinta, se ejecuta la función asociada:

javascript $('#categorias_productos').change(function() { // Lógica del filtro });

Para verificar que el evento funciona, se puede colocar un console.log('hola') dentro de la función y observar la consola del navegador [06:20].

¿Cómo se estructura la llamada Ajax en jQuery?

Una vez confirmado el evento, se reemplaza el console.log por la función $.ajax, que recibe un objeto con parámetros clave [07:30]:

• url: la dirección del servidor que procesará la petición (se resolverá en la siguiente etapa mediante la inyección de variables desde PHP a JavaScript).
• method: el tipo de petición HTTP, en este caso 'POST'.
• data: la información que se enviará al servidor, como la categoría seleccionada.

javascript $.ajax({ method: 'POST', url: '', // Se definirá con datos inyectados desde PHP data: {} });

El paso pendiente —y fundamental— es aprender a pasar la URL de Ajax desde PHP al archivo JavaScript. WordPress utiliza un mecanismo particular para esto que permite localizar correctamente el endpoint del servidor y completar el ciclo de comunicación asíncrona.

Si ya trabajaste con taxonomías personalizadas y quieres llevar tu tema al siguiente nivel con filtros dinámicos, comparte cómo estás estructurando tu proyecto o qué dudas te surgen al integrar Ajax con WordPress.