Si has trabajado en WordPress con una plantilla personalizada durante años quizás no estés aprovechando las ventajas que ha ido introduciendo desde 2021 el equipo de Automattic (especialmente a través del archivo theme.json).
Siempre me han parecido muy limitadas las opciones de configuración para maquetar contenido en editor Guttenberg y plugins como Elementor o Divi se han posicionado como alternativas muy potentes, pero que aumentan de forma significativa el peso de la web y ralentiza su carga, 2 aspectos a tener en cuenta para conseguir un buen posicionamiento SEO.
Me costaba creer que WordPress no se hubiese puesto las pilas en lo que se refiere a la maquetación a través de su editor de contenido y no ofreciese opciones más avanzadas, pero lo cierto es que desde 2021 ha estado actualizándolo y convirtiendo su editor en un FSE (Full Site Editing, o “Edición Completa del Sitio”), la nueva forma de diseñar y personalizar todo el tema desde el panel de WordPress, sin necesidad de saber programar PHP u otros lenguajes de programación.
¿Qué es theme.json?
La clave de todo la tenemos en el archivo theme.json. Se trata de un archivo de configuración en formato JSON que los temas pueden incluir (a partir de WordPress 5.8) para controlar estilos globales, ajustes del editor, paletas de colores, tipografías, espaciados y mucho más, todo desde un único punto.
¿Dónde se coloca el archivo theme.json? En la raíz del tema, así: /wp-content/themes/mi-tema-hijo/theme.json

Ventajas de usar theme.json
- Centraliza la configuración del tema
- Mejora el rendimiento (WordPress genera CSS automáticamente)
- Se integra con el editor de bloques (experiencia WYSIWYG real)
- Permite crear temas sin usar
functions.php
para estilos/editor. Esto permite personalizar fácilmente los estilos y ajustes de su tema directamente dentro del editor sin necesidad de tocar ningún código. - Facilita el control y consistencia visual
Hasta aquí nos hemos puesto en contexto sobre las posibilidades que ofrece el archivo theme.json y lanueva forma de customizar plantillas en WordPress. Es turno de remangarnos y poner en práctica la teoría para comprobar insitu sus posibilidades.
Estilos globales y personalizados
- Colores, fuentes, tamaños, espaciados y bordes.
- Puedes definir estilos base y luego sobreescribirlos para bloques individuales.
{
"$schema": "https://schemas.wp.org/wp/6.7/theme.json",
"version": 3,
"settings": {
"color": {
"palette": [
{
"name": "Rojo Principal",
"slug": "rojo-principal",
"color": "#e63946"
}
]
}
}
}

Configuración del editor de bloques
Puedes limitar qué se puede editar (ideal para mantener la coherencia del diseño).
Habilitar/deshabilitar opciones como colores personalizados, tamaños de fuente, controles de alineación, etc.
{
"settings": {
"color": {
"custom": false,
"duotone": false
},
"spacing": {
"padding": true,
"margin": false
}
}
}

Definición de presets (paletas, tipografías, gradientes, etc.)
- Los defines una vez y se reflejan en el editor como opciones preconfiguradas.
Organizar tu plantilla en secciones reutilizables: header, footer, sidebar, etc.
"templateParts": [
{
"name": "cabecera",
"title": "Cabecera",
"area": "header"
},
{
"name": "pie",
"title": "Pie de página",
"area": "footer"
}
]
Soporte para modos oscuros (desde WP 6.5)
Control de variables y estilos adaptables según el modo de visualización.
Primero definimos una paleta de colores que incluye versiones claras y oscuras.
Creamos dos modos de color:
light
: fondo claro, texto oscurodark
: fondo oscuro, texto claro
Usamos variables CSS (var(--wp--preset--color--...)
) que se aplican dinámicamente según el modo.
Es importante saber que WordPress no cambia automáticamente el modo según el sistema operativo. Necesitas añadir tú mismo un selector de modo oscuro (mediante JS o CSS usando @media (prefers-color-scheme: dark)
).
También puedes activar el modo manualmente con clases CSS como .is-mode-dark
o .is-mode-light
en el <body>
y usar estilos condicionales.
{
"version": 2,
"settings": {
"color": {
"custom": false,
"customDuotone": false,
"customGradient": false,
"defaultPalette": false,
"defaultGradients": false,
"palette": [
{
"name": "Texto claro",
"slug": "light-text",
"color": "#ffffff"
},
{
"name": "Fondo oscuro",
"slug": "dark-background",
"color": "#111111"
},
{
"name": "Texto oscuro",
"slug": "dark-text",
"color": "#111111"
},
{
"name": "Fondo claro",
"slug": "light-background",
"color": "#ffffff"
},
{
"name": "Primario",
"slug": "primary",
"color": "#0073aa"
}
],
"modes": {
"light": {
"colors": {
"background": "var(--wp--preset--color--light-background)",
"text": "var(--wp--preset--color--dark-text)"
}
},
"dark": {
"colors": {
"background": "var(--wp--preset--color--dark-background)",
"text": "var(--wp--preset--color--light-text)"
}
}
}
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--light-background)",
"text": "var(--wp--preset--color--dark-text)"
}
}
}
Este es solo un ejemplo de opciones que puedes configurar para luego utilizar en el editor Gutenberg. Te invito a que pruebes y veas por ti mismo como…
Mejoras del archivo theme.json que pueden venir en futuras versiones de WordPress
Condiciones y reglas CSS avanzadas
Están en desarrollo características como:
@media
queries dentro detheme.json
- condiciones de visualización según tipo de dispositivo
- breakpoints personalizables
Actualmente se puede hacer solo con CSS, pero WordPress busca permitirlo desde el JSON.
Estilos dependientes del idioma / ubicación / usuario
Se plantea en el Gutenberg roadmap poder establecer estilos distintos según el idioma, login, usuario, etc.
Ejemplo: adaptar la tipografía o diseño según RTL o país del usuario.
Mejoras en el control del editor (Editor Settings UI)
En versiones futuras habrá paneles visuales en el editor para:
- Activar/desactivar elementos del
theme.json
- Cambiar tipografías, paletas, sombras y estilos sin tocar código
Es decir, desde Automattic plantean poder editar el archivo theme.json
desde el editor visual (como hoy lo es el estilo del sitio).
WordPress lleva apostando fuerte por su editor FSE muchos años, los avances son muy significativos y se vienen nuevas funcionalidades muy interesantes. Imagina poder establecer todo un sistema de diseño en WordPress, pues parece que hacia allá vamos.
Además han añadido la opción de poder crear tus propios bloques, por lo que si te sientes algo limitado a la hora de añadir bloques puedes crear los tuyos propios. Si quieres que profundice en este tema solo tienes que dejarlo en los comentarios y escribiré un artículo dedicado a ello… y sino también :).
Categoría/s: Diseño y desarrollo web
Deja una respuesta