¿Necesitas agregar estilos o funcionalidades personalizadas a tu tema hijo en WordPress? La forma más eficiente y profesional de hacerlo es cargando tus propios archivos CSS y JavaScript desde el archivo functions.php.
En este tutorial te enseño cómo hacerlo paso a paso. Ya sea que estés comenzando en el desarrollo web o simplemente quieras tener tus apuntes a mano (como yo xd), esta guía te será útil.
Contenidos
Paso 1: Crea tu carpeta de archivos CSS y JavaScript
Primero, abre tu tema hijo (child theme) y crea una carpeta para tus archivos. Puedes llamarla por ejemplo: tu-js-o-css.
Dentro de esa carpeta crea:
- Un archivo de estilos: Ejemplo.css
- Un archivo de JavaScript: Ejemplo.js
Puedes hacerlo desde el panel de control del hosting o usando el plugin WP File Manager, que facilita mucho el proceso desde el panel de WordPress.
Paso 2: Agrega tu código en functions.php
Una vez tengas listos tus archivos, ve al editor de temas (Apariencia > Editor de archivos de tema) y abre el archivo functions.php de tu child theme.
Agrega el siguiente código:
/* Cargar CSS y JS en el tema hijo */
function ejemplo_scripts() {
wp_register_style('ejemplo-style-css', get_stylesheet_directory_uri().'/tu-js-o-css/Ejemplo.css', '', '1.0','all');
wp_register_script('ejemplo-script-js', get_stylesheet_directory_uri().'/tu-js-o-css/Ejemplo.js','','1.0', false);
wp_enqueue_style('Ejecutar-CSS', get_stylesheet_directory_uri(), array('ejemplo-style-css'), '1.0');
wp_enqueue_script('Ejecutar-JS', get_stylesheet_directory_uri(), array('ejemplo-script-js'), '1.0', false);
}
add_action('wp_enqueue_scripts', 'ejemplo_scripts');En el Administrador de archivos buscamos la carpeta «wp-content» y dentro de ella la carpeta «themes» que es donde estará nuestro tema y su Child theme.
📌 Notas útiles para no perderse
No te preocupes por los colores en los nombres si copias desde editores con resaltado. Solo asegúrate de usar el mismo nombre al registrar y luego al ejecutar («enqueue») tus scripts y estilos.
Primero se usan wp_register_style y wp_register_script para definir los archivos.
Luego se cargan con wp_enqueue_style y wp_enqueue_script.
La función add_action con el hook wp_enqueue_scripts asegura que se ejecuten en el momento correcto.
- wp_register_style(): Registra hojas de estilo.
- wp_register_script(): Registra archivos JavaScript.
- wp_enqueue_style(): Carga el CSS en el sitio.
- wp_enqueue_script(): Carga el JS en el sitio.
- get_stylesheet_directory_uri(): Devuelve la URL del tema hijo (child theme).
Más información en la documentación de WordPress.
Paso 3: Verifica que el código funcione
Crea una nueva página en WordPress y usa las clases o scripts que añadiste. Luego abre el inspector de tu navegador y verifica que se estén cargando correctamente Ejemplo.css y Ejemplo.js.
¡Y listo!
Añadir CSS y JS personalizados desde tu tema hijo en WordPress es una práctica profesional que te da control total sobre el diseño y funcionalidad de tu sitio. Además, mantiene el código organizado y evita sobrescribir archivos del tema principal.
Si te resultó útil, puedes guardarlo o compartirlo con alguien que esté empezando.