Cómo crear un tema WordPress desde cero (sin builders)

marzo 7, 2026 por admin Desarrollo de Temas

Si llevas tiempo usando WordPress, en algún momento te habrás preguntado cómo funcionan los temas por dentro. Elementor, Divi y Avada están muy bien para lanzar sitios rápido, pero si quieres entender WordPress de verdad —y mostrar que sabes desarrollar— necesitas haber creado al menos un tema propio desde cero.

Eso es exactamente lo que vamos a hacer en este artículo. Sin frameworks, sin builders, sin dependencias. Solo los archivos que WordPress necesita, escritos a mano.

¿Qué necesitas antes de empezar?

Antes de escribir una sola línea de código, necesitas un entorno de desarrollo local. Yo uso LocalWP, que instala Apache, PHP y MySQL en tu máquina en menos de 5 minutos. También puedes usar DevKinsta o MAMP.

Una vez tengas WordPress corriendo en local, navega a la carpeta wp-content/themes/ y crea una carpeta con el nombre de tu tema. En mi caso: mi-tema/.

Los dos archivos obligatorios

WordPress solo necesita dos archivos para reconocer un tema: style.css e index.php. Eso es todo. Con esos dos archivos ya puedes activar tu tema desde el panel de administración.

style.css — El carnet de identidad del tema

El archivo style.css no es solo CSS. La parte más importante es el bloque de comentarios al inicio, que le dice a WordPress quién eres y cómo se llama tu tema:

/*
Theme Name: Mi Tema
Theme URI: https://misitioweb.com
Author: Tu Nombre
Author URI: https://misitioweb.com
Description: Tema personalizado para mi sitio web.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mi-tema
*/

Los campos obligatorios son solo Theme Name. El resto son opcionales pero recomendables. El Text Domain es importante si vas a traducir el tema —debe coincidir exactamente con el nombre de tu carpeta.

Después de este bloque de comentarios ya puedes empezar a escribir tu CSS normal.

index.php — El template de emergencia

WordPress usa una jerarquía de templates para decidir qué archivo mostrar en cada página. Si no encuentra el template específico que busca, siempre cae en index.php. Por eso es el archivo más importante.

Una versión mínima funcional:

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            ?>
            <article>
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <?php the_excerpt(); ?>
            </article>
            <?php
        endwhile;
    endif;
    ?>
</main>

<?php get_footer(); ?>

get_header() y get_footer() cargan los archivos header.php y footer.php que crearemos a continuación. have_posts() y the_post() son el Loop de WordPress —el mecanismo central que itera sobre los posts de la base de datos.

functions.php — El cerebro del tema

[Párrafo] Este archivo se ejecuta automáticamente cada vez que se carga WordPress. Es donde registras las funcionalidades del tema: soporte para imágenes destacadas, menús de navegación, sidebars, y más.

<?php
/**
 * Funciones del tema
 */

function mi_tema_setup() {
    // WordPress gestiona el <title> automáticamente
    add_theme_support( 'title-tag' );

    // Activar imágenes destacadas en los posts
    add_theme_support( 'post-thumbnails' );

    // Registrar el menú de navegación principal
    register_nav_menus( array(
        'primary' => 'Menú Principal',
    ) );

    // Soporte para logo personalizado desde el admin
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
}
add_action( 'after_setup_theme', 'mi_tema_setup' );

// Cargar el CSS del tema correctamente
function mi_tema_scripts() {
    wp_enqueue_style( 'mi-tema-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mi_tema_scripts' );

Fíjate en que todo el código de configuración va dentro de una función enganchada al hook after_setup_theme. Esto es importante: nunca ejecutes código de configuración del tema directamente fuera de un hook, porque WordPress aún no está completamente cargado en ese punto.

header.php y footer.php

Estos dos archivos contienen el HTML que se repite en todas las páginas del sitio. WordPress los carga cuando llamas a get_header() y get_footer().

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<header class="site-header">
    <div class="site-container">
        
        <div class="site-branding">
            <?php
            if ( has_custom_logo() ) {
                the_custom_logo();
            } else {
                ?>
                <h1 class="site-title">
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                        <?php bloginfo( 'name' ); ?>
                    </a>
                </h1>
                <?php
            }
            ?>
        </div>

        <nav class="main-navigation">
            <?php
            wp_nav_menu( array(
                'theme_location' => 'primary',
            ) );
            ?>
        </nav>

    </div>
</header>

Dos funciones críticas que nunca debes olvidar: wp_head() antes del cierre de </head> y wp_footer() (en el footer) antes del cierre de </body>. Sin ellas, los plugins no pueden inyectar sus scripts y estilos, y muchas cosas dejarán de funcionar.

footer.php

<footer class="site-footer">
    <div class="site-container">
        <p>&copy; <?php echo esc_html( date( 'Y' ) ); ?> <?php bloginfo( 'name' ); ?>. Todos los derechos reservados.</p>
    </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>

La estructura de archivos completa

Con lo que hemos creado, la estructura del tema queda así:

mi-tema/
├── style.css        ← Obligatorio: identifica el tema
├── index.php        ← Obligatorio: template de emergencia
├── functions.php    ← Configuración y funcionalidades
├── header.php       ← Cabecera reutilizable
└── footer.php       ← Pie de página reutilizable

Con estos 5 archivos ya tienes un tema completamente funcional que puedes activar desde Apariencia → Temas en el panel de WordPress.

Activar el tema y el siguiente paso

Ve al panel de administración, navega a Apariencia → Temas y verás tu tema en la lista con el nombre que pusiste en style.css. Actívalo y visita tu sitio.

Verás algo muy básico, sin estilos. Eso es normal —y es exactamente el punto de partida. Ahora tienes control total sobre cada píxel.

El siguiente paso natural es añadir más templates según la jerarquía de WordPress:

single.php — para posts individuales
page.php — para páginas estáticas
archive.php — para listados de categorías y etiquetas
sidebar.php — para la barra lateral
404.php — para la página de error

Cada uno de esos templates lo veremos en artículos separados. Pero antes de llegar ahí, lo más importante es entender el Loop y la Template Hierarchy —los dos conceptos sobre los que se construye todo en WordPress.

Conclusión

Crear un tema desde cero no es tan complicado como parece. La curva de aprendizaje está en entender cómo WordPress decide qué template mostrar y cómo el Loop procesa los posts. Una vez que tienes eso claro, el resto es HTML, CSS y PHP estándar.

El tema que hemos creado en este artículo es exactamente la base del tema que uso en este sitio. Puedes ver el código completo en GitHub [enlace] y usarlo como referencia mientras aprendes.