Crear tema propio
🧱 1. ¿Qué es un tema en WordPress?
Un tema (theme) controla la apariencia visual de un sitio WordPress: diseño, estructura, colores, tipografía, disposición de menús, cabecera, pie, etc. Los temas pueden ser:
- Clásicos (basados en
PHPyfunctions.php) - FSE (Full Site Editing) (basados en bloques y archivos
HTML+theme.json)
🧰 OPCIÓN 1: Crear un tema clásico
📁 Estructura mínima
mi-tema/
├── style.css
├── index.php
├── functions.php
├── screenshot.png
📄 style.css (obligatorio)
Este archivo contiene los metadatos del tema:
/*
Theme Name: Mi Tema Profesional
Theme URI: https://tusitio.com
Author: Ana Meraga
Author URI: https://tusitio.com
Description: Tema hecho a mano desde cero
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: mi-tema
*/
✅ Es necesario aunque no tenga CSS aún. WordPress detecta el tema gracias a este archivo.
📄 index.php (estructura principal)
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>
</header>
<main>
<?php
if (have_posts()) :
while (have_posts()) : the_post();
the_title('<h2>', '</h2>');
the_content();
endwhile;
else :
echo '<p>No se encontraron publicaciones</p>';
endif;
?>
</main>
<footer>
<p>© <?php echo date('Y'); ?> - <?php bloginfo('name'); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
📄 functions.php
Carga scripts y estilos, y activa funciones del tema:
<?php
function mi_tema_scripts() {
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'mi_tema_scripts');
📷 screenshot.png
Una captura (880×660 px) del diseño que se muestra en el panel de temas.
✅ Activar el tema
- Comprime la carpeta
mi-temaen un ZIP. - Ve a Apariencia > Temas > Añadir nuevo > Subir tema.
- Activa.
🚀 Ampliar tu tema clásico
header.php,footer.php,sidebar.php→ para dividir el diseño.page.php,single.php,archive.php,404.php→ plantillas específicas.template-parts/→ contenido modular (buenas prácticas).- Soporte de menús, widgets, imágenes destacadas, etc.
🧱 OPCIÓN 2: Crear un tema con Full Site Editing (FSE)
Requiere WordPress 5.9+ y Gutenberg.
📁 Estructura base
mi-tema-fse/
├── style.css
├── theme.json
├── templates/
│ └── index.html
├── parts/
│ ├── header.html
│ └── footer.html
📄 style.css
Solo se necesita para los metadatos del tema:
/*
Theme Name: Mi Tema FSE
Version: 1.0
Requires at least: 5.9
*/
📄 theme.json
El núcleo del tema FSE. Controla estilos, colores, fuentes, espaciado, y más.
{
"version": 2,
"settings": {
"color": {
"palette": [
{ "name": "Azul", "slug": "azul", "color": "#0a5" },
{ "name": "Rojo", "slug": "rojo", "color": "#f00" }
]
},
"typography": {
"fontSizes": [
{ "name": "Pequeño", "slug": "small", "size": "12px" },
{ "name": "Grande", "slug": "large", "size": "24px" }
]
},
"layout": {
"contentSize": "800px",
"wideSize": "1200px"
}
}
}
📄 templates/index.html
Plantilla base:
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group -->
<main class="site-main">
<!-- wp:post-content /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->
📄 parts/header.html
<!-- wp:group -->
<header>
<!-- wp:site-title /-->
<!-- wp:navigation /-->
</header>
<!-- /wp:group -->
📄 parts/footer.html
<!-- wp:group -->
<footer>
<p>© 2025 - Mi sitio</p>
</footer>
<!-- /wp:group -->
🧪 Diferencias clave entre clásico y FSE
| Concepto | Tema Clásico | Tema FSE |
|---|---|---|
| Lenguaje base | PHP + HTML + CSS | HTML + theme.json + bloques |
| Personalización | Personalizador | Editor de sitio |
| Menús | Apariencia > Menús | Bloque de navegación |
| Widgets | Apariencia > Widgets | Bloques |
| Ventaja | Más control técnico | Edición visual total |
🧠 Consejos finales
- Usa
Underscorescomo base para tema clásico: https://underscores.me - Para FSE, puedes clonar un tema como
Twenty Twenty-Four. - Testea en local con herramientas como LocalWP o DevKinsta.
- Valida HTML, CSS y accesibilidad para entregar trabajo profesional.