Introducción

Este artículo explica, con todo detalle y ejemplos prácticos, cómo convertir o presentar el widget de categorías de WordPress como un dropdown y cómo aplicar un estilo profesional usando únicamente CSS (con la mínima modificación PHP cuando sea necesario para cambiar la estructura HTML). Incluye alternativas: aprovechar la función nativa de WordPress que genera un ltselectgt y crear un dropdown visual a partir de la lista ltulgt del widget cuando no puedas cambiar la salida HTML.

Antes de empezar: conceptos y recomendaciones

• Entorno: usa un tema hijo para las modificaciones en functions.php o CSS para no perder cambios con actualizaciones del tema.
• Backups: hacer copia de seguridad antes de tocar functions.php o archivos del tema.
• Accesibilidad: el ltselectgt nativo tiene mejor soporte para teclado/lectores de pantalla. Si simulas uno con ltulgt, añade atributos ARIA y controles de teclado adecuados.
• Compatibilidad: pruebas en navegadores comunes y en móvil (touch) para comportamientos de dropdown.

Método A — Usar el dropdown nativo de WordPress (recomendado)

WordPress puede generar un ltselectgt de categorías mediante wp_dropdown_categories(). Lo ideal es modificar el lugar donde se imprime el widget o crear un pequeño shortcode/widget que devuelva un ltselectgt luego aplicas CSS personalizado para lograr un aspecto moderno.

PHP: Shortcode simple para imprimir un ltselectgt de categorías

Coloca este código en functions.php del tema hijo o en un plugin específico del sitio. Generará un ltselectgt que puedes estilizar con CSS.

// Shortcode: [categorias_dropdown]
function sitio_categorias_dropdown_shortcode( atts ) {
    atts = shortcode_atts( array(
        show_count => 0,
        orderby    => name,
        hide_empty => 1,
        depth      => 1,
        name       => cat-dropdown,
        id         => cat-dropdown,
        class      => cat-dropdown
    ), atts, categorias_dropdown )

    args = array(
        show_option_none => -- Seleccione categoría --,
        option_none_value => 0,
        orderby => atts[orderby],
        hide_empty => atts[hide_empty],
        depth => atts[depth],
        name => atts[name],
        id => atts[id],
        class => atts[class],
        show_count => atts[show_count],
        echo => 0
    )

    dropdown = wp_dropdown_categories( args )

    // Añadimos un wrapper para facilitar el CSS y comportamiento
    html  = 

    html .= dropdown
    html .= 

    return html
}
add_shortcode( categorias_dropdown, sitio_categorias_dropdown_shortcode )

Inserta el shortcode [categorias_dropdown] en cualquier área de widgets de tipo texto/html o en el contenido para mostrar el dropdown.

CSS: Estilo moderno para ltselectgt

Este CSS transforma el select para que tenga apariencia profesional, flecha personalizada, transición y buen contraste. Pega esto en tu hoja style.css del tema hijo o en el editor de CSS adicional del personalizador.

/ Estilo base para el dropdown de categorías /
.mi-wp-categoria-dropdown select.cat-dropdown {
  -webkit-appearance: none
  -moz-appearance: none
  appearance: none
  width: 100%
  max-width: 100%
  padding: 0.6rem 2.4rem 0.6rem 0.9rem / espacio para la flecha a la derecha /
  font-size: 0.95rem
  line-height: 1.3
  color: #222
  background-color: #fff
  border: 1px solid #d0d7de
  border-radius: 6px
  box-shadow: 0 1px 3px rgba(16,24,40,0.04)
  transition: border-color .15s ease, box-shadow .15s ease
  cursor: pointer
}

/ Flecha personalizada con SVG inline como background-image (retina-ready) /
.mi-wp-categoria-dropdown select.cat-dropdown {
  background-image: url(data:image/svg xmlutf8,)
  background-repeat: no-repeat
  background-position: right 10px center
  background-size: 16px 16px
  padding-right: 2.6rem / espacio para la flecha /
}

/ Hover / Focus /
.mi-wp-categoria-dropdown select.cat-dropdown:hover {
  border-color: #b6c2ce
}
.mi-wp-categoria-dropdown select.cat-dropdown:focus {
  outline: none
  border-color: #6aa6ff
  box-shadow: 0 0 0 3px rgba(106,166,255,0.15)
}

/ Placeholder option styling (algunos navegadores limitan el control) /
.mi-wp-categoria-dropdown select.cat-dropdown option[value=0] {
  color: #666
}

/ Tamaño responsive: ajusta según contenedor /
@media (min-width: 768px) {
  .mi-wp-categoria-dropdown select.cat-dropdown {
    font-size: 1rem
  }
}

Comportamiento al seleccionar

Por defecto wp_dropdown_categories no redirige al seleccionar. Si quieres que al seleccionar se haga la navegación automáticamente, puedes usar el atributo onchange que acepta wp_dropdown_categories o añadir un pequeño script inline. Ejemplo de uso con atributo onchange en wp_dropdown_categories:

// Añadir onchange al select generado:
args[show_option_none] = -- Seleccione categoría --
args[echo] = 0
args[id] = cat-dropdown
args[name] = cat-dropdown
args[class] = cat-dropdown
args[value_field] = term_id
dropdown = wp_dropdown_categories( args )

// Reemplazar con un onchange que redirija (ejemplo básico)
dropdown = str_replace(
   0) { window.location.href =  . esc_url( home_url() ) . /?cat=   this.value },
  dropdown
)

Para redirecciones limpias conviene construir la URL por slug en vez de por ID o usar get_category_link()

Método B — Simular un dropdown con la salida ltulgt del widget (sin cambiar el widget)

Si tu widget de categorías imprime una lista ltulgt y no puedes o no quieres cambiar la salida PHP, puedes envolver esa lista con un pequeño HTML adicional y usar CSS puro (con el checkbox hack) para mostrar/ocultar la lista como dropdown. Esta técnica mantiene el control con CSS, pero requiere que inserten la estructura extra —puede añadirse con un pequeño filtro o colocando HTML en el widget de texto.

HTML de ejemplo (wrapper checkbox label ul)

Pon algo como esto alrededor de la salida del widget (por ejemplo en un widget de texto o mediante un filtro que envuelva la lista):

  
  Categorías ▾
  

    
Categoría A
    
Categoría B
    
Categoría C
  

CSS para simular dropdown (checkbox hack)

/ Container base /
.fake-cat-dropdown {
  position: relative
  display: inline-block
  width: 100%
  max-width: 320px
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
}

/ Label que actúa como trigger /
.fake-cat-label {
  display: block
  padding: 0.6rem 0.9rem
  background: #fff
  border: 1px solid #d0d7de
  border-radius: 6px
  cursor: pointer
  user-select: none
  position: relative
}

/ Flecha en el label /
.fake-cat-label .fake-cat-arrow {
  position: absolute
  right: 12px
  top: 50%
  transform: translateY(-50%)
  color: #666
  transition: transform .18s ease
}

/ Checkbox oculto /
.fake-cat-toggle {
  position: absolute
  left: -9999px
  width: 1px
  height: 1px
  overflow: hidden
  clip: rect(0 0 0 0)
}

/ Lista: inicialmente oculta /
.fake-cat-list {
  position: absolute
  left: 0
  right: 0
  margin: 6px 0 0 0
  padding: 0.25rem 0
  list-style: none
  background: #fff
  border: 1px solid #d0d7de
  border-radius: 6px
  box-shadow: 0 6px 18px rgba(16,24,40,0.08)
  max-height: 0
  overflow: hidden
  transition: max-height .22s ease, opacity .18s ease
  opacity: 0
  z-index: 20
}

/ Mostrar lista cuando checkbox está marcado /
.fake-cat-toggle:checked   .fake-cat-label   .fake-cat-list {
  max-height: 360px / suficiente para varias opciones con overflow auto /
  opacity: 1
  overflow: auto
  padding: 0.4rem 0
}

/ Elementos de la lista /
.fake-cat-list li {
  padding: 0
}
.fake-cat-list li a {
  display: block
  padding: 0.55rem 0.9rem
  color: #222
  text-decoration: none
}
.fake-cat-list li a:hover {
  background: #f5f8fa
}

/ Girar flecha cuando abierto /
.fake-cat-toggle:checked   .fake-cat-label .fake-cat-arrow {
  transform: translateY(-50%) rotate(180deg)
}

/ Accesibilidad visual por teclado: si el label recibe focus /
.fake-cat-label:focus {
  outline: none
  box-shadow: 0 0 0 3px rgba(106,166,255,0.12)
}

Notas sobre esta aproximación:

1. El checkbox hack permite abrir/cerrar con CSS pero no ofrece control total con teclado como un ltselectgt. Para mejora de accesibilidad, añade scripts que permitan cerrar al pulsar Esc o navegar con flechas.
2. Si el widget imprime la lista ya en el DOM, envuélvela con la estructura anterior mediante un filtro (pre_render) o un pequeño código en functions.php que capture la salida y la añada.

PHP: envolver la lista del widget por filtro (ejemplo)

Ejemplo simple que intercepta la salida del widget de categorías y la envuelve para usar la técnica de fake dropdown. Ten en cuenta ajustar selectores según tu tema.

// WARNING: ejemplo orientativo — probar antes en entorno de desarrollo
add_filter( widget_display_callback, function( instance, widget, args ) {
    // Solo para el widget core de categorías (WP_Widget_Categories)
    if ( get_class( widget ) === WP_Widget_Categories ) {
        // modificamos la salida añadiendo wrappers: el contenido HTML real se genera más tarde
        // utilizaremos otra técnica: capturar el output con ob_start() en el hook widget sería más seguro
    }
    return instance
}, 10, 3 )

Es recomendable implementar la captura de salida (output buffering) en el hook apropiado si quieres envolver exactamente el HTML que genera el widget nativo.

Detalles avanzados y recomendaciones finales

• Cache y minificación: si usas caché o plugins de minificación, comprueba los cambios tras vaciar cache para ver los estilos actualizados.
• Compatibilidad móvil: el ltselectgt nativo abre el control de selección del sistema (mejor para móviles). Si simulas uno, prueba que el área sea suficientemente grande y el scroll interno funcione.
• Lectores de pantalla: siempre que sea posible prefiere el ltselectgt nativo. Si simulas, añade atributos aria-expanded, role=button / role=menu y control de teclado con JS para buena accesibilidad.
• Personalización de la flecha: usa SVG inline en background-image para conservar nitidez en pantallas retina y poder cambiar color vía CSS (codificando color en la URL SVG).

Checklist rápido antes de desplegar

1. Has probado en Chrome, Firefox, Safari y Edge.
2. Has probado navegabilidad con teclado (Tab, Enter, Esc).
3. Has comprobado comportamiento en móvil (touch).
4. Has hecho backup y trabajado en tema hijo.
5. Has vaciado caches y comprobado minificación CSS/JS.

Resumen

La mejor opción es usar wp_dropdown_categories() o el ltselectgt nativo del widget, y estilizarlo con CSS moderno (flecha personalizada, foco, transiciones). Si no puedes cambiar la salida HTML, puedes simular un dropdown a partir de la lista ltulgt con el checkbox hack y CSS, aunque esa opción requiere cuidados adicionales de accesibilidad y comportamiento en móvil.