Cómo agregar código CSS en WordPress

Es muy común que cuando tienes un sitio web con un tema o plantilla determinada, llegue un momento en el que quieras hacer algunos retoques de diseño.

Muchos de los temas tienen en su configuración opciones para que hagas algunos cambios, sin embargo, es posible que no tengas justo esa opción para la modificación que estas buscando y que solo es posible hacer mediante código CSS.

Si ya tienes el código CSS que que ejecuta las modificaciones, ahora solo faltaría agregarlo a tu sitio web. Esto es lo que aprenderás en este artículo, veremos cómo agregar código CSS en WordPress de manera correcta.

¿Preparados para unas píldoras de sabiduría? 😉

Es posible que hayas escuchado mucho sobre las modificaciones que se hacen por código CSS, es posible que incluso te cause un poco de temor realizar éstas.

En realidad no hay porqué temerlas, si una modificación no te convence simplemente la eliminas ya que todos los métodos para agregar CSS son reversibles, por lo que no tendrás problemas en deshacer los cambios.

 

CSS en WordPress: style.css

---

¿Por qué no debes agregar código CSS en el archivo style.css de un tema en WordPress?

Posiblemente lo primero que se te ocurra es hacer las modificaciones directamente en el archivo style.css del tema, ya sea modificando el código existente o agregando código al final.

Esto sería un error ya que perderías las modificaciones que has hecho cuando actualices el tema, es por eso que existen métodos alternativos para agregar código CSS en WordPress.

 

La forma más simple de agregar CSS en WordPress

---

Las versiones actuales de WordPress ( a partir de la versión 4.7) ya tienen una opción para agregar código CSS directamente como parte de la funcionalidad de los temas.

Puedes ver esta opción desde: Apariencia > Temas; seleccionas el tema que estés utilizando y después en la opción de Personalizar verás que hay una opción de CSS en la cual puedes agregar tu código CSS personalizado.

Sencillo, ¿verdad?

Incluso esta sección te da la opción de ver si tienes algunos errores en tu código, tal y como puedes comprobar en la siguiente imagen:

Una vez que hayas colocado el código CSS personalizado y hayas guardado los cambios, verás que tu código adicional aparecerá en el front-end de tu sitio web como parte del código HTML.

Ten en cuenta que tu código permanecerá incluso cuando hagas actualizaciones del tema/plantilla o de WordPress.

Sin embargo, estas modificaciones solo servirán para el tema específico en donde has colocado el código, si cambias de tema, tu código no tendrá efecto y no se mostrará.

 

Usar un tema hijo para agregar código CSS en WordPress

---

Usar la opción CSS del tema para agregar código, tal como vimos anteriormente, te servirá especialmente cuando añades pocas líneas de código, en caso tengas muchas modificaciones te recomiendo hacerlas en un archivo CSS.

Para tener un archivo con tu código CSS puedes usar la funcionalidad de temas hijos que tiene WordPress y que ya habíamos visto anteriormente en el siguiente artículo el cual te sugiero revisar: Crear temas hijo (child themes) en WordPress.

Cuando creas un tema hijo, tienes un archivo style.css en el tema hijo en donde puedes agregar tu código CSS personalizado, la ventaja es que tienes aislado tu código adicional y no se perderá si actualizas el tema o tu WordPress.

 

Agregar código CSS en WordPress en temas que usan Frameworks

---

En cualquier caso, para temas que usan frameworks, funcionaría igualmente la opción de CSS que tiene el Personalizador de temas de WordPress.

No obstante, si quieres agregar tu código en un archivo CSS, cada framework puede tener una forma diferente de hacerlo.

 Temas con Framework Genesis

Este caso es muy particular ya que los temas de Genesis son temas hijo, el tema padre es el framework, por lo tanto, no es posible agregar un tema hijo de un tema hijo.

Si quieres agregar código CSS en un archivo CSS tendrías que agregar un nuevo archivo usando las funciones de WordPress en PHP, tal y como se detalla en este enlace, tendrías que colocar este código en el archivo functions.php del tema hijo.

Ten en cuenta, que la mayoría de las veces es el tema padre el que tiene actualizaciones, sin embargo, en caso de tener una actualización del tema hijo tendrías que volver a colocar el código en el archivo em>functions.php.

 Temas con Framework Gantry

En este caso Gantry sigue un estándar de nombre de archivo tal como se muestra a continuación:

/wp-content/themes/TU_PLANTILLA/css/TU_PLANTILLA-custom.css

En donde TU_PLANTILLA es el nombre del theme que estás usando.

De otra forma, si no sigue este estándar el archivo no será incluido como parte de los archivos CSS del tema, puedes revisar el artículo Agregar archivo CSS personalizado para plantillas Gantry para conocer esto en profundidad.

 

Conclusión

A pesar de que los temas tienen muchas opciones de configuración, no pueden cubrir todas las opciones de personalización necesarias que nos gustaría, por lo que al final, siempre terminarás agregando código CSS en WordPress.

Saber en dónde añadir este código te facilitará la administración y evitará que pierdas el código en cada actualización del tema que hagas.

Y esto ha sido todo por hoy, espero que hayáis aprendido mucho sobre cómo agregar código CSS en WordPress.

¡Nos vemos en el próximo post!