Introducción

En este tutorial detallado aprenderás a crear chips de filtros (etiquetas filtrables estilo píldora) para páginas tipo archivos en WordPress usando HTML y CSS, con ejemplos de PHP y JavaScript para integrarlos en tu tema. Los chips permiten mostrar filtros activos, activarlos/desactivarlos con enlaces y mejorar la experiencia de navegación en listados de posts, productos o cualquier archivo que use parámetros en la URL.

Requisitos y consideraciones

• Conocimientos básicos de edición de temas de WordPress (archivos como archive.php, index.php o plantillas parciales).
• Acceso para añadir CSS al archivo style.css del tema hijo o encolar un archivo CSS propio.
• Opcional: añadir JavaScript para mejoras UX (AJAX o eliminación en sitio).
• Usaremos funciones nativas de WordPress como get_terms(), add_query_arg() y remove_query_arg() para construir enlaces seguros.

Concepto y estructura HTML

Un chip consiste en un elemento visual compacto que muestra la etiqueta del filtro y, opcionalmente, un icono de cierre para quitarlo. Es importante que los chips sean enlaces (a) para que funcionen sin JavaScript y mantengan accesibilidad y SEO.

Estructura HTML de ejemplo

Marcado simple para un chip que actúa como enlace para activar/desactivar un filtro:

ltdiv class=filter-chipsgt
  lta href=lt?php echo esc_url( url_con_filtro ) ?gt class=chipgt
    ltspan class=chip-labelgtNombre del filtrolt/spangt
    lti class=chip-close aria-hidden=truegt×lt/igt
  lt/agt
lt/divgt

Generar chips dinámicamente en WordPress (PHP)

Ejemplos para:

• Mostrar chips para taxonomías (por ejemplo categorías o etiquetas).
• Mostrar chips activos a partir de las query vars de la URL.

1) Mostrar todos los términos (chips disponibles)

Este fragmento genera una lista de chips para una taxonomía llamada categoria_producto (cámbiala por la tuya):

lt?php
terms = get_terms( array(
  taxonomy => categoria_producto,
  hide_empty => false,
) )

if ( ! is_wp_error( terms )  ! empty( terms ) ) : ?>
  ltdiv class=filter-chipsgt
  lt?php foreach ( terms as term ) :
    // Construimos una URL que añade el filtro por slug de término
    url = add_query_arg( categoria_producto, term->slug, home_url( add_query_arg( array(), wp->request ) ) )
  ?gt
    lta href=lt?php echo esc_url( url ) ?gt class=chipgt
      ltspan class=chip-labelgtlt?php echo esc_html( term->name ) ?gtlt/spangt
    lt/agt
  lt?php endforeach ?gt
  lt/divgt
lt?php endif ?gt

2) Mostrar chips activos y permitir su eliminación

Cuando un filtro está activo (por ejemplo ?categoria_producto=slug), mostramos un chip con estilo activo y un enlace que elimina ese parámetro de la URL usando remove_query_arg().

lt?php
current = isset( _GET[categoria_producto] ) ? sanitize_text_field( wp_unslash( _GET[categoria_producto] ) ) : 

if ( current ) :
  // Intentamos obtener el término para mostrar el nombre legible
  term = get_term_by( slug, current, categoria_producto )
  label = term ? term->name : current

  // URL para quitar el filtro
  url_quitar = remove_query_arg( categoria_producto )

  ?gt
  ltdiv class=filter-chips active-chipsgt
    lta href=lt?php echo esc_url( url_quitar ) ?gt class=chip chip--active aria-pressed=truegt
      ltspan class=chip-labelgtlt?php echo esc_html( label ) ?gtlt/spangt
      lti class=chip-close aria-hidden=truegt×lt/igt
    lt/agt
  lt/divgt
lt?php endif ?gt

CSS: estilo detallado para chips

Un CSS completo con variantes: normal, hover, activo, removible, responsive y con transiciones suaves.

/ Contenedor /
.filter-chips {
  display: flex
  flex-wrap: wrap
  gap: 8px
  margin: 12px 0
  align-items: center
}

/ Chip base /
.chip {
  display: inline-flex
  align-items: center
  gap: 8px
  padding: 6px 10px
  border-radius: 999px / píldora /
  background: #f1f3f5
  color: #333
  text-decoration: none
  font-size: 0.95rem
  line-height: 1
  border: 1px solid rgba(0,0,0,0.06)
  transition: background .18s ease, transform .08s ease, box-shadow .12s ease
}

/ Hover y foco /
.chip:hover,
.chip:focus {
  background: #e9eef8
  transform: translateY(-1px)
  box-shadow: 0 4px 10px rgba(16,24,40,0.06)
  outline: none
}

/ Label dentro del chip /
.chip .chip-label {
  display: inline-block
  max-width: 200px
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
}

/ Icono de cierre (se puede ocultar si no se quiere visualmente) /
.chip .chip-close {
  display: inline-block
  font-style: normal
  font-weight: 600
  color: rgba(0,0,0,0.45)
  margin-left: 4px
}

/ Chip activo /
.chip--active {
  background: #2b6cb0
  color: #fff
  border-color: rgba(0,0,0,0.08)
}
.chip--active .chip-close {
  color: rgba(255,255,255,0.9)
}

/ Variante pequeña para contenedores densos /
.chip--small {
  padding: 4px 8px
  font-size: 0.82rem
}

/ Responsive: adaptamos tamaño en móviles /
@media (max-width: 480px) {
  .filter-chips { gap: 6px }
  .chip { padding: 6px 8px font-size: 0.9rem }
}

Mejoras con JavaScript (opcional)

Con JavaScript puedes interceptar la eliminación de chips para actualizar la lista sin recarga (AJAX) o para añadir animaciones. Aquí un ejemplo mínimo que evita la navegación si el enlace tiene data-remove=1 y hace un fetch para recargar el listado (requiere adaptar a tu endpoint).

// Añadir este código en un archivo JS encolado en WordPress
document.addEventListener(click, function(e) {
  var el = e.target.closest  e.target.closest(.chip[data-remove=1])
  if (!el) return

  e.preventDefault()
  var url = el.getAttribute(href)

  // Ejemplo: petición fetch para obtener nuevo fragmento HTML del listado (AJAX)
  fetch(url, { headers: { X-Requested-With: XMLHttpRequest } })
    .then(function(res){ return res.text() })
    .then(function(html){
      // Debes adaptar el selector para tu listado de posts
      var parser = new DOMParser()
      var doc = parser.parseFromString(html, text/html)
      var nuevoListado = doc.querySelector(.posts-list)
      var contenedor = document.querySelector(.posts-list)
      if (nuevoListado  contenedor) {
        contenedor.innerHTML = nuevoListado.innerHTML
        // También actualizar chips: podrías volver a insertar el bloque de chips
        var nuevoChips = doc.querySelector(.filter-chips)
        var contChips = document.querySelector(.filter-chips)
        if (nuevoChips  contChips) contChips.innerHTML = nuevoChips.innerHTML
      } else {
        // Si no se encuentra, recargamos la página como fallback
        window.location.href = url
      }
    })
    .catch(function(){ window.location.href = url })
})

Encolar el script en functions.php

function tema_enqueue_chips_scripts() {
  wp_enqueue_script( theme-filter-chips, get_stylesheet_directory_uri() . /js/filter-chips.js, array(), 1.0, true )
  // Si usas AJAX con admin-ajax o rutas, puedes pasar datos:
  // wp_localize_script( theme-filter-chips, filterChips, array( ajax_url => admin_url( admin-ajax.php ) ) )
}
add_action( wp_enqueue_scripts, tema_enqueue_chips_scripts )

Construcción robusta de URLs (añadir/quitar parámetros)

Para evitar errores y mantener compatibilidad con permalinks y paginación, usa add_query_arg() y remove_query_arg() de WordPress. Ejemplo práctico que añade varios filtros y preserva la paginación con saneamiento:

// Supongamos filtros: categoria_producto, color
base_url = remove_query_arg( paged ) // quitamos paginación al cambiar filtros

// Añadir filtro
url_add = add_query_arg( array(
  categoria_producto => mi-slug,
), base_url )

// Quitar filtro
url_remove = remove_query_arg( categoria_producto, base_url )

Buenas prácticas y accesibilidad

• Usa enlaces (a) en lugar de elementos no semánticos para que funcionen con teclado y motores de búsqueda.
• Incluye aria-pressed=true en chips activos y roles si es necesario para comunicar estado.
• Saneamiento: siempre escapa los valores con esc_url(), esc_html() y sanitiza datos de entrada (sanitize_text_field).
• Manten los chips funcionales sin JavaScript: los enlaces deben apuntar a URLs válidas que muestren el contenido filtrado en servidor.
• En contextos de mucho contenido, añade paginación y quita datos de paginación cuando cambies filtros para evitar inconsistencias.

Ejemplo completo (resumen práctico)

Plantilla parcial que muestra chips de términos y chips activos, lista mínima de posts filtrados y estilos. Integra los fragmentos mostrados anteriormente para tener una solución funcional y progresiva.

Tabla resumen de clases y su propósito

Clase	Propósito
.filter-chips	Contenedor de los chips, maneja flexbox y separación.
.chip	Estilo base del chip (píldora, padding, color).
.chip–active	Estado visual activo para chips seleccionado.
.chip-close	Icono de cierre / eliminación dentro del chip.

Conclusión técnica

Con este enfoque tienes una solución accesible y progresiva: los chips funcionan sin JavaScript (enlaces con parámetros), se estilizan con CSS para una UX moderna y pueden mejorarse con JavaScript para interacciones AJAX. Integra los fragmentos PHP en tus plantillas de archivo o en plantillas parciales, añade el CSS en tu tema hijo y, si necesitas, encola el JS con la API de WordPress para mantener buenas prácticas.