Añadir CSS y Javascript al child theme utilizando functions.php

En esta ocasión vamos a añadir CSS y Javascript a un child theme de WordPress utilizando el archivo functions.php.

En primer lugar debemos subir o crear los archivos .css y .js a una carpeta en nuestro child theme.

Podemos hacerlo mediante el control panel de nuestro hosting o vía FTP con Filezilla, pero para este tutorial usaremos un plugin llamado File Manager para WordPress.

Para instalarlo, nos vamos al menú de administración de WordPress y hacemos clic en la sección de Plugins y Añadir Nuevo.

Añadir CSS y Javascript al Child theme de WordPress utilizando functions.php: Para instalarlo, nos vamos al menú de administración de WordPress y hacemos clic en la sección de Plugins y Añadir Nuevo.

Y en el buscador escribimos “File manager”, le damos clic a “Instalar”, luego en “Activar” y listo.

Aparecerá la opción “Administrador de archivos WP” y le hacemos clic. Una vez cargue nos mostrará las carpetas de nuestra instalación de WordPress.

Aparecerá la opción 'Administrador de archivos WP' y le hacemos clic. Una vez cargue nos mostrará las carpetas de nuestra instalación de WordPress.

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.

Abrimos la carpeta del child-theme y dentro hacemos clic derecho para crear la carpeta “tu-js-o-css” (puedes ponerle el nombre que desees).

Dentro de la carpeta “tu-js-o-css” creamos los archivos donde incluiremos nuestro CSS y JS que para este tutorial los llamaremos “Ejemplo.css” y “Ejemplo.js”:

Añadir CSS y Javascript al Child theme de WordPress utilizando functions.php: Dentro de la carpeta 'tu-js-o-css' creamos los archivos donde incluiremos nuestro CSS y JS que para este tutorial los llamaremos 'Ejemplo.css' y 'Ejemplo.js'.

Hacemos clic derecho sobre el archivo “Ejemplo.css” y hacemos clic en “Code Editor”, se abrirá una nueva ventana y pegamos o escribimos el código CSS en ella y le damos a Guardar y Cerrar (“SAVE & CLOSE”):

Hacemos clic derecho sobre el archivo 'Ejemplo.css' y hacemos clic en 'Code Editor', se abrirá una nueva ventana y pegamos o escribimos el código CSS en ella y le damos a Guardar y Cerrar ('SAVE & CLOSE').
Repetimos lo anterior pero en el archivo “Ejemplo.js”, pegando o escribiendo el Javascript que usaremos:
Añadir CSS y Javascript al Child theme de WordPress utilizando functions.php: Repetimos lo anterior pero en el archivo 'Ejemplo.js', pegando o escribiendo el Javascript que usaremos:

Luego en WordPress nos vamos a “Apariencia” y en “Editor de temas” y hacemos clic en functions.php:

Luego en WordPress nos vamos a 'Apariencia' y en 'Editor de temas' y hacemos clic en functions.php.

Para incluir los códigos que hemos creado en la carpeta “tu-js-o-css” a las funciones de WordPress , pegaremos el siguiente código en functions.php:

/* 
 * Llamando CSS y JS adicional a WordPress
 */
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' );
Instrucciones adicionales (colores significado)

Los colores en el texto del código no tienen ninguna función, solo sirven para resaltar que puedes cambiar los nombres coloreados en tomate y naranja de la función.

Pero en wp_enqueue_style y wp_enqueue_script debes usar los mismos nombres coloreados en tomate que usaste en wp_register_style y wp_register_script.

Explicación del código

Para agregar más hojas de estilo y códigos javascript a WordPress, primero debemos crear una función principal donde ubicaremos las rutas de los archivos usando wp_register_style para el CSS y wp_register_script para los Javascript.

Una vez que localicemos su ruta, llamaremos a los archivos con dos funciones adicionales dentro de nuestra función principal: wp_enqueue_style para los estilos y wp_enqueue_script para los Javascript.

Finalmente ejecutamos la función principal con add_action usando el hook ‘wp_enqueue_scripts’.

Funciones de WordPress usadas

wp_register_style: Para registrar la ruta de nuestros archivos CSS.

wp_register_script: Para registrar la ruta de nuestros archivos Javascript.

get_stylesheet_directory_uri(): Para obtener el directorio principal de la carpeta donde colocaremos nuestros assets.

wp_enqueue_style: Para ejecutar los archivos CSS registrados con wp_register_style.

wp_enqueue_script: Para ejecutar los archivos Javascript registrados con wp_enqueue_script. usa true o false al final para determinar si el archivo estará ubicado en la cabecera de la página o en el pie.

Más información en la documentación de WordPress sobre estas funciones.

Quedando como en la imagen más abajo. Para guardar los cambios le damos “Actualizar archivo”:

Añadir CSS y Javascript al Child theme de WordPress utilizando functions.php: Quedando como en la imagen más abajo. Para guardar los cambios le damos 'Actualizar archivo'.

Una vez incluidos los códigos debemos llamarlos al html, para eso nos creamos una nueva página de WordPress (o también puedes hacerlo en una página existente) y colocas el HTML, y las clases requeridas para que funcione:

Una vez  incluidos los códigos debemos llamarlos al html, para eso nos creamos una nueva página de WordPress (o también puedes hacerlo en una página existente) y colocas el HTML, y las clases requeridas para que funcione.

Y listo nuestros archivos JS y CSS son llamados y ejecutados por WordPress:

Añadir CSS y Javascript al Child theme de WordPress utilizando functions.php: Y listo nuestros archivos JS y CSS son llamados y ejecutados por WordPress.

Si no funciona asegúrate que los incluiste bien, revisando el inspector de código de tu navegador los archivos, en este caso “Ejemplo.css” y “Ejemplo.js” deben parecer:

Si no funciona asegúrate que los incluiste bien, revisando el inspector de código de tu navegador los archivos, en este caso 'Ejemplo.css' y 'Ejemplo.js' deben parecer:

Y eso sería todo en cuanto a este tutorial para añadir CSS y Javascript al Child theme de WordPress utilizando functions.

Puedes leer otras entradas en mi blog o seguirme en mis redes sociales para mantenerse actualizado:

Facebook Linked In
× Modal de Imagen

Espero tengas un buen día :D.

Deje un comentario

Tu dirección de correo electrónico no será publicada.