¿Cómo crear un tema de WordPress personalizado en 2025?

Wordpress

¿Cómo crear un tema de WordPress personalizado en 2025?

475 Views
0
julio 18, 2025

Configuración de un entorno de trabajo

Prerequisitos:

Tener un wordpress instalado
un dominio local personalizado con https (opcional)

Para comenzar te sugerimos lo siguiente:

Elegir un tema gratuito para personalizar y centrarnos exclusivamente en wordpress

HTML CODEX

Descargar un starter Template llamado Undersescores y poner, un nombre del tema, un slug (sin espacios, con guiones medios para separar palabras y nunca usar guiones bajos), nombre del autor, sitio web del autor, una descripción, y seleccionar las casillas para habilitar WooCommerce boilerplate y _sassify!

Una vez descargados los archivos (Underscores y la maquetación de HTML codex) debemos iniciar un repositorio de git en el nuevo tema que vamos a crear, en mi caso training-wp-2025, guardar cambios y crear un flujo de trabajo con ramas de calidad (staging) y ramas de características particular (feature_function).

Nota importante, de preferencia usar github cli para subir su repositorio de una vez a su cuenta de github.

Cargar hojas de estilo

Verificar las hojas de estilo en el archivo index.html del template que descargaste

<!-- Icon Font Stylesheet -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

<!-- Libraries Stylesheet -->
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">

<!-- Customized Bootstrap Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">

Agregarlas a tu archivo functions.php y usar get_template_directory_uri() para mandar a llamar la ruta relativa del tema en caso de llamar los archivos .css que estén dentro del directorio. En caso de tenerlos en un CDN, solo debes ingresar la url en el parámetro src.

// <!-- Icon Font Stylesheet -->
wp_enqueue_style( 'font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css', array(), '5.10.0' );
wp_enqueue_style( 'bootstrap-icons', 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css', array(), '1.4.1' );

// <!-- Libraries Stylesheet -->
wp_enqueue_style( 'animate',  get_template_directory_uri() . '/digital-marketing-html-template/lib/animate/animate.min.css', array(), '3.5.2' );
wp_enqueue_style( 'owlcarousel',  get_template_directory_uri() . '/digital-marketing-html-template/lib/owlcarousel/assets/owl.carousel.min.css', array(), '2.2.1' );
wp_enqueue_style( 'lightbox',  get_template_directory_uri() . '/digital-marketing-html-template/lib/lightbox/css/lightbox.min.css', array(), _S_VERSION );

// <!-- Customized Bootstrap Stylesheet -->
wp_enqueue_style( 'bootstrap',  get_template_directory_uri() . '/digital-marketing-html-template/css/bootstrap.min.css', array(), '5.0.0' );

//<!-- Template Stylesheet -->
wp_enqueue_style( 'digital-marketing-html-template', get_template_directory_uri() . '/digital-marketing-html-template/css/style.css', array(), _S_VERSION );

Como cargar hojas de JS

Para cargar los scripts debes usar la función wp_enqueue_script() la cual registra el script y lo pone en cola conforme se van anexando.

wp_enqueue_script( 'bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js', array(), '5.0.0', true );
wp_enqueue_script( 'wow', get_template_directory_uri() . '/digital-marketing-html-template/lib/wow/wow.min.js', array(), _S_VERSION, true );

¿Cómo crear un tema de WordPress personalizado en 2025?