• Skip to main content
  • Skip to header right navigation
  • Skip to site footer

Antonio Pérez

Full Stack developer

  • Home
  • Sobre mi
  • Podcast
  • Blog
  • Contacto
desarrollo full stack

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

You are here: Home / WordPress / Como crear el archivo custom.css en tu plantilla de WordPress (o Genesis Framework)
25/06/2017 by apcano1978

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.

Categoría: Desarrollo Front End, Desarrollo web, Genesis Framework, WordPress

About apcano1978

Intento nadar entre frameworks, IDEs, SDKs… Algunos lo llaman Full stack developer, yo creo que es solo un eufemismo para decir «el que está en medio de todos los follones» Ruby on Rails y Angular … y bastante tengo …

Previous Post:Google Analytics para Ruby on RailsComo insertar el código de analytics en tu app Ruby on Rails fácilmente
Next Post:¿Cuales son las principales novedades de Angular 5?principales novedades en Angular 5

Reader Interactions

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ahora también en youtube

Ve al canal

Copyright © 2023 · Antonio Pérez · All Rights Reserved · Powered by Mai Theme