Como crear el archivo custom.css en tu plantilla de WordPress (o Genesis Framework)

Una muy buena práctica que, si no estás haciendo, deberías o arderás en el infierno (y con razón) es modificar los estilos de tu plantilla de WordPress, uses Genesis Framework o no, a través de un archivo custom.css. Si no lo estás haciendo, corre, léete este artículo y haz todas las modificaciones que necesites con los snippets que aquí te digo.

En primer lugar, tu dirás, y que pasa si no lo hago? Porque ahora mismo yo  modifico mi styles.css y todo va perfecto. ¡Ay amigo! que equivocado estás, aún no te ha llegado ninguna actualización de una plantilla ¿verdad? Ahí es cuando todas las sonrisas se volverán llantos… Si te llega una actualización del theme de WordPress que usas va a sobreescribir tu archivo styles.css y todo ese css que has escrito con tanto cariño se irá con el viento mientras tu miras al vacío desesperado.

Gracias a Dios, esto tiene fácil solución, precisamente este archivo custom.css que te estoy diciendo, fuera de bromas es muy buena práctica que, lo primero que hagas cuando quieras modificar los estilos de la plantilla sea crearlo y escribir ahí todo el css que modifique la plantilla.

Crea el archivo custom.css

Esto es lo primero que debes hacer. En la carpeta de la plantilla o del child theme de Genesis crea este archivo, vacío por ahora, pero créalo.

Haz que funcione el archivo custom.css

Ahora lo tenemos creado pero WordPress por defecto no coge los estilos de este archivo, debemos añadirlo a la cola de estilos que carga tu web. Para esto tan solo tienes que abrir el archivo functions.php y (yo suelo ponerlo al final) añadir este snippet de código.

/* Añadiendo soporte para custom.css
---------------------------------------------------------------------- */

function enable_custom_css() {
	wp_register_style( 'style_css', get_stylesheet_directory_uri( ).'/style.css' );
	wp_enqueue_style( 'style_css'  );
	
	wp_register_style( 'custom_css', get_stylesheet_directory_uri( ).'/custom.css' );
	wp_enqueue_style( 'custom_css'  );
}
add_action( 'wp_enqueue_scripts', 'enable_custom_css'  );

Bien, vamos a explicar un poco este snippet, en realidad es bastante sencillo.

En primer lugar veis que añado también el soporte para style.css y luego para custom.css es el mismo código si os dais cuenta, esto es simplemente para hacer que el archivo custom.css se cargue siempre después de el archivo style.css, de esta forma, los estilos que yo ponga en custom.css van a tener preferencia, de esta forma, puedo simplemente sobreescribir un estilo existente en style.css sin tener que estar recurriendo siempre al !important, algo que a mi, personalmente no me gusta demasiado.

Luego simplemente lo engancho al hook ‘wp_enqueue_scripts’ que es el encargado de cargar estos archivos de estilos con add_action

Y esto es todo, a partir de aquí tan solo tenéis que escribir ese css precioso para que la web brille por su belleza, ya tenéis técnicamente todo configurado para que funcione el archivo custom.css

Deja tus comentarios, contacta conmigo si quieres más información, etc… y sobre todo, gracias por tomarte el tiempo de leerme.