Tema hijo HivePress móvil: que se sienta como app nativa

En pocas palabras: Para que un directorio HivePress se sienta como app nativa, creá un tema hijo mobile-first: carpeta con style.css (cabecera Template: listinghive), functions.php que encola el CSS y una subcarpeta hivepress/ que replica las plantillas. Así sobreescribís hero, filtros y navegación sin perder cambios al actualizar el tema padre.

Si querés que tu directorio con HivePress se sienta como una app nativa en el celular, la respuesta corta es un tema hijo mobile-first: creás una carpeta con style.css y functions.php, replicás las plantillas dentro de una subcarpeta hivepress/ y reescribís el CSS apuntando a las clases hp-. Así podés tocar hero, filtros y navegación sin perder nada cuando actualicen el tema padre.

Un tema hijo de HivePress es un tema secundario que hereda todo el diseño y la lógica del tema padre (por ejemplo ListingHive) pero te deja sobreescribir estilos y plantillas puntuales. Sirve para personalizar la experiencia móvil de un directorio o marketplace sin editar el tema original, y lo mantiene Automattic y la comunidad de HivePress a través de la documentación oficial. Es la base recomendada para cualquier customización seria.

¿Qué es HivePress y por qué usar un tema hijo para móvil?

HivePress es un plugin gratuito de WordPress para armar directorios, marketplaces y sitios de listados (inmuebles, empleos, servicios, clasificados). Su tema oficial gratuito es ListingHive, y sobre ese se construye casi todo. El tema hijo entra acá: es la manera correcta de personalizar sin romper.

Ponele que editás directamente style.css de ListingHive para que los filtros se vean bien en el celular. Anda una semana. Después sale una actualización del tema, la instalás, y todo tu CSS se fue a la papelera. Con un tema hijo eso no pasa: tus cambios viven en otra carpeta y sobreviven las actualizaciones.

El enfoque mobile-first significa diseñar primero para la pantalla chica y después escalar hacia desktop, no al revés. En un directorio tiene todo el sentido: la mayoría de las búsquedas de listados pasan por el teléfono. Si arrancás pensando en el mouse, después parchás para el touch y queda medio Frankenstein.

¿Qué requisitos técnicos necesito para crear un tema hijo mobile-first?

Necesitás manejar HTML, CSS y algo de JavaScript, acceso a los archivos del sitio (FTP, SFTP o el administrador de archivos del hosting) y un editor de código decente. No hace falta ser un crack de PHP, pero sí entender cómo WordPress carga temas.

• Conocimientos base: CSS con Flexbox y Grid, media queries y nociones de JavaScript para interacciones (paneles, overlays).
• Acceso a archivos: FTP/SFTP o el file manager del panel de hosting para subir la carpeta /wp-content/themes/tu-tema-hijo/.
• Editor de código: VS Code con extensiones de CSS/PHP; te evita la mitad de los errores de sintaxis.
• Entorno de pruebas: un WordPress local o un staging, nunca directo en producción.
• DevTools móvil: el emulador del navegador para iterar rápido, más un par de teléfonos reales para el testeo final.

Si vas a montar todo esto y después subirlo, asegurate de que tu proveedor te deje trabajar cómodo con staging y caché. Un hosting WordPress como el de Donweb te resuelve esa parte sin dramas.

¿Cómo crear el tema hijo HivePress móvil paso a paso?

Creás una carpeta nueva en /wp-content/themes/, adentro ponés style.css con la cabecera que apunta al tema padre y un functions.php que encole los estilos. Con eso ya tenés un tema hijo funcional que podés activar desde Apariencia > Temas.

La cabecera de style.css

El archivo style.css arranca con un comentario que le dice a WordPress quién es el padre. El campo clave es Template, que debe coincidir con el nombre exacto de la carpeta del tema padre (por ejemplo listinghive). Según la guía oficial de HivePress sobre temas hijos, ese es el único requisito no negociable para que herede.

El functions.php que encola el CSS

Acá enganchás wp_enqueue_scripts para cargar tu hoja de estilos después de la del padre. Es lo que garantiza que tus reglas ganen por cascada. Un error clásico es usar @import dentro del CSS para traer el padre: es más lento y en HivePress no siempre hace falta, porque el tema ya encola sus propios estilos. Mejor hacerlo con la función de WordPress y listo.

La carpeta hivepress/ para las plantillas

Esta es la parte específica del plugin. Para sobreescribir una plantilla de HivePress, replicás su ruta exacta dentro de una subcarpeta hivepress/ en tu tema hijo. Los docs de desarrollo de HivePress describen los patrones tipo {entity}/{context}/{layout}: por ejemplo, la plantilla de un listado individual vive en una ruta concreta y vos la copiás tal cual para editarla. Si la ruta no coincide al pie de la letra, HivePress ignora tu versión y sigue usando la del padre.

¿Cómo personalizar el CSS para que se vea como app nativa?

Trabajás con las clases hp- que HivePress genera de forma consistente, escribís las reglas para móvil primero y sumás @media (min-width: ...) para pantallas grandes. La notación es BEM: bloque, elemento y modificador, como .hp-listing__title o .hp-listing__attribute--price.

Toda clase de HivePress lleva el prefijo hp-, así que sabés que ese CSS es tuyo para tocar sin pisar Bootstrap ni nada del core de WordPress. El elemento va con doble guion bajo (__) y el modificador con doble guion medio (--). Es prolijo y, una vez que le agarrás la mano, encontrás cualquier selector sin abrir DevTools cada dos minutos.

El truco para que se sienta nativo es el detalle táctil: áreas de toque de al menos 44px, transiciones suaves con transform en vez de propiedades que fuercen repintado, y un layout que respire con Grid o Flexbox. Nada de menús desplegables pensados para hover, que en touch no existen.

¿Tema hijo, PWA o app nativa? Comparativa

Un tema hijo mobile-first te da un sitio que parece app dentro del navegador. Una PWA suma instalación en la pantalla de inicio y funcionamiento offline. Una app nativa es otro proyecto entero. Para la mayoría de los directorios HivePress, el tema hijo bien hecho alcanza y sobra.

Enfoque	Esfuerzo	Feel nativo	Offline	Cuándo conviene
Tema hijo mobile-first	Bajo-medio	Alto (visual)	No	Directorios y marketplaces HivePress estándar
Tema hijo + PWA	Medio	Muy alto	Sí (parcial)	Uso recurrente, quieren ícono en el home
App nativa	Alto	Total	Sí	Push, cámara, features que el navegador no da

La verdad es que saltar a una app nativa por «que se vea mejor» suele ser matar una mosca a cañonazos. Empezá por el tema hijo. Si después el uso lo justifica, sumás capa PWA sin rehacer nada.

Casos de uso reales: del showcase de ListingHive al desarrollo propio

En la comunidad de HivePress apareció un showcase de un tema hijo premium mobile-first construido sobre ListingHive, y ahí se ve bien qué componentes hacen la diferencia. No es magia, son patrones concretos que podés replicar.

• Hero con navegación integrada: la primera pantalla combina búsqueda y accesos, no solo una imagen linda.
• Filas scrollables horizontales: los listados destacados se deslizan de costado, como los carruseles de las apps de verdad.
• Chips de filtro: categorías como pastillas tocables en lugar de un select desplegable incómodo.
• Panel lateral desplegable: el menú entra desde el borde con un transform, sin recargar la página.
• Integración con WhatsApp: botón de contacto directo, que en Latinoamérica pesa más que cualquier formulario.
• Overlays accesibles: modales que respetan foco de teclado y lectores de pantalla, no solo un div tapando todo.

Todo eso se logra con CSS, un poco de JavaScript vanilla y las plantillas de HivePress sobreescritas. No necesitás un framework pesado encima.

¿El tema hijo sobrevive las actualizaciones de HivePress?

Sí, y ese es justamente el punto. Tus estilos y plantillas viven en la carpeta del tema hijo, separados del tema padre y del plugin. Cuando actualizás HivePress o ListingHive, tus archivos quedan intactos.

Ahora bien, hay un matiz. Si HivePress cambia la estructura interna de una plantilla que vos sobreescribiste, tu versión copiada puede quedar desactualizada y no reflejar mejoras nuevas. Por eso conviene sobreescribir lo mínimo indispensable: si solo necesitás cambiar el CSS, no copies la plantilla entera. Cuanto menos toques del padre, menos mantenimiento tenés después.

Errores comunes al crear un child theme mobile (y cómo evitarlos)

La mayoría de los problemas no son de código, son de estructura. Estos tres se llevan el podio.

• Olvidar la carpeta hivepress/: ponen las plantillas sueltas o en una ruta que no coincide, y HivePress las ignora. La ruta dentro de hivepress/ tiene que ser idéntica a la del padre, carácter por carácter.
• Campo Template mal escrito: si el Template: del style.css no coincide con el nombre de carpeta del padre, WordPress ni activa el tema hijo. Es listinghive, en minúscula, tal cual.
• Pelear con la caché en móvil: testean, no ven cambios, tocan más CSS, se rompe todo. En realidad era la caché del plugin o del navegador. Desactivá el caché durante el desarrollo y limpiá antes de cada prueba.
• CSS conflictivo por especificidad: el padre gana porque su selector es más específico. En vez de tirar !important a todo, encolá tu hoja después y usá selectores igual de específicos.

¿Qué herramientas aceleran la creación del tema hijo?

Podés arrancar a mano con un editor, o usar un generador para el esqueleto inicial. Para mobile, DevTools y el testeo en dispositivos reales son innegociables.

Un plugin como WP Child Theme Generator te crea la estructura base en dos clics; después lo desinstalás y seguís a mano. VS Code con extensiones de CSS y PHP te ahorra errores de sintaxis. Para versionar, GitHub: subís los archivos del tema hijo y tenés historial de todo lo que tocaste. Y para probar, el emulador del navegador está bien para iterar rápido, pero el veredicto final lo dan dos o tres teléfonos de verdad. El emulador miente con el táctil y con el rendimiento real.

Preguntas Frecuentes

¿Cómo crear un tema hijo en HivePress?

Creás una carpeta en /wp-content/themes/ con dos archivos: style.css (con la cabecera Template: listinghive apuntando al tema padre) y functions.php que encola el CSS. Para plantillas, agregás una subcarpeta hivepress/ replicando las rutas del padre. Después lo activás desde Apariencia > Temas.

¿Qué archivos necesito para un child theme mobile en HivePress?

Como mínimo, style.css y functions.php. Para personalizar plantillas, sumás una carpeta hivepress/ con las plantillas copiadas del tema padre en su ruta exacta. El resto (JavaScript para paneles y overlays, imágenes) es opcional según cuánto quieras acercarte al feel de app.

¿Un tema hijo me sirve para hacer una PWA?

El tema hijo te da la parte visual del feel nativo, pero una PWA necesita además un service worker y un manifiesto para instalación y offline. Podés combinar un tema hijo mobile-first con un plugin de PWA para sumar esas capacidades sin rehacer el diseño.

¿Por qué HivePress ignora mis plantillas personalizadas?

Casi siempre es porque la ruta dentro de hivepress/ no coincide exactamente con la del tema padre. HivePress busca la plantilla en la misma ruta relativa; si difiere en una carpeta o en el nombre del archivo, usa la del padre. Verificá la estructura contra los docs de desarrollo del plugin.

¿Necesito saber PHP para crear un tema hijo de HivePress?

Para lo básico, no: con HTML y CSS más un functions.php mínimo alcanza para personalizar estilos. Si querés modificar la lógica de las plantillas más allá del maquetado, ahí sí conviene entender PHP y los conceptos de temas hijos de WordPress.

Conclusión

Armar un tema hijo mobile-first sobre HivePress es la vía más sensata para que un directorio se sienta como app sin meterte en una app nativa. Lo que cambia respecto a editar el tema padre es enorme: tus customizaciones sobreviven cada actualización, y tenés control fino sobre hero, filtros y navegación con las clases hp-.

El plan concreto: creás la estructura mínima, replicás solo las plantillas que realmente necesitás tocar dentro de hivepress/, escribís CSS mobile-first con BEM, y copiás los patrones del showcase de la comunidad (filas scrollables, chips, panel lateral, overlays accesibles). Antes de producción, PageSpeed Insights, testeo en teléfonos reales y staging. Empezá simple, medí, y recién ahí decidí si vale sumar una capa PWA.

Fuentes

• HivePress – Cómo crear un tema hijo (documentación oficial)
• HivePress Developer Docs – Integrar tu tema con HivePress y patrones de plantillas
• Comunidad HivePress – Showcase del tema hijo premium mobile-first sobre ListingHive
• GitHub – ListingHive, el tema oficial gratuito de HivePress
• WordPress Codex – Temas hijos (guía en español)