Saltar al contenido
Carlos Estrada
Frontend

Cómo crear tu primer tema de WordPress desde cero

7 min de lectura
Dos monitores sobre un escritorio mostrando el diseño de un sitio web

El tema es lo que decide cómo se ve tu sitio de WordPress: colores, tipografía, encabezado, pie de página y el acomodo de cada página. Hacer uno propio te da control total sobre el diseño y es de los mejores ejercicios para entender WordPress por dentro.

Hoy lo recomendado es hacer un tema de bloques. En estos temas, las plantillas son archivos HTML armados con los mismos bloques del editor, y los estilos se configuran en un solo archivo llamado theme.json. Necesitas mucho menos PHP que con los temas clásicos, y el dueño del sitio puede ajustar el diseño desde el Editor del sitio.

Lo que necesitas antes de empezar

  • HTML y CSS: la base de todo el diseño.
  • Leer JSON: un formato de texto para guardar datos con llaves y comillas. Si has visto un archivo de configuración, ya lo conoces.
  • Un poco de PHP (opcional al inicio): solo para cosas extra en functions.php.
  • Un editor de código como Visual Studio Code y un WordPress de prueba en tu computadora.

Paso 1: monta tu WordPress local

No diseñes sobre un sitio real. Tienes tres opciones gratuitas:

  • Local: una aplicación gratuita para Windows y macOS que monta un sitio de WordPress en tu computadora con un par de clics. Es la opción más sencilla si vas empezando.
  • wp-env: la herramienta oficial del equipo de WordPress. Levanta un sitio con Docker, un programa que corre servidores aislados en tu computadora. Útil si ya usas Docker o Node.js.
  • WordPress Playground: WordPress completo dentro del navegador, sin instalar nada. Ideal para pruebas rápidas, aunque lo que haces se pierde al cerrar la pestaña si no lo exportas.

Paso 2: crea la estructura mínima

Los temas viven en wp-content/themes. Crea una carpeta, por ejemplo mi-primer-tema. Un tema de bloques funciona con muy pocos archivos:

  • style.css: la ficha de identidad del tema. Obligatorio.
  • templates/index.html: la plantilla que WordPress usa cuando no hay otra más específica. Obligatorio.
  • theme.json: colores, tipografías, espacios y ajustes del editor. Muy recomendado.
  • parts/: piezas que se repiten, como header.html y footer.html.
  • functions.php: código PHP extra. Opcional.
  • screenshot.png: la miniatura que se ve al elegir el tema, de 1200 × 900 píxeles.

Paso 3: la cabecera en style.css

Igual que un plugin, el tema se presenta con un comentario al inicio de style.css. Con esto WordPress ya lo muestra en Apariencia → Temas:

/*
Theme Name: Mi Primer Tema
Description: Un tema de bloques sencillo para aprender.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
Author: Tu Nombre
License: GPL-2.0-or-later
Text Domain: mi-primer-tema
*/

En un tema de bloques este archivo casi no lleva CSS: la mayoría de los estilos se definen en theme.json.

Paso 4: define tu diseño en theme.json

Aquí decides la paleta de colores, las tipografías, el ancho del contenido y los estilos generales. Todo lo que pongas aparece como opción en el editor, así que quien escriba en el sitio solo podrá usar los colores de tu marca. Un ejemplo sencillo:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "layout": { "contentSize": "720px", "wideSize": "1200px" },
        "color": {
            "palette": [
                { "slug": "base", "color": "#ffffff", "name": "Base" },
                { "slug": "texto", "color": "#1d1d1f", "name": "Texto" },
                { "slug": "acento", "color": "#0a66c2", "name": "Acento" }
            ]
        }
    },
    "styles": {
        "color": { "background": "var(--wp--preset--color--base)", "text": "var(--wp--preset--color--texto)" },
        "elements": { "link": { "color": { "text": "var(--wp--preset--color--acento)" } } }
    },
    "templateParts": [
        { "name": "header", "area": "header" },
        { "name": "footer", "area": "footer" }
    ]
}

La línea $schema hace que tu editor de código te sugiera opciones y marque errores mientras escribes. Es de gran ayuda cuando vas empezando.

Paso 5: las plantillas y las partes

Las plantillas son HTML con comentarios especiales que representan bloques. Tu templates/index.html puede quedar así:

<!-- wp:template-part {"slug":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:query {"query":{"inherit":true}} -->
    <div class="wp-block-query">
        <!-- wp:post-template -->
            <!-- wp:post-title {"isLink":true} /-->
            <!-- wp:post-excerpt /-->
        <!-- /wp:post-template -->
        <!-- wp:query-pagination /-->
    </div>
    <!-- /wp:query -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer"} /-->

Luego crea parts/header.html con, por ejemplo, los bloques de título del sitio y de navegación, y parts/footer.html con un párrafo de pie de página. Activa tu tema en Apariencia → Temas y ya tienes un sitio funcionando.

Después agrega plantillas más específicas cuando las necesites. WordPress busca primero la más precisa y, si no existe, usa index.html:

  • single.html: una entrada individual.
  • page.html: las páginas.
  • archive.html: listados por categoría, etiqueta o fecha.
  • 404.html: cuando no se encuentra la página.
  • search.html: resultados de búsqueda.

El atajo: diseña visualmente y exporta

No tienes que escribir todo a mano. Una forma práctica de trabajar:

  1. Instala el plugin oficial Create Block Theme.
  2. Crea un tema en blanco desde el plugin o parte del tuyo.
  3. Diseña en Apariencia → Editor arrastrando bloques y eligiendo estilos.
  4. Usa Create Block Theme para guardar esos cambios dentro de los archivos del tema.
  5. Abre los archivos generados y estúdialos: es la mejor manera de aprender cómo se escriben las plantillas.

También te sirve mucho abrir los archivos de Twenty Twenty-Five, el tema oficial que viene con WordPress, y ver cómo resolvieron cada plantilla.

Lo que debes saber

  • Los cambios del Editor del sitio se guardan en la base de datos, no en tus archivos. Si editas index.html y no ves el cambio, revisa si esa plantilla fue personalizada en el editor y restablécela.
  • Las funciones van en un plugin. Si metes en el tema un tipo de contenido o un formulario, se pierde al cambiar de tema.
  • Tema hijo: si solo quieres ajustar un tema existente, crea un tema hijo en vez de editar el original. Así no pierdes tus cambios cuando el original se actualice.
  • Temas clásicos: vas a ver muchos tutoriales con archivos como header.php y the_loop. Siguen funcionando, pero para un proyecto nuevo el tema de bloques es el camino que WordPress recomienda.
  • Actualizaciones: si instalas tu tema en sitios de clientes, puedes darle actualizaciones automáticas con la librería gratuita Plugin Update Checker, que también funciona con temas.
  • La referencia oficial es el Theme Handbook de WordPress, en inglés.

Empieza copiando una idea sencilla, como un blog de una columna, y ve agregando plantillas. En unas cuantas tardes vas a tener un tema tuyo y vas a entender cómo arma WordPress cada página.

Powered by