Tema clásico 02: style.css y functions.php con criterio

Aprende a usar style.css y functions.php como contrato técnico del tema: identidad, capacidades y arranque limpio.

En un tema clásico, style.css y functions.php son mucho más que archivos iniciales: definen la identidad y el comportamiento base del proyecto.

Si están mal planteados, aparecen problemas de compatibilidad, traducción, menús o miniaturas en fases muy avanzadas.

La idea es usar style.css como contrato de metadatos y functions.php como punto de arranque ordenado, no como cajón de sastre.

En esta lección vas a registrar soportes de tema, menú principal y dominio de traducción con una estructura limpia.

  • WordPress detecta el tema por la cabecera de style.css; sin eso, el tema ni siquiera existe para el panel.
  • La cabecera debe incluir Theme Name, Version, Text Domain y datos coherentes con la realidad del proyecto.
  • Aunque luego cargues CSS principal desde assets/css/main.css, style.css sigue siendo obligatorio como descriptor del tema.
  • Mantén en style.css solo reset mínimo o imports justificados; evita convertirlo en un archivo gigante sin estructura.
  • Metadatos limpios y versionado consistente.

style.css: metadatos y responsabilidad real

WordPress detecta el tema por la cabecera de style.css; sin eso, el tema ni siquiera existe para el panel.

La cabecera debe incluir Theme Name, Version, Text Domain y datos coherentes con la realidad del proyecto.

Aunque luego cargues CSS principal desde assets/css/main.css, style.css sigue siendo obligatorio como descriptor del tema.

Mantén en style.css solo reset mínimo o imports justificados; evita convertirlo en un archivo gigante sin estructura.

  • Metadatos limpios y versionado consistente.
  • Text Domain alineado con slug del tema.
  • Nada de copiar cabeceras de otro proyecto.
  • Revisión antes de cada release.

functions.php: setup del tema sin mezclar responsabilidades

Define capacidades en after_setup_theme y evita ejecutar lógica pesada en carga global.

after_setup_theme es el hook correcto para registrar soportes del tema como title-tag, post-thumbnails y HTML5.

Si necesitas internacionalización, carga el dominio de traducción también en ese setup inicial.

Registra menús desde el arranque y deja claro qué ubicación usará cada plantilla del tema.

WordPress Themes Pro
12

Tema clásico 02: style.css y functions.php con criterio

Aprende a usar style.css y functions.php como contrato técnico del tema: identidad, capacidades y arranque limpio.

Código del tema: after_setup_theme

📘 Teoría

style.css: metadatos y responsabilidad real

WordPress detecta el tema por la cabecera de style.css; sin eso, el tema ni siquiera existe para el panel.

La cabecera debe incluir Theme Name, Version, Text Domain y datos coherentes con la realidad del proyecto.

Aunque luego cargues CSS principal desde assets/css/main.css, style.css sigue siendo obligatorio como descriptor del tema.

Mantén en style.css solo reset mínimo o imports justificados; evita convertirlo en un archivo gigante sin estructura.

  • Metadatos limpios y versionado consistente.
  • Text Domain alineado con slug del tema.
  • Nada de copiar cabeceras de otro proyecto.
  • Revisión antes de cada release.

functions.php: setup del tema sin mezclar responsabilidades

Define capacidades en after_setup_theme y evita ejecutar lógica pesada en carga global.

1

after_setup_theme es el hook correcto para registrar soportes del tema como title-tag, post-thumbnails y HTML5.

2

Si necesitas internacionalización, carga el dominio de traducción también en ese setup inicial.

3

Registra menús desde el arranque y deja claro qué ubicación usará cada plantilla del tema.

Setup base recomendado
<?php
if (!defined('ABSPATH')) {
  exit;
}

add_action('after_setup_theme', function () {
  load_theme_textdomain('mi-tema-clasico', get_template_directory() . '/languages');

  add_theme_support('title-tag');
  add_theme_support('post-thumbnails');
  add_theme_support('html5', ['search-form', 'comment-form', 'comment-list', 'gallery', 'caption']);

  register_nav_menus([
    'primary' => __('Menú principal', 'mi-tema-clasico'),
  ]);
});

🧪 Aprende probando

Ejemplo Ejemplo: cabecera correcta en style.css Bloque mínimo de metadatos para identificar el tema de forma consistente.

🏁 Retos

Reto Reto: completar setup del tema Añade soporte de miniaturas y registro de menú principal en after_setup_theme.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre WordPress Themes Pro.

Test de WordPress Themes Pro

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .